@keyframes rotate {
    from {transform: rotate(0deg);}
    to {transform: rotate(360deg);}
}
.ontrans{pointer-events: none;opacity: 0.3;background-color: #000;}

#catalog {min-height: 385px;}

#catalog .content {padding: 0;margin: 0 auto;}
#catalog .content input {width: 100%;box-sizing: border-box;border: 1px solid #f2f2f2;padding: 15px 15px;border-radius: 0;background-color: #fff;box-shadow: 0 0 18px -6px #ccc;min-height: 55px;font-size: 16px;color: #7d7d7d;}
#catalog .content input:active, #catalog .content input:focus{outline: 0!important;background-color: #FFF;border-color: #e8e8e8;color:#333;}


/* CATALOG RESULTS */
#catalog_results {background-color: #f9f9f9;border-radius: 0 0 15px 15px;border: 1px solid #f4f4f4;}
#catalog_results .content{padding: 15px 15px 15px 15px;height: auto;overflow: auto;}
#catalog_results .content > .thegroup {width: 25%;float: left;padding: 0 15px 0 0;box-sizing: border-box;}
#catalog_results .content > .thegroup:last-child{padding-right: 0;}
#catalog_results .cat_group {margin: 0;}
#catalog_results .catrow {height: auto;overflow: auto;clear: both;margin: 0 0 5px 0;display: none;}
#catalog_results .catrow > .xlevel.x1 {margin: 0 0 0 12px;}
#catalog_results .catrow.matchcat, #catalog_results .catrow.matchprod, #catalog_results .catrow.onlycat {display: block;}
#catalog_results .catrow > div {display: block;}
#catalog_results .catrow > div > span {position: relative;cursor: pointer;background-color: #dbdbdb;padding: 7px 30px 7px 10px;margin: 0 0 0 0;border-radius: 8px;font-size: 14px;display: block;color: #5B5B5B;font-weight: bold;line-height: 18px;width: 100%;white-space: pre;overflow: hidden;text-overflow: ellipsis;box-sizing: border-box;}
#catalog_results .catrow > div > span > dd {color:#828282;cursor:pointer;width: 30px;background-color: #c8c8c8;margin: 0 0 0 5px;position: absolute;right: 0;height: 100%;top: 0;z-index: 5;}
#catalog_results .catrow > div > span > dd::before {content: "\f078";font-family: 'FontAwesome';font-weight: normal;font-size: 15px;display: block;text-align: center;line-height: 30px;}
#catalog_results .catrow .subprods {clear: both;max-width: 100%;max-height: 167px;overflow-y: auto;display: block;position: relative;border-radius: 7px;margin: 5px 0 10px 10px;border: 1px solid #e3e3e3;background-color: #e8e8e8;padding: 7px 5px;}
#catalog_results .catrow .subprods cit {cursor: pointer;background-color: #f37021;line-height: 17px;display: block;padding: 7px 10px 7px 10px;box-sizing: border-box;border-radius: 6px;font-size: 13px;color: #FFF;height: 30px;position: relative;margin: 0 0 5px 0;max-width: 100%;overflow: hidden;text-overflow: ellipsis;white-space: pre;font-weight: normal;}
#catalog_results .catrow .subprods cit.sel > i {background-color: #d56400;}
#catalog_results .catrow .subprods cit.sel:hover {background-color: #d56400;}
#catalog_results .catrow .subprods cit:last-child {border-bottom:none;margin-bottom: 0;}
#catalog_results .catrow > div > span[data-fid]:not(.sel) {display: none;}
#catalog_results .catrow .sel > i {content: "+";cursor: pointer;font-style: normal;display: block;width: 30px;background-color: #1a9b41;float: left;margin: -7px 3px -7px -10px;border-radius: 5px 0 0 5px;text-align: center;font-weight: bold;font-size: 27px;line-height: 32px;color: #FFF;position: relative;top: 0;left: 0;z-index: 2;}
#catalog_results .catrow .sel > i:hover {background-color: #168237;}
#catalog_results .catrow .subprods.more5::after {content: "\f07d";position: sticky;right: 0;background-color: #e8e8e8;z-index: 5;border-radius: 5px 0 0 0;font-size: 14px;color: #b0b0b0;opacity: 1;width: 12px;bottom: -7px;top: 0px;display: block;box-sizing: border-box;cursor: default;font-family: 'FontAwesome';font-weight: normal;float: right;text-align: right;height: 25px;line-height: 23px;}
#catalog_results .catrow .sel.onblock{filter: grayscale(1);opacity: 0.5;pointer-events: none;}

#catalog_results .catrow > .xlevel.x0 > .sel{cursor:default;background-color: #4368a4;color: #FFF;padding: 10px 10px;}
#catalog_results .catrow > .xlevel.x0 > .sel > i {cursor:pointer;margin: -10px 4px -10px -10px;height: 38px;line-height: 39px;cursor: pointer;}
#catalog_results .catrow > .xlevel.x0 > .sel > i:hover{background-color: #168237;}
#catalog_results .catrow > .xlevel.x0 > .sel > dd {display: none;}

#catalog_results .content > .thegroup.onsearch > .catrow:first-child {display: block;}

/* CATALOG CHECKOUT */
#catalogcart {background-color: #f2f2f2;position: fixed;bottom: 0;z-index: 8;right: 70px;box-sizing: border-box;max-width: 320px;width: 100%;box-shadow: 0 -2px 7px -5px #333;border-radius: 10px 10px 0 0;}
#catalogcart > .head {text-align: left;cursor: pointer;font-size: 16px;background-color: #1f272b;display: block;margin: 0;padding: 13px 10px 13px 8px;border-radius: 10px 10px 0 0;color: #FFF;font-weight: bold;height: 18px;line-height: 20px;overflow: hidden;}
#catalogcart > .head i{float: right;}
#catalogcart > .head i::before {content: "\f077";font-family:'FontAwesome';font-style:normal;line-height: 16px;font-size: 20px;}
#catalogcart.opened > .head i::before {content: "\f078";}
#catalogcart > .head dd {margin: -6px 8px 0 0;font-size: 18px;opacity: 1;padding: 0;border-radius: 5px;float: left;font-weight: normal;width: 30px;text-align: center;height: 30px;line-height: 29px;}
#catalogcart > .head dd:hover {background-color: #b90000;}

#catalogcart > .content {max-height: calc(66vh - 285px);padding: 0 10px;display: none;overflow: auto;}
#catalogcart.opened > .content {display: block;}
#catalogcart > .content ul{list-style-type: none;padding: 0;margin: 0;}
#catalogcart > .content > .cart_group {margin: 0 -10px 0 -10px}
#catalogcart > .content > .cart_group:last-child {margin-bottom: 0;}
#catalogcart > .content > .cart_group ul li {cursor: pointer;background-color: #FFF;padding: 5px 15px;font-size: 14px;line-height: 25px;white-space: pre;text-overflow: ellipsis;overflow: hidden;}
#catalogcart > .content > .cart_group ul li i {width: 35px;height: 18px;display: inline-block;margin: 5px 5px -4px -8px;background-color: #bfbfbf;border-radius: 10px;position: relative;cursor: pointer;}
#catalogcart > .content > .cart_group ul li i::after {-webkit-transition: all ease-in-out 0.25s; -moz-transition: all ease-in-out 0.25s;-o-transition: all ease-in-out 0.25s; transition: all ease-in-out 0.25s;}
#catalogcart > .content > .cart_group ul li i::after {background-color: #00aa6a;width: 18px;height: 18px;position: absolute;display: block;left: 16px;top: 0;content: " ";border-radius: 100%;}
#catalogcart > .content > .cart_group ul li.inactive i::after {left: 1px;background-color: #848484;}

#catalogcart > .content > .cart_group > label {position: relative;display: block;cursor: pointer;margin: 0;padding: 8px 10px 8px 38px;background-color: #29343a;color: #FFF;font-size: 14px;border-bottom: 1px solid #1f272b;white-space: pre;text-overflow: ellipsis;overflow: hidden;}
#catalogcart > .content > .cart_group > label > em {background-color: #00aa6a;font-style: normal;color: #FFF;min-width: 20px;display: inline-block;margin: 0 10px 0 0;padding: 0 8px;text-align: center;font-weight: bold;line-height: 21px;border-radius: 10px;}
#catalogcart > .content > .cart_group > label > cit {font-style: normal;background-color: #f37021;z-index: 4;position: absolute;left: 8px;width: 21px;text-align: center;border-radius: 100%;height: 21px;line-height: 21px;color: #FFF;font-weight: bold;cursor: pointer;top: 8px;font-size: 11px;}

#catalogcart > .content > .cart_group > .cartprod{display: none;max-height: 225px;overflow: auto;}
#catalogcart > .content > .cart_group.opened > label {color: #FFF;}
#catalogcart > .content > .cart_group.opened .cartprod{display: block;}

#catalogcart > .content > .cart_group > label > i {float: right;margin: 0 2px 0 0;position: absolute;right: 0;height: 100%;background-color: transparent;top: 0;line-height: 35px;padding: 0 10px;}
#catalogcart > .content > .cart_group > label > i::before {content: "\f077";font-weight: normal;font-family:'FontAwesome';font-style:normal;line-height: 11px;font-size: 16px;}
#catalogcart > .content > .cart_group.opened > label > i::before {content: "\f078";}

#catalogcart .generate {background-color: #1f272b;box-sizing: border-box;padding: 10px 10px;}
#catalogcart .generate #generate {position: relative;text-transform: uppercase;text-align: left;color: #FFF;margin: 0 auto;font-size:15px;border: none;font-weight: bold;padding: 10px 10px 10px 40px;border-radius: 8px;background-color: #00aa6a;display: block;width: 100%;cursor: pointer;max-width: 225px;}
#catalogcart .generate #generate:hover{background-color: #0e6141;}
#catalogcart .generate #generate i{position: absolute;left: 10px;top: 7px;width: 25px;height: 25px;line-height: 30px;text-align: center;}
#catalogcart .generate #generate i::before {content: "\f013";font-weight: normal;font-family:'FontAwesome';font-style:normal;line-height: 11px;font-size: 22px;}
#catalogcart .generate #generate cit {display: block;margin: 2px 0 -2px 0;font-size: 12px;font-weight: normal;}
#catalogcart .generate #generate.ontrans > i{animation: rotate 2s infinite linear;-webkit-animation: rotate 2s infinite linear;-moz-animation: rotate 2s infinite linear;-o-animation: rotate 2s infinite linear;}
#catalogcart .generate #downloadlink {display: none;width: 150px;background-color: #00aa6a;text-align: center;border-radius: 5px;margin: 0 auto;padding: 10px 5px;text-transform: uppercase;color: #FFF;font-weight: bold;}
#catalogcart .generate.indown #downloadlink{display: block;}
#catalogcart .generate.indown #generate {display: none;}

#catalogcart.empty .head {color: #797979;pointer-events: none;}
#catalogcart.empty .head i{display: none;}
#catalogcart.empty .generate #generate{opacity: 0.4;pointer-events: none;pointer-events: none;filter: grayscale(1);}
#catalogcart.empty .head dd{opacity: 0;}

#catalog #filters {padding: 20px 0;}
#catalog #filters .colx {width: 50%;display: inline-block;}
#catalog #filters .colx.xright{text-align: right;}

#catalog #filters em {display: inline-block;padding: 7px 15px;font-style: normal;margin: 0 10px 0 0;border-radius: 15px;color:#CCC;border: 2px solid #CCC;box-sizing: border-box;font-weight: bold;cursor: pointer;}
#catalog #filters em {-webkit-user-select: none;-khtml-user-select: none;-moz-user-select: none;-ms-user-select: none;user-select: none;-webkit-tap-highlight-color: rgba(0,0,0,0);outline: none;}
#catalog #filters em:hover {background-color: #ECECEC;}
#catalog #filters em[data-inc]{padding: 3px 10px;border-radius: 10px;font-weight: normal;font-size: 12px;}
#catalog #filters em[data-inc].active{background-color: #4368a4;border-color: #3f6095;}
#catalog #filters em[data-inc].active:hover {background-color: #375b96;}

#catalog #filters em.active{background-color: #f37021;border-color:#b34c0f;color:#FFF;}
#catalog #filters em.active:hover {background-color: #bd5415;}

@media screen and (max-width: 767px) {
    html body #catalogcart{right: 10px;}
    html body #catalog_results .content > .thegroup {width: 100%;float: none;clear: both;margin: 0;}
    html body #catalog_results .content > .thegroup > .catrow.llast {margin-bottom: 25px;}
    html body #catalog_results .content > .thegroup:last-child {margin-bottom: 0;}
    html body #catalog #filters .colx {width: 100%;text-align: center;}
    html body #catalog #filters .colx.xright {text-align: center;margin: 15px 0 0 0;}
    html body #catalog #filters .colx > label {display: block;margin: -20px 0 10px 0;text-align: center;}
}

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