:root {
 --color-primary: hsl(273, 32%, 50%);
 --color-primary-dark: hsl(273, 32%, 40%);
 --color-primary-darker: hsl(273, 32%, 30%);
 --color-primary-light: hsl(273, 32%, 60%);
 --color-primary-lighter: hsl(273, 32%, 70%);
 --color-primary-bg: hsl(273, 32%, 35%, 0.2);

 --color-secondary: hsl(28, 100%, 50%);
 --color-secondary-dark: hsl(28, 100%, 40%);
 --color-secondary-darker: hsl(28, 100%, 30%);
 --color-secondary-light: hsl(28, 100%, 60%);
 --color-secondary-lighter: hsl(28, 100%, 70%);
 --color-secondary-bg: hsl(28, 100%, 35%, 0.2);

 --color-tertiary: hsl(110, 44%, 50%);
 --color-tertiary-dark: hsl(110, 44%, 40%);
 --color-tertiary-darker: hsl(110, 44%, 30%);
 --color-tertiary-light: hsl(110, 44%, 60%);
 --color-tertiary-lighter: hsl(110, 44%, 70%);
 --color-tertiary-bg: hsl(110, 44%, 35%, 0.2); }

HTML *  { max-height: 1000000px }
HTML    { font-size: 15px; line-height: 1.67; }
 @media (max-width: 480px) { HTML { font-size: 14px; line-height: 1.5; } }
 @media (max-width: 380px) { HTML { font-size: 13px; line-height: 1.4; } }
BODY    { margin: 0; background-color: #fff; color: #333; font-family: Arial, sans-serif; }
#root   { height: 100vh; overflow: auto; }
INPUT, TEXTAREA, SELECT { font-family: Verdana; resize: none; }
INPUT::placeholder { color: #bbb; font-size: 17px; }
INPUT[type=radio]  { vertical-align: middle }
A       { color: var(--color-primary-dark); text-decoration: underline; cursor: pointer; }
A:hover { color: var(--color-secondary-dark); text-decoration: none; }
P       { margin: 0em auto 1em auto }
IMG     { border: none } DFN { color: red } BIG { font-size: 115% } SMALL { font-size: 85% }
H1      { font-size: 23px; font-weight: normal; margin: 0; font-family: Roboto Condensed, Arial; }
H2      { font-size: 19px; font-weight: normal; margin: 0; font-family: Roboto Condensed, Arial; }
TABLE   { border-collapse: collapse; border-spacing: 0; }
.sky-table      { width: 100%; font: 12px Verdana; }
.sky-table TH   { border: 1px solid #ccc; padding: 10px 6px; background-color: #e2e2e2; font-weight: 500; }
.sky-table TR:nth-child(odd)  { background: #f5f5f5; }
.sky-table TR:nth-child(even) { background: #fbfbfb; }
.sky-table TD   { border: 1px solid #ccc; padding: 6px 6px; vertical-align : middle; text-align: left; }
.sky-signature { color: #999; font-weight: lighter; }
.sky-comment   { border-radius: 12px; background-color: #efefef; }
.sky-border    { border: 1px solid #B2CAD9 }
.sky-form      { font: 12px Verdana }
.sky-form INPUT, .sky-form TEXTAREA, .sky-form SELECT
	{ background-color: #efefef; border: 1px solid #7f9db9; margin: 5px 0px; padding: 2px; }
.sky-form IMG { margin-top: 8px }
.sky-form [type=submit]	      { height: 32px; padding: 0px 10px; }
.sky-form [type=submit]:hover { background-color: #ccc; cursor: pointer; }
.sky-form [type=checkbox] { border: 0px; background-color: #fff; }
.sky-form [type=radio]    { border: 0px; background-color: #fff; }
.sky-form [type=file]     { border: 0px; padding: 0px; }
.sky-form INPUT:focus, TEXTAREA:focus { background-color: #fcfcfc }
.sky-form SELECT { padding: 1px }


/* REDEFINE */

BODY { color: #555; font-family: Roboto, Arial, sans-serif; }

.sky-sections      { text-align: center; position: relative; top: -0.3em; font: 13px/2.8em; }
.sky-sections A    { color: var(--color-primary) } .sky-sections A:hover { color: black }
.sky-thumb-sid     { float: left; padding: 6px 20px 0px 0px; }
.sky-thumb-sid IMG { border-radius: 4px }
.sky-thumb-id      { border-radius: 4px }

.sky-ct-item       { border: 0px solid silver; padding: 0px; }
.sky-ct-item:hover { opacity: 0.6; filter: alpha(opacity=60); }
.sky-ct-cost       { color: var(--color-primary) }
.sky-ct-params     { color: var(--color-primary-dark) }
.sky-ct-brand      { background-color: #f7f7f7; padding: 8px; border-radius: 2px; }
.sky-ct-brandp     { background-color: #dddddd }
.sky-ct-group      { background-color: #f7f7f7; padding: 8px; border-radius: 3px; margin: 0 10px 8px 0; float: left; }
.sky-ct-buy        { background-color: var(--color-primary-dark); box-shadow: 0px 3px 3px 0px rgba(50, 50, 50, 0.30); color: #fff; }
.sky-ct-buy:hover  { background-color: var(--color-primary-darker); color: #fff; }
.sky-ct-buym       { background-color: var(--color-secondary); box-shadow: 0px 2px 2px 0px rgba(50, 50, 50, 0.10); color: #fff; height: 32px; padding: 6px; border-radius: 4px; font-size: 8pt; text-align: center; }
.sky-ct-buym:hover { background-color: var(--color-secondary-dark); color: #fff; }
.sky-ct-buyo       { background-color: var(--color-secondary); }
.sky-ct-buyo:hover { background-color: var(--color-secondary-dark); }
.sky-ct-tblist     { background-color: #efefef }

.sky-ct-cat        { background-color: var(--color-secondary); border-radius: 8px; color: white; padding: 6px; box-shadow: 0px 3px 3px 0px rgba(50, 50, 50, 0.30); }
.sky-ct-cat:hover  { background-color: var(--color-secondary-dark); o1pacity: 0.5 }

.sky-ct-modcolor   { margin: 3px; border-radius: 16px; border: 1px solid silver; }

.logo-ln   { width: 100%; background-color: #e0e0e0; }
.logo-ln2  { width: 100%; background-color: var(--color-primary); padding-top:13px; padding-bottom:13px; }
.menu-bx   { background-color: var(--color-primary) }
.menu-bx A { color: #fff; text-decoration: none; } .menu-bx A:hover { color: silver }
.path-td   { margin-top: 2em; margin-bottom: 1.6em; text-align: left; }
.main-td   { display: inline-block; padding: 0px 0px 0px 0px; width: 100%; text-align: justify; }
.last-td   { color: #555; text-align: left; background-color: #fafafa; padding: 30px 0px 30px 0px; line-height: 35px; }

#totop     { width: 100px; font: 12px/20px Verdana; text-align: center;
	     color: #333; background: #f7f7f7; border: 1px solid #ccc;
	     padding: 5px; position: fixed; bottom: 45px; right: 30px;
	     cursor: pointer; display: none; }

.flexbreak { flex-basis: 100%; height: 0; }

.f-carousel {
 --f-button-width: 38px;
 --f-button-height: 38px;
 --f-button-svg-width: 16px;
 --f-button-svg-height: 16px;
 --f-button-svg-stroke-width: 2.5;
 --f-button-color: rgb(71 85 105);
 --f-button-border-radius: 50%;
 --f-button-shadow: 0 6px 12px -2px rgb(50 50 93 / 25%), 0 3px 7px -3px rgb(0 0 0 / 30%);
 --f-button-bg: #fff;
 --f-button-hover-bg: #f9f9f9;
 --f-button-active-bg: #f0f0f0;
 --f-carousel-dots-width: 24px;
 --f-carousel-dots-height: 35px;
 --f-carousel-dot-width: 10px;
 --f-carousel-dot-height: 10px;
 --f-carousel-dot-radius: 50%; }

ul.list {
  padding: 0; margin: 0; list-style-type: none; }
ul.list li {
  border-bottom: 1px dotted #c2c2c2;
  position: relative; padding: 0; margin-bottom: 0; }
ul.list li span {
  background-color: #fff; margin: 0; }
ul.list li span.param, ul.list li span.value {
  bottom: -5px; }
ul.list span.param {
  position: relative; margin-right: 7em; padding-right: 2px; }
ul.list span.value {
  position: absolute; right: 0; padding-left: 2px; }


/* MOBILE */

.main-mobile   { padding:  0px 12px; text-align: left; }
.line-mobile   { padding: 20px 12px; text-align: left; background-color: #f0f0f0; }
.last-mobile   { padding: 20px 12px; text-align: left; background-color: #fafafa; line-height: 1.9em; }
.cost-mobile   { border-radius: 12px; background-color: #f7f7f7; }

.ct-bt-phone { border-radius: 8px; color: #fff; background-color: #44BB6E; box-shadow: 0px 3px 3px 0px rgba(50, 50, 50, 0.30); }
.ct-bt-phone:active { background-color: silver }
.ct-bt-expres { border-radius: 8px; color: #fff; background-color: var(--color-secondary); box-shadow: 0px 3px 3px 0px rgba(50, 50, 50, 0.30); }
.ct-bt-expres:active { background-color: silver }
.ct-bt-basket { border-radius: 8px; color: #fff; background-color: var(--color-primary); box-shadow: 0px 3px 3px 0px rgba(50, 50, 50, 0.30); }
.ct-bt-basket:active { background-color: silver }

.menu__mobile {
  width: 100%; height: 60px; position: fixed; z-index: 55; font-size: 15px;
  background-color: var(--color-primary); box-shadow: 0px 5px 5px 0px rgba(50, 50, 50, 0.20); }
#menu__toggle { opacity: 0; display: none; }
#menu__toggle:checked + .menu__btn > span { transform: rotate(45deg); }
#menu__toggle:checked + .menu__btn > span::before { top: 0; transform: rotate(0deg); }
#menu__toggle:checked + .menu__btn > span::after { top: 0; transform: rotate(90deg); }
#menu__toggle:checked ~ .menu__box { left: 0 !important; }
.menu__btn {
  position: fixed; cursor: pointer; z-index: 1;
  top: 30px; left: 20px; width: 26px; }
.menu__btn > span,
.menu__btn > span::before,
.menu__btn > span::after {
  display: block; position: absolute; transition-duration: .25s;
  width: 100%; height: 2px; background-color: white; }
.menu__btn > span::before { content: ''; top: -8px; }
.menu__btn > span::after { content: ''; top: 8px; }
.menu__box {
  overflow: auto; display: block; position: fixed; transition-duration: .25s;
  top: 0; left: -100%; width: 300px; height: 100%; margin: 0; padding: 80px 0;
  list-style: none; background-color: var(--color-primary-dark); box-shadow: 2px 2px 6px rgba(0, 0, 0, .4); }
.menu__item {
  display: block; padding: 6px 24px; color: #fff;
  font-weight: bold; text-decoration: none; transition-duration: .25s; }
.menu__item:hover { background-color: var(--color-primary-lighter) }

#bottom-bar {
  z-index: 54; width: 100%;
  border-top: 1px solid silver; height: 56px;
  background-color: var(--color-primary);
  font-size: 12px; position: fixed; bottom: 0; }
.bottom-bar-element {
  width: 25%; display: inline-block;
  float: left; text-align: center; height: 56px;
  padding-top: 8px; cursor: pointer; 
  transition: all 0.5s cubic-bezier(.25,.8,.25,1); }
.bottom-bar-element A {
  color: white; text-decoration: none; }
.bottom-bar-element IMG {
  filter: invert(1); vertical-align: middle; }
.bottom-bar-element:hover {
  color: white !important; }
#bottom-bar:hover .bottom-bar-element {
  color: var(--color-primary-light); transition: all 0.5s cubic-bezier(.25,.8,.25,1); }


.fas[data-count] {
    position:relative; }
.fas[data-count]:after {
    position: absolute;
    right: -1.1em;
    top: -1.5em;
    content: attr(data-count);
    padding: .4em;
    border-radius: 10em;
    line-height: .9em;
    color: white;
    background: crimson;
    text-align: center;
    min-width: 2em;
    font: bold 1em sans-serif; }

.pas { position: relative; display: inline-block;
       z-index: 0; top: -8px; left: -20px; pointer-events: none;
       width: 23px; height: 23px; border-radius: 64px; font-size: 11px;
       background-color: crimson; color: #fff; }

.dropbtn {
  color: white;
  padding: 16px;
  cursor: pointer;
  font-size: 16px; border: none;
  background-color: var(--color-secondary); border-radius: 8px; color: white; padding: 6px; box-shadow: 0px 3px 3px 0px rgba(50, 50, 50, 0.30); }

.dropdown {
  position: relative;
  display: inline-block; }

.dropdown-content {
  display: none;
  position: absolute;
  background-color: #f1f1f1;
  min-width: 300px;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  border-radius: 8px;
  z-index: 100; }

.dropdown-content a {
  display: block;
  color: var(--color-primary-dark);
  padding: 10px 8px;
  text-decoration: none;
  border-radius: 8px; }

.dropdown-content a:hover { background-color: #ddd }
.dropdown:hover .dropdown-content { display: block }
.dropdown:hover .dropbtn {
  background-color: var(--color-secondary-dark); border-radius: 8px; color: white; padding: 6px; box-shadow: 0px 3px 3px 0px rgba(50, 50, 50, 0.30); }