/**
 * Woocommerce Categories
 */

.widget_woo_categories {position: relative;}
.widget.widget_woo_categories {padding: 0;}
.footer .widget.widget_woo_categories {padding-top: 57px;}
.site__sidebar .widget.widget_woo_categories {padding-top: 30px;}

.widget_woo_categories .row {overflow: hidden;}
.widget_woo_categories .row > div {padding: 0;}
.woo-categories-item-content > img {width: 100%;}

.woo-categories-item-content--table {
    text-align: center;
    display: table;
    height: 100%;
    width: 100%;
}
.woo-categories-item-content--cell {
    position: relative;
    display: table-cell;
    width: 100%;
    vertical-align: middle;
    line-height: 0; /* need to remove unnecessary spaces inline-block's */
}
.woo-categories-link {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
}
.woo-categories-item-meta {
    position: relative;
}
.woo-categories-item-content .overlay {
    content: '';
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
}
.woo-categories-item-content .overlay {}
.woo-categories-item-content:hover {opacity: 0.85;}
.woo-categories-item-content:hover .overlay {}
.woo-categories-item-content .overlay:before,
.woo-categories-item-content .overlay:after {
    content: '';
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
}
.woo-categories-item-content .overlay:before {}
.woo-categories-item-content .overlay:after {}

/* Woocommerce Categories -- Title */
.woo-categories-category {
    font-weight: 700;
    line-height: 1;
    letter-spacing: 0;
    text-transform: uppercase;
    padding: 0 1.25em 0 1.25em;
    color: #ffffff;
}
.woo-categories-high .woo-categories-category {
    padding: 0 0.5833em 0 0.5833em;
}

.woo-categories-category a {
    /* These are technically the same, but use both */
    overflow-wrap: break-word;
    word-wrap: break-word;
    -ms-word-break: break-all;
    /* This is the dangerous one in WebKit, as it breaks things wherever */
    word-break: break-all;
    /* Instead use this non-standard one: */
    word-break: break-word;
    /* Adds a hyphen where the word breaks, if supported (No Blink) */
    -ms-hyphens: auto;
    -moz-hyphens: auto;
    -webkit-hyphens: auto;
    hyphens: auto;
}
.woo-categories-category a,
.woo-categories-category a:focus,
.woo-categories-category a:active {
    color: #ffffff;
}
.woo-categories-category a:hover {
    color: #b0aead;
}

.footer .woo-categories-category a,
.footer .woo-categories-category a:focus,
.footer .woo-categories-category a:active {
    color: #ffffff;
}
.footer .woo-categories-category a:hover {
    color: #b0aead;
}

/* Woocommerce Categories -- Triangle  */
.woo-categories-triangle {
    position: absolute;
    top: 50%;
    margin-top: -37px;
    z-index: 1;
}
.woo-categories-triangle.triangle-left {
    left: 0;
    width: 0;
    height: 0;
    border-top: 36px solid transparent;
    border-left: 36px solid #ffffff;
    border-bottom: 36px solid transparent;
}
.woo-categories-triangle.triangle-right {
    right: 0;
    width: 0;
    height: 0;
    border-top: 36px solid transparent;
    border-right: 36px solid #ffffff;
    border-bottom: 36px solid transparent;
}
.woo-categories-triangle .fa {
    font-size: 24px;
    position: relative;
    top: -14px;
    color: #cfcfcf;
}
.woo-categories-triangle .fa-angle-left {
    left: -36px;
}
.woo-categories-triangle .fa-angle-right {
    right: -28px;
}

/* Woocommerce Categories -- Count */
.woo-categories-count {
    font-family: "Montserrat", sans-serif;
    font-size: 10px;
    font-size: 1rem;
    text-transform: uppercase;
    margin-top: 15px;
    color: #ffffff;
}

/* Animate/Transition */
.woo-categories-item-content,
.woo-categories-item-content:hover,
.woo-categories-item-content .overlay,
.woo-categories-item-content:hover .overlay {
    -webkit-transition: all .3s ease-in-out;
    -o-transition: all .3s ease-in-out;
    transition: all .3s ease-in-out;
}

/**
 * Responsive and widget placements
 */

/* Secondary / left/right site sidebar */
.widget-width__side .woo-categories-item {width: 100% !important;}
.widget-width__side .woo-categories-triangle {display: none;}
.widget-width__side .woo-categories-high {height: 150px;}
.widget-width__side .woo-categories-low {height: 150px;}

/* Mobile small 240px */
@media screen and (min-width: 15em) {
    /* main */
    .woo-categories-category,
    .woo-categories-high .woo-categories-category {
        font-size: 24px;
        font-size: 2.4rem;
        padding: 0 0.3889em 0 0.3889em;
    }
    .woo-categories-high {height: 150px;}
    .woo-categories-low {height: 150px;}
    .woo-categories-triangle {display: none;}
    /* width__side */
    .widget-width__side .woo-categories-category,
    .widget-width__side .woo-categories-high .woo-categories-category {
        font-size: 24px;
        font-size: 2.4rem;
        padding: 0 0.3889em 0 0.3889em;
    }
}
/* Mobile small 320px */
@media screen and (min-width: 20em) {}
/* Mobile Large 620px */
@media screen and (min-width: 38.75em) {}
/* Tablet Small 740px */
@media screen and (min-width: 46.25em) {}
@media screen and (min-width: 768px) {
    .woo-categories-high .woo-categories-category {
        font-size: 37px;
        font-size: 3.7rem;
        padding: 0 0.5833em 0 0.5833em;
    }
    .woo-categories-high {height: 380px;}
    .woo-categories-low {height: 190px;}
    .woo-categories-triangle {display: block;}
}
/* Tablet Large 880px */
@media screen and (min-width: 55em) {}
/* Desktop Small 955px */
@media screen and (min-width: 59.6875em) {}
@media screen and (min-width: 992px) {}
/* Desktop Medium 1100px */
@media screen and (min-width: 68.75em) {
    .woo-categories-high .woo-categories-category {
        font-size: 51px;
        font-size: 5.1rem;
        padding: 0 0.3889em 0 0.3889em;
    }
}
/* Desktop Large 1240px */
@media screen and (min-width: 77.5em) {}
/* Desktop X-Large 1403px */
@media screen and (min-width: 87.6875em) {}