@keyframes expandWidth { from { width: 0%; } to { width: 100%; } }  :root {  --shprokat-mobil-background: rgba(255,255,255,1);  --shprokat-mobile-gap: 10px;   --shprokat-bar-background: rgba(255,255,255,0); --shprokat-bar-background-hover: rgba(18, 76, 115, .75); --shprokat-bar-position: end;  --shprokat-bar-text-color: rgba(18, 76, 115, .75); --shprokat-bar-text-color-hover: rgba(255,255,255,1); --shprokat-bar-fontsize: 20px;  --shprokat-bar-padding: 0px 0px 0px 0px;  --shprokat-bar-width: 2px 2px 2px 2px;  --shprokat-bar-radius: 50% 50% 50% 50%;  --shprokat-bar-style: solid solid solid solid;  --shprokat-bar-color-top: rgba(18, 76, 115, .75); --shprokat-bar-color-right: rgba(18, 76, 115, .75); --shprokat-bar-color-bottom: rgba(18, 76, 115, .75); --shprokat-bar-color-left: rgba(18, 76, 115, .75);  --shprokat-position: center;  --shprokat-sub-height: 40px; --shprokat-sub-fontsize: 20px;  --shprokat-sub-background-color: rgba(18, 76, 115, 0); --shprokat-sub-background-color-hover: rgba(18, 76, 115, 1); --shprokat-sub-text-color: rgba(0,0,0,.8); --shprokat-sub-text-color-hover: rgba(255,255,255,.9); --shprokat-sub-weight: 400;  --shprokat-sub-padding: 0px 10px 0px 10px;  --shprokat-sub-margin: 0px 10px 0px 0px;  --shprokat-sub-border-width: 2px 0px 2px 0px;  --shprokat-sub-border-radius: 0px 0px 0px 0px;  --shprokat-sub-border-style: solid solid solid solid;  --shprokat-sub-border-color-top: rgba(18, 76, 115, .75); --shprokat-sub-border-color-right: rgba(18, 76, 115, .75); --shprokat-sub-border-color-bottom: rgba(18, 76, 115, .75); --shprokat-sub-border-color-left: rgba(18, 76, 115, .75);  --shprokat-background-color: rgba(255,255,255,1); --shprokat-fontsize: 16px;  --shprokat-background-color-hover: rgba(18, 76, 115, 1); --shprokat-text-color: rgba(255,255,255,.9); --shprokat-text-color-hover: rgba(255,255,255,.9); --shprokat-padding: 20px 20px 20px 20px;  --shprokat-margin: 0px 0px 0px 0px;  --shprokat-border-width: 0px 2px 2px 2px;  --shprokat-border-radius: 0px 0px 10px 10px;  --shprokat-border-style: solid solid solid solid;  --shprokat-border-color-top: rgba(18, 76, 115, .75); --shprokat-border-color-right: rgba(18, 76, 115, .75); --shprokat-border-color-bottom: rgba(18, 76, 115, .75); --shprokat-border-color-left: rgba(18, 76, 115, .75);  --shprokat-sub-links-height: 30px; --shprokat-sub-links-background-color: rgba(18, 76, 115, 0); --shprokat-sub-links-background-color-hover: rgba(18, 76, 115, .1); --shprokat-sub-links-text-color: rgba(0, 0, 0, .7); --shprokat-sub-links-text-color-hover: rgba(0, 0, 0, 1); --shprokat-sub-links-padding: 0px 10px 0px 10px;  --shprokat-sub-links-border-width: 0px 0px 0px 0px;  --shprokat-sub-links-border-radius: 0px 0px 0px 0px;  --shprokat-sub-links-border-style: solid solid solid solid;  --shprokat-sub-links-border-color-top: rgba(18, 76, 115, .75); --shprokat-sub-links-border-color-right: rgba(18, 76, 115, .75); --shprokat-sub-links-border-color-bottom: rgba(18, 76, 115, .75); --shprokat-sub-links-border-color-left: rgba(18, 76, 115, .75);  --shprokat-sub-kat-height: 30px; --shprokat-sub-kat-background-color: rgba(18, 75, 115, 0); --shprokat-sub-kat-background-color-hover: rgba(18, 75, 115, 1); --shprokat-sub-kat-text-color: rgba(0,0,0, 1); --shprokat-sub-kat-text-color-hover: rgba(255, 255, 255, 1); --shprokat-sub-kat-padding: 0px 10px 0px 10px;  --shprokat-sub-kat-border-width: 2px 0px 0px 0px;  --shprokat-sub-kat-border-radius: 0px 0px 0px 0px;  --shprokat-sub-kat-border-style: solid dashed dotted double;  --shprokat-sub-kat-border-color-top: rgba(18, 76, 115, .75); --shprokat-sub-kat-border-color-right: rgba(18, 76, 115, .75); --shprokat-sub-kat-border-color-bottom: rgba(18, 76, 115, .75); --shprokat-sub-kat-border-color-left: rgba(18, 76, 115, .75);  --shprokat-nc-transition: all 250ms ease; }  @keyframes flycontainer { from { top: 200%; opacity: 0; } to { top: 100%; opacity: 1; } } .no-scroll { overflow: hidden !important; height: 100vh !important; } .shpro-kat-menu { position: relative; width: 100%; height: 100%; display: flex; align-items: center; justify-content: var(--shprokat-position); } .shpro-kat-menu:has(> .shprokat.bar.activ) {  display: flex; align-items: center; justify-content: var(--shprokat-bar-position); } .shprokat.bar { display: none; flex-direction: row; position: absolute; align-items: center; justify-content: center; margin: 0; font-size: var(--shprokat-bar-fontsize); padding: var(--shprokat-bar-padding); color: var(--shprokat-bar-text-color); background-color: var(--shprokat-bar-background); border-radius: var(--shprokat-bar-radius); border-width: var(--shprokat-bar-width); border-style: var(--shprokat-bar-style); border-color: var(--shprokat-bar-color-top) var(--shprokat-bar-color-right) var(--shprokat-bar-color-bottom) var(--shprokat-bar-color-left); height: var(--shprokat-sub-height); width: var(--shprokat-sub-height); } .shprokat.bar:hover { color: var(--shprokat-bar-text-color-hover); background-color: var(--shprokat-bar-background-hover); } .shprokat.bar .icon { margin-right: 0px; display: flex; align-items: center; justify-content: center; } .shprokat.bar .icon::after { position: absolute; font-family: "Font Awesome 6 Free";  font-weight: 900;  content: "\f00d"; transform: rotate(0deg); transition: transform 0.3s ease-in-out; margin: auto; opacity: 0; } .shprokat.bar .icon::before { position: absolute; font-family: "Font Awesome 6 Free";  font-weight: 900;  content: "\f0c9"; transform: rotate(0deg); transition: transform 0.3s ease-in-out; margin: auto; opacity: 1; } .shprokat.bar.activ { display: flex; } .shprokat.bar .icon.activ::after { transform: rotate(90deg); opacity: 1; } .shprokat.bar .icon.activ::before { transform: rotate(90deg); opacity: 0; } .shprokat.first { display: flex; flex-direction: row; padding: 0; list-style: none; position: absolute; width: auto; visibility: visible; font-size: var(--shprokat-sub-fontsize); } .shprokat.first.no { visibility: hidden; } .shprokat.first.great { position: fixed; visibility: visible; top: 0px; left: 0; right: 0; width: 100vw; height: 100dvh; height: 100vh; background: var(--shprokat-mobil-background); flex-direction: column; padding: 10px; padding-top: 100px; z-index: -1; overflow-y: auto; gap: var(--shprokat-mobile-gap); } .shprokat.first.great::before { content: ''; position: fixed; top: 0px; left: 0; width: 100%; height: 100px; z-index: 2000; background-color: var(--shprokat-mobil-background); }  .shprokat.first > li { flex: 0; text-align: start; position: relative;  display: flex;  margin: var(--shprokat-sub-margin); padding: 0; list-style: none; white-space: nowrap; } .shprokat.first > li.great { flex-direction: column; margin-right: 0px;  }  .shprokat .under-menu-container { display: none; position: absolute; top: 100%; opacity: 1; left: 0; width: auto; max-height: calc(100dvh - 100px); max-height: calc(100vh - 100px); cursor: pointer; padding: var(--shprokat-padding); color: var(--shprokat-text-color); font-size: var(--shprokat-fontsize); background-color: var(--shprokat-background-color); border-radius: var(--shprokat-border-radius); border-width: var(--shprokat-border-width); border-style: var(--shprokat-border-style); border-color: var(--shprokat-border-color-top) var(--shprokat-border-color-right) var(--shprokat-border-color-bottom) var(--shprokat-border-color-left); z-index: 1000; animation: flycontainer 0.25s ease forwards; overflow-y: auto; } .shprokat .under-menu-container.great { position: relative; top: 0; width: 100%; border: none; opacity: 1; animation: none; }  .shprokat .submenu-content { display: flex; flex-direction: column; align-items: flex-start; list-style: none; padding: 0; margin: 0; }  .shprokat .submenu-content li { list-style: none; width: 100%; } .shprokat .submenu-content .submenu-content li { list-style: none; width: 100%; padding-left: 20px; } .shprokat .submenu-content li:last-child { border-bottom: none; }  .shprokat.first > li a { display: flex; cursor: pointer; font-weight: var(--shprokat-sub-weight); padding: var(--shprokat-sub-padding); height: var(--shprokat-sub-height); width: 100%; align-items: center; justify-content: start; background: var(--shprokat-sub-background-color); color: var(--shprokat-sub-text-color); border-radius: var(--shprokat-sub-border-radius); border-width: var(--shprokat-sub-border-width); border-style: var(--shprokat-sub-border-style); border-color: var(--shprokat-sub-border-color-top) var(--shprokat-sub-border-color-right) var(--shprokat-sub-border-color-bottom) var(--shprokat-sub-border-color-left); } .shprokat.first > li a:hover { background: var(--shprokat-sub-background-color-hover); color: var(--shprokat-sub-text-color-hover) }  .shprokat .submenu-content li a { display: flex; cursor: pointer; font-weight: normal; padding: var(--shprokat-sub-links-padding); height: var(--shprokat-sub-links-height); width: 100%; align-items: center; justify-content: start; background: var(--shprokat-sub-links-background-color); color: var(--shprokat-sub-links-text-color); border-radius: var(--shprokat-sub-links-border-radius); border-width: var(--shprokat-sub-links-border-width); border-style: var(--shprokat-sub-links-border-style); border-color: var(--shprokat-sub-links-border-color-top) var(--shprokat-sub-links-border-color-right) var(--shprokat-sub-links-border-color-bottom) var(--shprokat-sub-links-border-color-left); } .shprokat.first .submenu-content li a:hover { background: var(--shprokat-sub-links-background-color-hover); color: var(--shprokat-sub-links-text-color-hover) }  .shprokat .category-toggle { display: flex; cursor: pointer; font-weight: var(--shprokat-sub-weight); padding: var(--shprokat-sub-padding); height: var(--shprokat-sub-height); width: 100%; align-items: center; justify-content: start; background: var(--shprokat-sub-background-color); color: var(--shprokat-sub-text-color); border-radius: var(--shprokat-sub-border-radius); border-width: var(--shprokat-sub-border-width); border-style: var(--shprokat-sub-border-style); border-color: var(--shprokat-sub-border-color-top) var(--shprokat-sub-border-color-right) var(--shprokat-sub-border-color-bottom) var(--shprokat-sub-border-color-left); } .shprokat .category-toggle.action { background: var(--shprokat-sub-background-color-hover); color: var(--shprokat-sub-text-color-hover); } .shprokat .category-toggle.sub { padding: var(--shprokat-sub-kat-padding); height: var(--shprokat-sub-kat-height); background: var(--shprokat-sub-kat-background-color); color: var(--shprokat-sub-kat-text-color); border-radius: var(--shprokat-sub-kat-border-radius); border-width: var(--shprokat-sub-kat-border-width); border-style: var(--shprokat-sub-kat-border-style); border-color: var(--shprokat-sub-kat-border-color-top) var(--shprokat-sub-kat-border-color-right) var(--shprokat-sub-kat-border-color-bottom) var(--shprokat-sub-kat-border-color-left); } .shprokat .category-toggle::before { font-family: "Font Awesome 6 Free";  font-weight: 900;  content: "\f0d7"; margin-right: 5px; display: flex; align-items: center; height: 100%; font-size: 110%; transform: rotate(0deg) translatey(-2px); transition: transform 0.3s ease-in-out; } .shprokat .category-toggle.action::before { transform: rotate(180deg); } .shprokat .category-toggle:hover { background: var(--shprokat-sub-background-color-hover); color: var(--shprokat-sub-text-color-hover) } .shprokat .category-toggle.sub:hover { background: var(--shprokat-sub-kat-background-color-hover); color: var(--shprokat-sub-kat-text-color-hover) }