:root {
    --color-primary: #222;
    --color-primary-rgb: 34, 34, 34;
    --color-link: #222;
    --color-white: #fff;
    --color-white-rgb: 255, 255, 255;
    --color-orange: #FA5D29;
    --color-errors: #FA5D29;
    --color-featured: #f8f0ee;
    --color-underlined: var(--color-primary-rgb);
    --color-connect: #FF602C;
    --color-connect-2: #FFAE94;
    --color-connect-3: #FFC5B1;
    --color-inspire: #AAEEC4;
    --color-inspire-2: #C8E4D3;
    --color-inspire-3: #E2F4E9;
    --color-awards: #502bd8;
    --color-awards-2: #6749d1;
    --color-awards-3: #917eda;
    --color-read: #c0ab3c;
    --color-read-2: #CDC38B;
    --color-read-3: #DBD6C0;
    --color-learn: #FFF083;
    --color-learn-2: #FFF9D0;
    --color-learn-3: #fffbe2;
    --color-jobs: #74bcff;
    --color-jobs-2: #99ccfc;
    --color-jobs-3: #b4d7f8;
    --text-size-small: 12px;
    --text-size-primary: 16px;
    --text-size-medium: 18px;
    --text-size-large: 24px;
    --border-gray: #e9e9e9;
    --bg-primary: #F8F8F8;
    --bg-primary-rgb: 248, 248, 248;
    --bg-secondary: #222;
    --bg-3rd: #e9e9e9;
    --bg-white: white;
    --header-height: 71px;
    --gutter: 20px;
    --pad-inner: 52px;
    --color-odd-rows: #f3f3f3;
    --avatar-bg: var(--bg-primary);
    --rounded-small: 4px;
    --rounded-normal: 8px;
    --rounded-large: 1rem;
    --img-resizing-site: 16/12;
    --img-resizing-paronamic: 2/1;
    --img-resizing-desktop: 19/10
  }
  
  :root {
    --sf-height: 48px;
    --sf-bg: var(--bg-3rd);
    --hf-bg: var(--bg-primary)
  }
  
  :root {
    --height-input: 48px;
    --pad-input: 16px;
    --bg-input: #fff;
    --border-input: #e9e9e9
  }
  
  :root {
    --button-rounded: 8px;
    --button-rounded-full: 72px;
    --button-height: 48px;
    --button-pad: 24px;
    --button-bg: var(--color-primary);
    --button-color: var(--color-white);
    --button-color-border: var(--bg-primary)
  }
  
  @-webkit-keyframes btRotate {
    0% {
      transform: rotate(0)
    }
  
    100% {
      transform: rotate(360deg)
    }
  }
  
  @keyframes btRotate {
    0% {
      transform: rotate(0)
    }
  
    100% {
      transform: rotate(360deg)
    }
  }
  
  @-webkit-keyframes loadingSpinner {
    100% {
      transform: rotate(360deg)
    }
  }
  
  @keyframes loadingSpinner {
    100% {
      transform: rotate(360deg)
    }
  }
  
  .wrapper {
    display: flex;
    flex-direction: column;
    min-height: 100vh
  }
  
  .inner {
    width: 100%;
    max-width: 1920px;
    margin: 0 auto;
    /* padding: 0 var(--pad-inner); */
    position: relative;
    display: flex;
    justify-content: center
  }
  
  #content {
    flex: 1
  }
  
  .item-link {
    position: absolute;
    top: 0;
    left: 0;
    display: block;
    width: 100%;
    height: 100%;
    z-index: 1
  }
  
  @-webkit-keyframes progress {
    0% {
      stroke-dasharray: 0 100
    }
  }
  
  @keyframes progress {
    0% {
      stroke-dasharray: 0 100
    }
  }
  
  .menu-float {
    --menu-color-3: #fff;
    position: fixed;
    left: 0;
    width: 100%;
    font-size: 16px;
    transition: all .3s ease-in-out;
    z-index: 10;
    pointer-events: none;
    opacity: 1;
    bottom: 2%;
  }

  
  .menu-float__inner {
    position: relative;
    display: flex;
    justify-content: center;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border-radius: 12px;
  }
  
  .menu-float__wrapper {
    position: relative;
    display: flex;
    flex-direction: column;
    min-width: 0;
    max-width: -webkit-fit-content;
    max-width: -moz-fit-content;
    max-width: fit-content;
    padding: 6px;
    border-radius: 12px;
    pointer-events: auto;
    transition: all .4s;
    box-shadow: rgba(0, 0, 0, .25) 0 54px 55px, rgba(0, 0, 0, .12) 0 -12px 30px, rgba(0, 0, 0, .12) 0 4px 6px, rgba(0, 0, 0, .17) 0 12px 13px, rgba(0, 0, 0, .09) 0 -3px 5px;
  }
  
  .menu-float__title {
    margin-left: -2px;
    color: var(--menu-color-1)
  }
  
  .menu-float__layout--secondary {
    flex: 1
  }
  
  .menu-float__layout--secondary .menu-float__content {
    position: relative;
    width: 100%;
    color: #fff;
  
  }
  
  .menu-float__layout--secondary .menu-float__item {
    justify-content: center;
    width: 100%;
    color: #fff;
    white-space: nowrap;
    background: rgba(0, 0, 0, .3);
    box-shadow: rgba(0, 0, 0, .15) 1.95px 1.95px 2.6px;
    font-family: "textFont";
    transition: all 0.2s ease-in-out;
    text-decoration: none;
  }
  
  .menu-float__layout--secondary .menu-float__item:hover {
    background: rgba(0, 0, 0, .7);
  }
  
  .menu-float__menu {
    display: none;
    width: 100%;
    display: none;
    margin-bottom: 6px;
    padding: 30px;
    background: #2c2c2c;
    color: #fff;
    border-radius: var(--rounded-normal);
    z-index: -1;
    transition: all .4s
  }
  
  .menu-float__menu-content {
    max-width: 0;
    opacity: 0;
    transition: all .4s, max-width 0s;
    overflow: hidden
  }
  
  .menu-float__menu-content.is-show {
    opacity: 1
  }
  
  .menu-float__menu-nav {
    line-height: 120%
  }
  
  .menu-float__menu-nav li {
    margin-bottom: 16px
  }
  
  .menu-float__menu-nav a {
    display: block;
    padding: 8px 0 8px 16px;
    border-left: 1px solid transparent;
    transition: all .3s
  }
  
  .menu-float__menu-nav a:hover {
    color: var(--menu-color-1, --color-white);
    border-color: var(--menu-color-1, --color-white)
  }
  
  .menu-float__menu a {
    color: #fff
  }
  
  .menu-float__content {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 50px;
    text-align: center;
    border-radius: var(--rounded-normal);
    overflow: hidden;
  }
  
  .menu-float__progress {
    position: absolute;
    top: 0;
    left: 0;
    display: flex;
    width: 100%;
    height: 100%
  }
  
  .menu-float__bar {
    background-color: rgba(78, 78, 78, .5);
    width: 0;
    height: 100%
  }
  
  .menu-float__nav {
    position: relative;
    display: flex;
    gap: 6px;
  }
  
  .menu-float__nav li {
    display: flex;
  }
  
  .menu-float__item {
    display: inline-flex;
    align-items: center;
    height: 48px;
    padding: 0 12px;
    border-radius: var(--rounded-normal);
    color: var(--color-primary);
    font-weight: 400;
    overflow: hidden;
    transition: max-width .3s, padding .3s, margin .3s, color .3s, background .3s, border-radius .3s, opacity .3s
  }

  
  .menu-float__item:hover {
    opacity: .8
  }
  
  .style-1 {
    --menu-color-1: var(--color-inspire);
    --menu-color-2: var(--color-inspire-2);
    --menu-color-3: var(--color-inspire-3)
  }
  
  .style-2 {
    --menu-color-1: var(--color-learn);
    --menu-color-2: var(--color-learn-2);
    --menu-color-3: var(--color-learn-3)
  }
  
  .style-3 {
    --menu-color-1: var(--color-connect);
    --menu-color-2: var(--color-connect-2);
    --menu-color-3: var(--color-connect-3)
  }
  
  .style-4 {
    --menu-color-1: var(--color-read);
    --menu-color-2: var(--color-read-2);
    --menu-color-3: var(--color-read-3)
  }
  
  .style-5 {
    --menu-color-1: var(--color-awards);
    --menu-color-2: var(--color-awards-2);
    --menu-color-3: var(--color-awards-3)
  }
  
  .style-6 {
    --menu-color-1: var(--color-jobs);
    --menu-color-2: var(--color-jobs-2);
    --menu-color-3: var(--color-jobs-3)
  }
  
  @media (max-width:576px) {
    .menu-float.is-visible {
      bottom: 30px
    }
  
    .menu-float__wrapper {
      min-width: 0 !important
    }
  
    .menu-float__menu {
      padding: 20px
    }
  
    .menu-float__menu-nav li {
      margin-bottom: 0
    }
  
    /* .menu-float .inner {
        padding: 0 8px
    } */
  }
  
  @media (max-width:1280px) {
    :root {
      --pad-inner: 40px
    }
  }
  
  @media (max-width:1023px) {
    :root {
      --pad-inner: 24px
    }
  
    [class*=grid-] {
      --minthumb: 320px
    }
  }
  
  @media (max-width:576px) {
    :root {
      --pad-inner: 16px
    }
  
    .wrapper {
      overflow-x: hidden
    }
  }
  
  .activeTab {
    filter: invert(1);
  }