:focus, :active, :hover
  {outline: none}

 *, *::after, *::before
  {margin: 0;  padding: 0;  box-sizing: border-box;  box-shadow: none;  text-shadow: none}

 html, body
  {width: 100%;  min-height: 100vh;  font-family: 'sfd', sans-serif;  font-size: 16px;  letter-spacing: 0;  line-height: 1.32;  text-rendering: optimizeSpeed;  -webkit-font-smoothing: antialiased;  -webkit-text-size-adjust: 100%;  -moz-osx-font-smoothing: grayscale;  hyphens: auto;  color: var(--blackColor);  background-color: var(--whiteColor);  scroll-behavior: smooth}

 body
  {padding: 0 .425rem;}

 html, body, h1, h2, h3, h4, p
  {margin: 0}

 strong
  {font-weight: 600}

 p
  {color: rgba( var(--dr-gray), 1)}

 p, span, a
  {font-size: clamp(.82rem, 5vw, 1rem);  hyphens: auto;  hyphenate-limit-chars: 6 3 3;  hyphenate-limit-lines: 2;  hyphenate-limit-last: always;  hyphenate-limit-zone: 8%}

 span, a
  {color: var(--blackColor)}

 label
  {display: block;  font-size: clamp(.62rem, 5vw, .75rem);  color: rgba( var(--cr-gray), 1);  margin-bottom: .5rem;}

 ul
  {margin: 3rem 0;  padding-left: 0;  list-style: none}

 li
  {font-size: clamp(.82rem, 5vw, 1.1rem);  color: var(--darkBlue);  padding: 0 .85rem .5rem;  position: relative;  display: flex;  align-items: center}
  
 li::before
  {content: '•';  margin-right: .625rem}

 hr
  {box-sizing: content-box;  height: 0}

 h1, h2, h3, h4, h5, h6
  {line-height: 1.08;  letter-spacing: -0.02em  /*user-select:none;*/}

 h1
  {font-size: clamp(2.75rem, 6vw + 1rem, 4rem)}
/*
 h2
  {font-size: clamp(2rem, 5vw + 1rem, 3rem)}
*/
 h2
  {font-size: clamp(2rem, 4vw + 1rem, 2.3rem)}

 h3
  {font-size: clamp(1.75rem, 4vw + 1rem, 2.5rem)}

 h4
  {font-size: clamp(1.5rem, 3vw + 1rem, 2rem)}

 h5
  {font-size: clamp(1rem, .8vw, 2rem);  margin-bottom: .625rem}

 h6
  {font-size: clamp(1rem, 2vw + 1rem, 1.5rem)}

 header, footer, nav, article, main
  {display: block}

 button
  {padding: 0}

 button, input[type="button"], input[type="reset"], input[type="submit"]
  {-webkit-appearance: button;  cursor: pointer}

 button, input, select, textarea, optgroup
  {margin: 0;  padding: 0;  font-family: inherit;  font-size: 100%;  color: inherit;  line-height: 1.15;  /*  white-space:pre-wrap;  */  word-wrap: break-word;  word-break: break-word;  -webkit-appearance: none;  appearance: none;  border: none;  border-radius: 0;  box-shadow: none;  outline: none;  background-color: transparent;  cursor: pointer}

 button[disabled], input[disabled]
  {cursor: default}

 button, select
  {text-transform: none;  border: none;  border-radius: 0;  box-shadow: none;  outline: none;  background-color: transparent}

 select
  {width: 100%;  padding: 0 1rem 0 0;  line-height: inherit;  appearance: none;  cursor: inherit}

 img, picture
  {max-width: 100%;  display: block;  border-style: none}

 table
  {border-collapse: collapse;  border-spacing: 0}

 a, ::-moz-selection, ::selection
  {background-color: transparent;  text-shadow: none}

 a:active, a:hover, a:focus, button:active, button:focus
  {outline: none}

 a, a:visited
  {text-decoration: none;  color: var(--brightBlue);  cursor: pointer}

 a
  {text-decoration: none;  color: inherit;  background: none;  appearance: none;  outline: none !important;  -webkit-tap-highlight-color: transparent;  cursor: pointer}

 svg:not(:root)
  {overflow: hidden}

 button::-moz-focus-inner, input::-moz-focus-inner, [type="button"]::-moz-focus-inner, [type="reset"]::-moz-focus-inner, [type="submit"]::-moz-focus-inner
  {border: 0;  padding: 0}

 input
  {-moz-appearance: textfield}

 input[type="checkbox"], input[type="radio"]
  {box-sizing: border-box;  padding: 0}

input[type="checkbox"] {
  appearance: auto; /* Включает стандартный вид */
  -webkit-appearance: checkbox; /* Для совместимости с Webkit */
}

 input[type="search"]
  {-webkit-appearance: textfield;  box-sizing: content-box;  outline-offset: -.125rem}

 input[type="number"]::-webkit-inner-spin-button, input[type="number"]::-webkit-outer-spin-button
  {height: auto;  -webkit-appearance: none;   margin: 0}

 input[type="search"]::-webkit-search-cancel-button, input[type="search"]::-webkit-search-decoration
  {-webkit-appearance: none}

 input[type="text"]
  {font-family: inherit;  font-size: inherit;  line-height: inherit;  margin: 0}

 select::-ms-expand {display: none}
       ::-moz-focusring {color: transparent;  text-shadow: 0 0 0 var(--blackColor)}
       ::-webkit-file-upload-button {-webkit-appearance: button;  font: inherit}
        :active, :hover, :focus {outline: 0;  outline-offset: 0;  border: none}
		  :root {

      /* белый  fafafa f3f4f6,f4f4f5-светло серый*/
       --whiteColor: #fafafa;  --whiteColor-40: rgba(250, 250, 250, .4);

      /* тёмно синий */
       --darkBlue: #354a5f;

      /* ярко синий */
       --brightBlue: #3398db;



/*

color: rgba( var(--cr-white), 1);

/**********************************/

      /* тёмно зеленый #159441 */      /* тёмно серый #7d7d7d */      /* тёмно красый #e05643 */      /* тёмно синий #3236a8 */      /* тёмно черный #050506 */
       --dr-green: 21, 148, 65;         --dr-gray: 125, 125, 125;      --dr-red: 224, 86, 67;          --dr-blue: 50, 54, 168;        --dr-black: 5, 5, 6;

      /* зеленый цвет #1bc156 */       /* серый цвет #b1b1b1 */       /* красный цвет #f8604a */      /* синий цвет #4046ca */       /* черный цвет #1d1d1d */       /* голубой цвет #3398db */
       --cr-green: 27, 193, 86;         --cr-gray: 177, 177, 177;      --cr-red: 248, 96, 74;          --cr-blue: 64, 70, 202;        --cr-black: 29, 29, 29;        --cr-sky: 51, 152, 219;

      /* ярко зеленый #43e57d */       /* ярко серый #ececec */       /* ярко серый #fa8b7b */        /* ярко синий #5258e4 */       /* ярко черный #262626 */
       --br-green: 67, 229, 125;        --br-gray: 236, 236, 236;      --br-red: 250, 139, 123;        --br-blue: 82, 88, 228;        --br-black: 38, 38, 38;







      /* чисто белый #ffffff */
       --cr-white: 255, 255, 255;

       }




/****  Utility Classes */


.main-node
  {max-width: 1440px}

.inactive {
   /* pointer-events: none;
    opacity: 1;
    filter: grayscale(1);
    box-shadow: none !important;*/
    
       filter: grayscale(1); /* делаем его светлее и серым */
    box-shadow: none !important;
    transition: filter 0.3s ease;
}

.inactive::after {
    content: '';
    position: absolute;
    inset: 0;
    background: rgba(255, 255, 255, 0.8); /* белая полупрозрачная вуаль */
    pointer-events: none;
    z-index: 2;
}

.inactive .play-pause-wrapper {/**/
    display: none;
}

.flex
  {display: flex}

.flex-column
  {flex-direction: column}

.flex-row
  {flex-direction: row}

.justify-start
  {justify-content: flex-start}

.justify-center
  {justify-content: center}

.justify-end
  {justify-content: flex-end}

.justify-between
  {justify-content: space-between}

.justify-around
  {justify-content: space-around}

.align-start
  {align-items: flex-start}

.align-center
  {align-items: center}

.align-end
  {align-items: flex-end}

.align-stretch
  {align-items: stretch}

.align-baseline
  {align-items: baseline}

.flex-wrap
  {flex-wrap: wrap}

.w-100
  {width: 100%}

.h-100
  {height: 100%}

.fixed
  {position: fixed}

.top-0
  {top: 0}

.left-0
  {left: 0}

.text-center
  {text-align: center}

.margin-center
  {margin: 0 auto}

.grid
  {display: grid}

.min-height-100
  {min-height: 100vh}

.relative
  {position: relative}

.absolute
  {position: absolute}

.overflow-hidden
  {overflow: hidden}

.no-select
  {user-select: none}



   .hidden
     {display: none !important}



/*


*/