/* Source Sans Pro */
@font-face {font-family:'Source Sans Pro';font-style:normal;font-weight:900;font-display:swap;src:url(fonts/SourceSansPro_Black.woff) format('woff')}
@font-face {font-family:'Source Sans Pro';font-style:normal;font-weight:900;font-display:swap;src:url(fonts/SourceSansPro_Black.woff2) format('woff2')}
@font-face {font-family:'Source Sans Pro';font-style:italic;font-weight:900;font-display:swap;src:url(fonts/SourceSansPro_BlackItalic.woff) format('woff')}
@font-face {font-family:'Source Sans Pro';font-style:italic;font-weight:900;font-display:swap;src:url(fonts/SourceSansPro_BlackItalic.woff2) format('woff2')}
@font-face {font-family:'Source Sans Pro';font-style:normal;font-weight:700;font-display:swap;src:url(fonts/SourceSansPro_Bold.woff) format('woff')}
@font-face {font-family:'Source Sans Pro';font-style:normal;font-weight:700;font-display:swap;src:url(fonts/SourceSansPro_Bold.woff2) format('woff2')}
@font-face {font-family:'Source Sans Pro';font-style:italic;font-weight:700;font-display:swap;src:url(fonts/SourceSansPro_BoldItalic.woff) format('woff')}
@font-face {font-family:'Source Sans Pro';font-style:italic;font-weight:700;font-display:swap;src:url(fonts/SourceSansPro_BoldItalic.woff2) format('woff2')}
@font-face {font-family:'Source Sans Pro';font-style:normal;font-weight:600;font-display:swap;src:url(fonts/SourceSansPro_SemiBold.woff) format('woff')}
@font-face {font-family:'Source Sans Pro';font-style:normal;font-weight:600;font-display:swap;src:url(fonts/SourceSansPro_SemiBold.woff2) format('woff2')}
@font-face {font-family:'Source Sans Pro';font-style:italic;font-weight:600;font-display:swap;src:url(fonts/SourceSansPro_SemiBoldItalic.woff) format('woff')}
@font-face {font-family:'Source Sans Pro';font-style:italic;font-weight:600;font-display:swap;src:url(fonts/SourceSansPro_SemiBoldItalic.woff2) format('woff2')}
@font-face {font-family:'Source Sans Pro';font-style:normal;font-weight:400;font-display:swap;src:url(fonts/SourceSansPro_Regular.woff) format('woff')}
@font-face {font-family:'Source Sans Pro';font-style:normal;font-weight:400;font-display:swap;src:url(fonts/SourceSansPro_Regular.woff2) format('woff2')}
@font-face {font-family:'Source Sans Pro';font-style:italic;font-weight:400;font-display:swap;src:url(fonts/SourceSansPro_Italic.woff) format('woff')}
@font-face {font-family:'Source Sans Pro';font-style:italic;font-weight:400;font-display:swap;src:url(fonts/SourceSansPro_Italic.woff2) format('woff2')}
@font-face {font-family:'Source Sans Pro';font-style:normal;font-weight:300;font-display:swap;src:url(fonts/SourceSansPro_Light.woff) format('woff')}
@font-face {font-family:'Source Sans Pro';font-style:normal;font-weight:300;font-display:swap;src:url(fonts/SourceSansPro_Light.woff2) format('woff2')}
@font-face {font-family:'Source Sans Pro';font-style:italic;font-weight:300;font-display:swap;src:url(fonts/SourceSansPro_LightItalic.woff) format('woff')}
@font-face {font-family:'Source Sans Pro';font-style:italic;font-weight:300;font-display:swap;src:url(fonts/SourceSansPro_LightItalic.woff2) format('woff2')}
@font-face {font-family:'Source Sans Pro';font-style:normal;font-weight:200;font-display:swap;src:url(fonts/SourceSansPro_ExtraLight.woff) format('woff')}
@font-face {font-family:'Source Sans Pro';font-style:normal;font-weight:200;font-display:swap;src:url(fonts/SourceSansPro_ExtraLight.woff2) format('woff2')}
@font-face {font-family:'Source Sans Pro';font-style:italic;font-weight:200;font-display:swap;src:url(fonts/SourceSansPro_ExtraLightItalic.woff) format('woff')}
@font-face {font-family:'Source Sans Pro';font-style:italic;font-weight:200;font-display:swap;src:url(fonts/SourceSansPro_ExtraLightItalic.woff2) format('woff2')}
/* Allura */
@font-face {font-family:'Allura';font-style:normal;font-weight:400;font-display:swap;src:url(fonts/Allura_Regular.woff) format('woff')}
@font-face {font-family:'Allura';font-style:normal;font-weight:400;font-display:swap;src:url(fonts/Allura_Regular.woff2) format('woff2')}
/* Bree Serif */
@font-face {font-family:'Bree Serif';font-style:normal;font-weight:400;font-display:swap;src:url(fonts/BreeSerif_Regular.woff) format('woff')}
@font-face {font-family:'Bree Serif';font-style:normal;font-weight:400;font-display:swap;src:url(fonts/BreeSerif_Regular.woff2) format('woff2')}

:root {--ci-red:rgb(194,3,20);--ci-red-hover:rgb(148, 0, 12);--font-black:#333333}

.universal-spacer {width:100%;padding:0% 5%;margin:auto}
@media screen and (min-width:1400px) {
    .universal-spacer {width:1200px;padding:0px 50px}
}
.mobile-menu-canvas {
    position:fixed;top:0;left:0;width:100vw;height:100vh;background-color:transparent;visibility:hidden;cursor:unset;z-index:400;transition:all 0.2s 0s ease-in-out}

header{min-height:0;display:block;margin:0}/*base overrides*/

header a, .mobile-menu a {color:rgb(128, 128, 128)}
header > div{display:block} /*base override*/
.header-top {display:flex;justify-content:space-between;height:25px;font-size:10pt;background-color:rgb(248,248,248)}

header .universal-spacer {border-bottom:solid thin rgb(225,225,225)}
.header-top a {height:100%;padding:5px;display:flex;justify-content:center;align-items:center}
.header-top a:hover {color:black}
.header-top a > *:first-child {padding-right:10px}
.header-top img {height:100%;filter:invert(54%) sepia(0%) saturate(0%) hue-rotate(270deg) brightness(93%) contrast(98%)}
.header-top a:hover img {filter:none}
.header {background-color:white}
.header-content{height:100px;position:relative} /*container might be redundant*/
@media screen and (min-width:992px) {
    .header-content{height:125px}/*container might be redundant*/
}
.header-content .logo{position:absolute;top:0;bottom:0;left:0}
@media screen and (min-width:992px) {
    .header-content .logo{height:100%;position:absolute;top:0;bottom:0;left:50%;transform:translateX(-50%)}
}
.header-content .logo img {padding:12px 0;height:100%}
#search-box{position:absolute;bottom:0;right:0}
#search-box #itemSearch {font-size:14px;width:300px;padding:3px;background:url()}
#searchBtn {display:none}

.functions {display:none;position:absolute;top:0;right:0;bottom:0;display:flex}
.functions > *, .mobile-functions > * {height:100%}
.functions > * + * {margin-left:20px}
.functions > * {height:100%;display:flex;justify-content:center;align-items:center;min-width:35px}/* bandaid fix for firefox */
.functions > * img {height:25%;filter:invert(17%) sepia(1%) saturate(20%) hue-rotate(313deg) brightness(92%) contrast(89%)}
.functions a, .functions label {width:24px}/* bandaid fix for firefox */
#search-box {display:block}
.functions-menu {display:none}
.desktop-nav {display:flex;height:100%}
@media screen and (max-width:992px) {
    .functions {bottom:10px}
    .functions > * img {height:40%}
    .functions a, .functions label {width:44px}/* bandaid fix for firefox */
    .desktop-nav {display:none}
    .functions-menu {display:flex}
}
.desktop-nav > * {height:100%;display:flex;align-items:center;padding-right:20px}
.desktop-nav > *:last-child {padding-right:0px}
/* todo */
.cart-tile-wrapper{display:none}

.subNavGroup, .subNavGroupA {background-color:white} /*base override*/
.desktop-nav-top-level-list > a {position:relative;display:flex;height:100%;align-items:center;overflow:hidden}
.desktop-nav-top-level-list > a::after {content:'';position:absolute;bottom:-0.001px;width:100%;height:0px;background-color:var(--ci-red);transition:all 0.2s 0s ease-in-out}
.desktop-nav-top-level-list:hover > a::after {height:3.001px}
.desktop-nav-top-level-list > a > div {padding:0px 20px;border-right:solid thin rgb(225,225,225)}
.desktop-nav-top-level-list:last-child > a > div {border-right:none}

.desktop-nav-top-level ul {background-color:white;border:solid thin rgb(225,225,225)}

.header-nav {display:none;height:50px;background-color:white}
@media screen and (min-width:992px) {
    .header-nav {display:block}
}
.header-nav nav {height:100%;width:100%}
.header-nav nav > ul {display:flex;height:100%;max-width:100%;justify-content:center;align-items:center}

.desktop-nav-top-level-list {position:relative;height:100%}
.desktop-nav-second-level {display:none;position:absolute;top:100%;left:0}
.desktop-nav-second-level, .desktop-nav-third-level {box-shadow:4px 4px 16px -8px hsl(0deg 0% 0% / 17%)}
.desktop-nav-top-level-list:hover .desktop-nav-second-level{display:initial}
.desktop-nav-second-level-list {position:relative}
.desktop-nav-second-level-list a {width:240px}
.desktop-nav-third-level {display:none;position:absolute;top:0;left:100%}
.desktop-nav-second-level-list:hover .desktop-nav-third-level{display:initial}

.breadcrumbs {height:50px;background-color:rgb(252,252,252);border-bottom:solid thin rgb(225,225,225)}

#mobile-menu-toggle, #menu-search { /* firefox sets border to 2px cant override here*/
    visibility:hidden;height:0px;width:0px;padding:0;margin:0}
#mobile-menu-toggle:checked ~ .mobile-menu-canvas {visibility:visible;background-color:rgba(0, 0, 0, 0.5)}

.mobile-menu {
    position:fixed;background-color:white;height:100%;width:100%;max-width:440px;transform:translateX(100%);box-shadow:0px 0px 20px -15px #00000000;transition:all 0.2s 0s ease-in-out;
    z-index:500;display:flex;flex-direction:column;top:0;/*helps firefox*/
    right:0}
#mobile-menu-toggle:checked ~ .mobile-menu {transform:translateX(0%);box-shadow:0px 0px 20px -15px #000}
.mobile-menu-header {height:200px;flex:0 0 auto;display:flex;justify-content:flex-end;align-items:center}
.mobile-menu-search, .mobile-menu-close {height:100%;padding:27px;font-size:52px;display:flex;align-items:center}
.mobile-menu-close {padding-left:20px}
.mobile-menu-search {filter:brightness(0);opacity:0.4;padding:13px}
.mobile-menu-search img {height:32px}

.desktop-nav img {height:100%;width:100%;opacity:0.82}
header .breadcrumbs-fade-left, header .breadcrumbs-fade-right {border:none;height:0px;position:relative;pointer-events:none}
@media screen and (min-width:992px) {
    header .breadcrumbs-fade-left, header .breadcrumbs-fade-right {display:none}
}
.breadcrumbs-fade-left:before, .breadcrumbs-fade-left:after,
.breadcrumbs-fade-right:before, .breadcrumbs-fade-right:after{
    position:absolute;height:49px;content:' ';width:5%;right:0;transform:translateX(-100%);background:linear-gradient(
        to right,
        hsla(0, 0%, 100%, 0) 0%,
        hsla(0, 0%, 100%, 0.013) 8.1%,
        hsla(0, 0%, 100%, 0.049) 15.5%,
        hsla(0, 0%, 100%, 0.104) 22.5%,
        hsla(0, 0%, 100%, 0.175) 29%,
        hsla(0, 0%, 100%, 0.259) 35.3%,
        hsla(0, 0%, 100%, 0.352) 41.2%,
        hsla(0, 0%, 100%, 0.45) 47.1%,
        hsla(0, 0%, 100%, 0.55) 52.9%,
        hsla(0, 0%, 100%, 0.648) 58.8%,
        hsla(0, 0%, 100%, 0.741) 64.7%,
        hsla(0, 0%, 100%, 0.825) 71%,
        hsla(0, 0%, 100%, 0.896) 77.5%,
        hsla(0, 0%, 100%, 0.951) 84.5%,
        hsla(0, 0%, 100%, 0.987) 91.9%,
        hsl(0, 0%, 100%) 100%
      )}
.breadcrumbs-fade-left:before, .breadcrumbs-fade-left:after {
    opacity:0;right:unset;left:0;transform:translateX(100%);background:linear-gradient(
        to left,
        hsla(0, 0%, 100%, 0) 0%,
        hsla(0, 0%, 100%, 0.013) 8.1%,
        hsla(0, 0%, 100%, 0.049) 15.5%,
        hsla(0, 0%, 100%, 0.104) 22.5%,
        hsla(0, 0%, 100%, 0.175) 29%,
        hsla(0, 0%, 100%, 0.259) 35.3%,
        hsla(0, 0%, 100%, 0.352) 41.2%,
        hsla(0, 0%, 100%, 0.45) 47.1%,
        hsla(0, 0%, 100%, 0.55) 52.9%,
        hsla(0, 0%, 100%, 0.648) 58.8%,
        hsla(0, 0%, 100%, 0.741) 64.7%,
        hsla(0, 0%, 100%, 0.825) 71%,
        hsla(0, 0%, 100%, 0.896) 77.5%,
        hsla(0, 0%, 100%, 0.951) 84.5%,
        hsla(0, 0%, 100%, 0.987) 91.9%,
        hsl(0, 0%, 100%) 100%
    );transition:all 0.1s 0s ease-in-out}
.breadcrumbs-fade-left.active:before, .breadcrumbs-fade-left.active:after {opacity:1}
.breadcrumbs-fade-left:after {width:calc( 5% + 1px );background-color:white;transform:translateX(0px)}
.breadcrumbs-fade-right:after {width:calc( 5% + 1px );background-color:white;transform:translateX(0px)}
    
.breadcrumbs {
    display:flex;justify-content:flex-start;align-items:center;overflow-x:scroll;-ms-overflow-style:none;/* IE and Edge */
    scrollbar-width:none;/* Firefox */
}
.breadcrumbs::-webkit-scrollbar {display:none}
@media screen and (min-width:992px) {
    .breadcrumbs {justify-content:flex-end}
}
.breadcrumbs a {cursor:pointer}
.breadcrumbs > * {height:100%;display:flex;justify-content:center;align-items:center;font-size:small}
.breadcrumbs > * > * {
    padding-right:5px;white-space:nowrap}
.breadcrumbs > * + * > * {padding-left:5px}
.breadcrumbs > * + * > * {border-left:solid thin rgb(225, 225, 225)}

#login-link, .cart-container a {height:100%;padding:16px}
#login-link {display:initial}  /* why was this display:none in the first place? */
.mobile-menu-nav {overflow:scroll}
.mobile-menu-nav ul {padding:0;margin:0}
.mobile-menu a {padding:12.5px 0px}
.mobile-menu .first-level {padding-left:50px}
.mobile-menu .second-level {padding-left:75px}
.mobile-menu .third-level {padding-left:100px}
.navGroup, .navGroupA, .navGroup_active, .navGroupA_active {font-weight:unset;padding:0px;margin:0px;color:rgb(128, 128, 128)}
.subNavGroup, .subNavGroup_active, .subNavGroupA {color:rgb(128, 128, 128);padding:7.5px 15px}
.mobile-menu li {width:100%;list-style-type:none;border-bottom:solid thin rgb(225,225,225)}
.mobile-navbar-first-level-item, .mobile-navbar-second-level-item, .mobile-navbar-third-level-item, .mobile-navbar-li {border-bottom:solid thin black}
.navGroup {background-color:transparent} /*base override*/

#content-wrapper P, #content-wrapper TEXTAREA, #content-wrapper TD TEXTAREA {color:var(--font-black)}
#content-wrapper {
    min-height:90vh;background-color:white;color:var(--font-black);padding-top:25px;padding-bottom:25px;border-bottom:solid thin rgb(225,225,225);background-image:url(media/bg.jpg);background-size:cover}

#content-wrapper img{box-shadow: 4px 16px -8px hsl(0deg 0% 0% / 17%)}

.ci-button, .ci-button-red, .item-variants .active {
    border:none;padding:10px;background-color:var(--ci-red);border-radius:5px;color:white;cursor:pointer}
.ci-button {background-color:white;color:var(--font-black)}
.ci-button:hover {background-color:rgb(207 207 207);text-decoration:none}
.ci-button-red:hover {background-color:var(--ci-red-hover);text-decoration:none}
.item-variants > * + * > *.active:hover {background-color:var(--ci-red-hover)}

footer {padding:0;margin:0}
footer h2 {color:var(--ci-red);margin:20px 0}
footer .cell > div {padding:20px 0}
footer .cell > div > div {
    padding-bottom:5px}
footer .cell > div > div:last-child {
    padding-bottom:0px}
footer .cell > div > div > div {
    display:flex;justify-content:space-between;padding-bottom:5px}
footer > div {
    background-color:white;border-bottom:solid thin rgb(225,225,225)}
.socket {font-size:10pt;padding:8px 0}

.header-with-line {display:flex;align-items:center}
.header-with-line *{color:var(--ci-red);padding-top:0;margin-top:0}
.header-with-line::after {content:' ';border-top:solid thin rgb(0 0 0 / 12%);flex:1 1 auto;margin-left:20px}

th, .navGroup_active, .subNavGroup_active, .order_step_10, .order_step_1, .order_step_11, .group_red_title, A:hover.tile, A:hover.navGroup, A:hover.navGroupA, A:hover.navGroup_active, A:hover.navGroupA_active, A:hover.subNavGroup, A:hover.subNavGroup_active, .grouptitle, .pagetitle
 {background-color:#FDDA5C;color:#000000}
.grouptitle A, .pagetitle A, A.tablesort, A.tablesort:hover, A.tablesorted, A.tablesorted:hover {color:#000000}
.grouptitle A:hover, .pagetitle A:hover {background-color:#978237;color:#000}.nav-icon {background-color:#FDDA5C}