.document-side-menu > ul { font-size: 0.8em; }
.document-side-menu > ul > li a { color: #000; text-transform: uppercase; line-height:1.4em; }
.document-side-menu > ul > li > a { display: block; margin-bottom: 20px; }
.document-side-menu > ul > li > a[href="javascript:void(0)"], .document-side-menu > ul > li > a[href="#"] { cursor: default; pointer-events: none; display: none; }
.document-side-menu > ul > li > ul > li { display: block; margin-bottom: 15px; font-size: 1em; }
.document-side-menu > ul > li > ul > li.li-all-families > a:after { content: '\f101'; font-family: "Font Awesome 5 Free"; font-weight: 700; padding-left: 5px; }
.document-side-menu > ul > li > ul > li.li-all-families.active > a:before { display:none; }
.document-side-menu > ul > li > ul > li:last-child { margin-bottom: 0; }
.document-side-menu > ul > li > ul > li > a {position: relative;font-size: 0.9em;color: #000;padding: 10px 0 20px 0;font-weight: 500;text-transform: uppercase; transition: 0.2s linear; -webkit-transition: 0.2s linear; -moz-transition: 0.2s linear; -ms-transition: 0.2s linear; }
html:not(.touch) .document-side-menu > ul > li > ul > li > a:hover { color: #c2c2c2; transition: 0.2s linear; -webkit-transition: 0.2s linear; -moz-transition: 0.2s linear; -ms-transition: 0.2s linear; }
.document-side-menu > ul > li > ul > li.active > a:before { content: "\f105"; display: inline-block; font-weight: 900; font-family: "Font Awesome 5 Free"; padding-right: 5px; }
.document-side-menu > ul > li > ul > li > ul :not(:empty){padding-left:5px; padding-top:5px;}
.document-side-menu > ul > li > ul > li > ul > li > a {display:block; position: relative; font-size: 0.9em; color: #000; padding: 8px 0 0px 0; font-weight: 500; text-transform: uppercase; transition: 0.2s linear; -webkit-transition: 0.2s linear; -moz-transition: 0.2s linear; -ms-transition: 0.2s linear; }
html:not(.touch) .document-side-menu > ul > li > ul > li > ul > li > a:hover { color: #c2c2c2; transition: 0.2s linear; -webkit-transition: 0.2s linear; -moz-transition: 0.2s linear; -ms-transition: 0.2s linear; }
.document-side-menu > ul > li > ul > li > ul > li.active > a:before { content: "\f105"; display: inline-block; font-weight: 900; font-family: "Font Awesome 5 Free"; padding-right: 5px; }
header > div > div.mainmenu > ul > li > ul:after {--arrow-size: 10px; content: '';width: 0;height: 0;display: block;position: absolute;top: -10px;right: 70%; border-left: calc(var(--arrow-size) - 3px) solid transparent; border-right: calc(var(--arrow-size) - 3px) solid transparent; border-bottom: var(--arrow-size) solid rgba(255,255,255,0.3);transform: translateX(-50%); transition: 0.2s linear; -webkit-transition: 0.2s linear;}
header > div > div.mainmenu > ul > li:last-child > ul:after {right: unset; left: 70%; }
/* Products */
.document-side-menu.document-side-menu-products > ul > li > ul { max-height: 0; overflow: hidden; transition: max-height 0.2s linear; -webkit-transition: max-height 0.2s linear; -moz-transition: max-height 0.2s linear; -ms-transition: max-height 0.2s linear; }
.document-side-menu.document-side-menu-products > ul > li > ul > li:first-child { margin-top: 20px; }
.document-side-menu.document-side-menu-products > ul > li > a[href="javascript:void(0)"], .document-side-menu.document-side-menu-products > ul > li > a[href="#"] { cursor: pointer; pointer-events: visible; font-size: 1.5em; display: block; }
.document-side-menu.document-side-menu-products > ul > li > a { margin-bottom: 0px; }
.document-side-menu.document-side-menu-products > ul > li > ul > li > a { color: #000; }
.document-side-menu.document-side-menu-products > ul > li > a:before { content: "\f0c9"; color: #000; display: inline-block; font-weight: 900; font-family: "Font Awesome 5 Free"; padding-right: 8px; }
.document-side-menu.document-side-menu-products > ul > li.open > ul { display: block; max-height: 500px; transition: max-height 0.5s linear; -webkit-transition: max-height 0.5s linear; -moz-transition: max-height 0.5s linear; -ms-transition: max-height 0.5s linear; }
.document-side-menu.document-side-menu-products > ul > li.open > a:before { content: "\f00d"; }

html:has(.homepage-wrapper) body:is(.scrolled) header > div > div.mainmenu > ul > li > ul {background-color: #EE8005;}
html:has(.homepage-wrapper) body:is(.scrolled) header > div > div.mainmenu > ul > li > ul:after  {border-bottom: var(--arrow-size) solid #EE8005}


@supports (display: grid) {
    .content-column { display: grid; grid-template-columns: 13% auto; }
    .content-column.list-products-content-column { grid-template-columns: 18% auto; }
    .row-fluid.content-column:before, .row-fluid.content-column:after { display: none; }
    .row-fluid.content-column > div[class*="span"] { width: auto; float: none; margin: 0; height: auto; min-height: inherit; }
    .row-fluid.content-column > div[class*="span"]:first-child { padding-right: 30px; }

    @media (max-width:1600px) {
        .content-column.list-products-content-column { grid-template-columns: 20% auto; }
    }

    @media (min-width:1201px) and (max-width:1500px) {
        .content-column { grid-template-columns: 15% auto; }
        .content-column.list-products-content-column { grid-template-columns: 22% auto; }
    }

    @media (min-width:1024px) and (max-width:1200px) {
        .content-column { grid-template-columns: 20% auto; }
        .content-column.list-products-content-column { grid-template-columns: 28% auto; }
    }

    @media (max-width:1023px) {
        .row-fluid.content-column > div[class*="span"]:first-child { padding-right: 0px; }
        .content-column { display: block; }
        .document-side-menu { margin-bottom: 30px; }
        .document-side-menu > ul > li > ul { max-height: 0; overflow: hidden; transition: max-height 0.3s linear; -webkit-transition: max-height 0.3s linear; -moz-transition: max-height 0.3s linear; -ms-transition: max-height 0.3s linear; }
        .document-side-menu > ul > li > ul > li:first-child { margin-top: 20px; }
        .document-side-menu > ul > li > a[href="javascript:void(0)"], .document-side-menu > ul > li > a[href="#"] { cursor: pointer; pointer-events: visible; font-size: 1.5em; display: block; }
        .document-side-menu > ul > li > ul > li > a { margin-bottom: 5px; font-size: 1.2em; }
        .document-side-menu > ul > li > a { margin-bottom: 0px; }
        .document-side-menu > ul > li > ul > li > a { color: #000; }
        .document-side-menu > ul > li > a:before { content: "\f0c9"; color: #000; display: inline-block; font-weight: 900; font-family: "Font Awesome 5 Free"; padding-right: 8px; }
        .document-side-menu > ul > li.open > ul { display: block; max-height: 500px; transition: max-height 0.5s linear; -webkit-transition: max-height 0.5s linear; -moz-transition: max-height 0.5s linear; -ms-transition: max-height 0.5s linear; }
        .document-side-menu > ul > li.open > a:before { content: "\f00d"; }
    }
}