/* Font-family Onest*/

@font-face {
  font-family: "Onest";
  src: url("../fonts/Onest/OnestLight1602-hint.ttf") format("truetype");
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Onest";
  src: url("../fonts/Onest/OnestRegular1602-hint.ttf") format("truetype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Onest";
  src: url("../fonts/Onest/OnestMedium1602-hint.ttf") format("truetype");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Onest";
  src: url("../fonts/Onest/OnestSemiBold1602-hint.ttf") format("truetype");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}
  

/* Typography. Desktop */

html {
  font-family: "Onest", sans-serif;
}

/* Hero */

.hero-large {
  font-size: 96px;
  font-weight: 500;
  line-height: 90%;
}

/* Hero/L */
.hero-l {
  font-family: Onest;
  font-size: var(--Hero-Large, 84px);
  font-style: normal;
  font-weight: 500;
  line-height: 100%; /* 84px */
}

.hero-medium {
  font-size: 72px;
  font-weight: 400;
  line-height: 100%;
}

.hero-medium-500 {
  font-size: 72px;
  font-weight: 500;
  line-height: 100%;
}

/* Hero/M-500 */
.hero-medium-500-2 {
  font-family: Onest;
  font-size: 62px;
  font-style: normal;
  font-weight: 500;
  line-height: 110%;
}

/* Display */

.display-super-large {
  font-size: 64px;
  font-weight: 500;
  line-height: 110%;
}

/* Display/L */
.display-l {
  font-family: Onest;
  font-size: var(--Display-Large, 48px);
  font-style: normal;
  font-weight: 500;
  line-height: 100%;
}

.display-large {
  font-size: 42px;
  font-weight: 500;
  line-height: 100%;
}

.display-medium {
  font-size: 32px;
  font-weight: 500;
  line-height: 110%;
}

.display-medium-lh-34 {
  font-size: 32px;
  font-weight: 500;
  line-height: 34px;
}

/* Heading */

/* Heading/H1 */
.h1 {
  font-family: Onest;
  font-size: var(--Heading-H1, 42px);
  font-style: normal;
  font-weight: 500;
  line-height: 110%; /* 46.2px */
}

.h1-46 {
  font-family: Onest;
  font-size: var(--Heading-H1, 42px);
  font-style: normal;
  font-weight: 500;
  line-height: 46px; 
}

.h2 {
  font-size: 32px;
  font-weight: 500;
  line-height: 120%;
}

.h2-34 {
  font-size: 32px;
  font-weight: 500;
  line-height: 34px;
}

.h2-38 {
  font-size: 32px;
  font-weight: 500;
  line-height: 34px;
}

.h3 {
  font-size: 24px;
  font-weight: 500;
  line-height: 120%;
}

/* Heading/H4 */
.h4 {
  font-family: Onest;
  font-size: var(--Heading-H4, 20px);
  font-style: normal;
  font-weight: 500;
  line-height: 130%; /* 26px */
}

.h4-140 {
  font-family: Onest;
  font-size: var(--Heading-H4, 20px);
  font-style: normal;
  font-weight: 500;
  line-height: 140%; /* 28px */
}

/* Body */

.body-extra-large {
  font-size: 24px;
  font-weight: 400;
  line-height: 120%;
}

/* Body/Extra Large/Extra Large-500 */
.body-extra-large-500 {
  font-size: 24px;
  font-weight: 500;
  line-height: 120%;
}

.body-extra-large-130 {
  font-size: 24px;
  font-weight: 500;
  line-height: 130%;
}

.body-medium-large {
  font-size: 20px;
  font-style: normal;
  font-weight: 500;
  line-height: 120%;
}

/* Body/Large/Large-400 */
.body-large {
  font-size: 18px;
  font-weight: 400;
  line-height: 140%;
}

/* Body/Large/Large-300 */
.body-large-300 {
  font-size: 18px;
  font-weight: 300;
  line-height: 140%;
}

.body-large-110 {
  font-size: 18px;
  font-weight: 400;
  line-height: 110%;
}

.body-large-500 {
  font-size: 18px;
  font-weight: 500;
  line-height: 140%;
}

/* Body/Regular/Regular-300 */
.body-regular-300 {
  font-family: Onest;
  font-size: var(--Body-Regular, 16px);
  font-style: normal;
  font-weight: 300;
  line-height: 140%; /* 22.4px */
}

/* Body/Regular/Regular-400 */
.body-regular {
  font-family: Onest;
  font-size: var(--Body-Regular, 16px);
  font-style: normal;
  font-weight: 400;
  line-height: 140%; /* 22.4px */
}

.body-regular-lh-19 {
  font-family: Onest;
  font-size: var(--Body-Regular, 16px);
  font-style: normal;
  font-weight: 400;
  line-height: 19px;
}

.body-regular-lh-22 {
  font-family: Onest;
  font-size: var(--Body-Regular, 16px);
  font-style: normal;
  font-weight: 400;
  line-height: 22px;
}

.body-regular-110 {
  font-size: 16px;
  font-weight: 400;
  line-height: 110%;
}

.body-regular-150 {
  font-size: 16px;
  font-weight: 400;
  line-height: 150%;
}

.body-regular-sup {
  font-size: 16px;
  font-weight: 400;
  line-height: 140%;
  vertical-align: super;
}

/* Body/Regular/Regular-500 */
.body-regular-500 {
  font-family: Onest;
  font-size: var(--Body-Regular, 16px);
  font-style: normal;
  font-weight: 500;
  line-height: 140%; /* 22.4px */
}

.body-regular-500-lh-110 {
  font-size: 16px;
  font-weight: 500;
  line-height: 110%;
}

.body-regular-500-lh-22 {
  font-size: 16px;
  font-weight: 500;
  line-height: 22px;
}

.body-regular-sup-500 {
  font-size: 16px;
  font-weight: 500;
  line-height: 140%;
  vertical-align: super;
}

/* Body/Small/Small */
.body-small {
  font-family: Onest;
  font-size: var(--Body-Small, 14px);
  font-style: normal;
  font-weight: 400;
  line-height: 140%; /* 19.6px */
}

.body-small-lh-20 {
  font-family: Onest;
  font-size: var(--Body-Small, 14px);
  font-style: normal;
  font-weight: 400;
  line-height: 20px;
}

.body-small-lh-110 {
  font-size: 14px;
  font-weight: 400;
  line-height: 110%;
}

/* Body/Small/Small-500/Line Height-100 */
.body-small-500-lh-100 {
  font-family: Onest;
  font-size: var(--Body-Small, 14px);
  font-style: normal;
  font-weight: 500;
  line-height: 100%;
}

/* Body/Small/Small-500 */
.body-small-500 {
  font-family: Onest;
  font-size: var(--Body-Small, 14px);
  font-style: normal;
  font-weight: 500;
  line-height: 140%; /* 19.6px */
}

/* Body/Small/Small-500/ Line Height-150 */
.body-small-500-lh-150 {
  font-family: Onest;
  font-size: var(--Body-Small, 14px);
  font-style: normal;
  font-weight: 500;
  line-height: 150%; /* 21px */
}

/* Body/Small/Small-500/ Line Height-18 */
.body-small-500-lh-18 {
  font-family: Onest;
  font-size: var(--Body-Small, 14px);
  font-style: normal;
  font-weight: 500;
  line-height: 18px;
}

/* Body/Small/Small-500/ Line Height-20 */
.body-small-500-lh-20 {
  font-family: Onest;
  font-size: var(--Body-Small, 14px);
  font-style: normal;
  font-weight: 500;
  line-height: 20px;
}

/* Body/Small/Small-600 */
.body-small-600 {
  font-family: Onest;
  font-size: var(--Body-Small, 14px);
  font-style: normal;
  font-weight: 600;
  line-height: 140%;
}

/* Body/Small/Small-600/ Line Height-150 */
.body-small-600-lh-150 {
  font-family: Onest;
  font-size: var(--Body-Small, 14px);
  font-style: normal;
  font-weight: 600;
  line-height: 150%; /* 21px */
}

.body-small-600-lh-20 {
  font-size: 14px;
  font-weight: 600;
  line-height: 20px;
}

/* Secondary */

/* Secondary/caption/caption-500 */
.secondary-label {
  font-family: Onest;
  font-size: var(--Secondary-Medium, 12px);
  font-style: normal;
  font-weight: 500;
  line-height: 110%; /* 13.2px */
}

/* Secondary/caption/caption-500/ Line Geight-22 */
.secondary-label-lh-13 {
  font-family: Onest;
  font-size: var(--Secondary-Medium, 12px);
  font-style: normal;
  font-weight: 500;
  line-height: 13px; 
}

.secondary-label-400 {
  font-size: 12px;
  font-weight: 400;
  line-height: 110%;
}

.total-views.secondary-label-400 {
  line-height: 20px;
}

.secondary-label-400-lh-140 {
  font-size: 12px;
  font-weight: 400;
  line-height: 140%;
}

/* Secondary/caption/caption */
.secondary-caption {
  font-family: Onest;
  font-size: var(--Secondary-Medium, 12px);
  font-style: normal;
  font-weight: 400;
  line-height: 17px;
}

.secondary-caption-2 {
  font-family: Onest;
  font-size: var(--Secondary-Medium, 12px);
  font-style: normal;
  font-weight: 400;
  line-height: 16px;
}

/* Colors */

.color-default-white-1000 {
  color: var(--Default-white-1000, #FFF);
}

.color-default-white-400 {
  color: var(--Default-white-400, rgba(255, 255, 255, 0.40));
}

.color-additional-black-100 {
  color: var(--Additional-black-100, #191919);
}

.color-default-black-1000 {
  color: var(--Default-black-1000);
}

.color-default-black-800 {
  color: var(--Default-black-800, rgba(11, 11, 11, 0.80));
}

.color-default-black-400 {
  color: var(--Default-black-400, rgba(11, 11, 11, 0.4));
}

.color-default-black-600 {
  color: var(--Default-black-600, rgba(11, 11, 11, 0.60));
}

.color-default-black-200 {
  color: var(--Default-black-200, rgba(11, 11, 11, 0.20));
}

.color-second-text-40 {
  color: var(--color-second-text-40);
}

.color-second-text-100 {
  color: var(--color-second-text-100);
}

.color-accent-red {
  color: var(--Accent-red, #EA2311);
}

.color-accent-feedback {
  color: var(--Accent-feedback, #FFB700);
}

.color-prime-secondary {
  color: var(--Prime-secondary, #BADB4E);
}

.color-prime-for-text {
  color: var(--Prime-for-text, #A9BB22);
}

.color-second-primary {
  color: var(--Second-primary, #172CA2);
}

.color-tert-primary {
  color: var(--Tert-Primary, #0B7B66);
}

.text-gray {
  color: rgba(11, 11, 11, 0.4);
}

.t-gray-2 {
  color: #CECECE;
}

.color-gray-40 {
  color: var(--Gray-40, #F6F6F6);
}

.color-gray-400 {
  color: var(--Gray-400, #A3A3A3);
}

.color-gray-500 {
  color: var(--Gray-500, #8D8D8D);
}

.color-gray-600 {
  color: var(--Gray-600, #757575);
}

.color-gray-400-f {
  color: rgba(163, 163, 163, 0.81);
}
 
.t-gray-4 {
  color: #757575;
}

.t-gray-5,
.color-gray-800 {
  color: var(--Gray-800, #474747);
}

.t-gray-6 {
  color: #B3B3B3;
}

.t-white {
  color: #FFFFFF;
}

.t-f-white {
  color: rgba(255, 255, 255, 0.6);
}

.t-black {
  color: #0B0B0B;
}

.t-black-f-2-40 {
  color: rgba(11, 11, 11, 0.4);
}

.t-black-f-2-60 {
  color: rgba(11, 11, 11, 0.6);
}

/* Typography. Mobile */

@media (max-width: 1024px) {
  /* Heading/H1 */
  .h1 {
    font-size: 42px;
    font-weight: 500;
    line-height: 110%;
  }

  /* Hero/L */
  .hero-l {
    font-size: 48px;
    line-height: 110%;
  }

  /* Hero/M-500 */
  .hero-medium-500-2 {
    font-size: 48px;
  }

  /* Display/M */
  .display-medium {
    font-size: 32px;
    font-weight: 500;
    line-height: 26px;
  }

  /* Body/Large/Large-300 */
  .body-large-300 {
    font-size: 18px;
    font-weight: 300;
    line-height: 140%;
  }
}

@media (max-width: 480px) {
  /* Heading/H1 */
  .h1 {
    font-size: 32px;
    font-weight: 500;
    line-height: 110%;
  }

  /* Heading/H2 */
  .h2 {
    font-size: 28px;
  }

  /* Heading/H3 */
  .h3 {
    font-size: 20px;
  }

  /* Heading/H4 */
  .h4 {
    font-size: 20px;
  }

  /* Hero/L */
  .hero-l {
    font-size: 28px;
    line-height: 110%;
  }

  /* Hero/M-500 */
  .hero-medium-500-2 {
    font-size: 28px;
  }

  /* Display/L */
  .display-l {
    font-size: 28px;
  }

  /* Display/M */
  .display-medium {
    font-size: 24px;
    font-weight: 500;
    line-height: 26px;
  }


  /* Body/Extra Large/Extra Large-500 */
  .body-extra-large-500 {
    font-size: 20px;
    font-weight: 500;
    line-height: 120%;
  }

  /* Body/Large/Large-300 */
  .body-large-300 {
    font-size: 16px;
    font-weight: 300;
    line-height: 140%;
  }

  /* Body/Large/Large-500 */
  .body-large-500 {
    font-size: 16px;
  }
}