@font-face {
  font-family: 'CodecWarm-Regular';
  src: url('/assets/fonts/codecwarm-light.eot');
  src: local('Codec Warm Light'), local('CodecWarm-Light'),
    url('/assets/fonts/codecwarm-light.woff2') format('woff2'),
    url('/assets/fonts/codecwarm-light.woff') format('woff'),
    url('/assets/fonts/codecwarm-light.eot?#iefix') format('embedded-opentype'),
    url('/assets/fonts/CodecWarm-Light.ttf') format('truetype');
  font-weight: 300;
  font-style: normal;
  font-display: swap;
  descent-override: 4%;
}
@font-face {
  font-family: 'CodecWarm-Bold';
  src: url('/assets/fonts/codecwarm-regular.eot');
  src: local('Codec Warm Regular'), local('CodecWarm-Regular'),
    url('/assets/fonts/codecwarm-regular.woff2') format('woff2'),
    url('/assets/fonts/codecwarm-regular.woff') format('woff'),
    url('/assets/fonts/codecwarm-regular.eot?#iefix') format('embedded-opentype'),
    url('/assets/fonts/CodecWarm-Regular.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
  descent-override: 6%;
}
@font-face {
  font-family: 'CodecWarm-ExtraBold';
  src: url('/assets/fonts/codecwarm-bold.eot');
  src: local('Codec Warm Bold'), local('CodecWarm-Bold'),
    url('/assets/fonts/codecwarm-bold.woff2') format('woff2'),
    url('/assets/fonts/codecwarm-bold.woff') format('woff'),
    url('/assets/fonts/codecwarm-bold.eot?#iefix') format('embedded-opentype'),
    url('/assets/fonts/CodecWarm-Bold.ttf') format('truetype');
  font-weight: bold;
  font-style: normal;
  font-display: swap;
  descent-override: 6%;
}

:root { 
  --black: #000000;
  --black-2: #00000033;
  --black-3: #000000d9;
  --dark-grey: #303030;
  --grey: #777777;
  --hidden: transparent;
  --light-grey: #d5cccc;
  --off-black: #151515;
  --red: #e1021e;
  --oro: #F4911B;
  --giallo: #fefe04;
  --blue: #0269E1;
  --white: #ffffff;
  --white-2: #ffffffe6;
  --orange: #fa9c05;
  --green: #40fa02;
  --darkgreen: #0b7a0b;
  --diamond: #7b70dd;
 
  --font-size-xxs: 10px;
  --font-size-xs: 14px;
  --font-size-s: 15px;
  --font-size-m: 16px;
  --font-size-l: 17px;
  --font-size-xl: 18px;
  --font-size-xxl: 20px;
  --font-size-25px: 25px;
  --font-size-28px: 28px;
  --font-size-36px: 36px;
  --font-size-55px: 55px;
  
  --line-height-xxs: 12px;
  --line-height-xs: 16px;
  --line-height-s: 17px;
  --line-height-m: 18px;
  --line-height-l: 19px;
  --line-height-xl: 20px;
  --line-height-xxl: 22px;
  --line-height-25px: 27px;
  --line-height-28px: 30px;
  --line-height-36px: 38px;
  --line-height-55px: 57px;
 
  --font-family-codecwarm-codecwarm-extrabold: "CodecWarm-ExtraBold", Helvetica;
  --font-family-codecwarm-codecwarm-bold: "CodecWarm-Bold", Helvetica;
  --font-family-codecwarm-codecwarm-regular: "CodecWarm-Regular", Helvetica;
}
.h1 {
  font-family: var(--font-family-codecwarm-codecwarm-extrabold);
  font-size: var(--font-size-55px);
  font-style: normal;
  font-weight: 800;
  letter-spacing: 0;
}

.h2 {
  font-family: var(--font-family-codecwarm-codecwarm-bold);
  font-size: var(--font-size-xxl) !important; /*era 36*/
  font-style: normal;
  font-weight: 700;
  letter-spacing: 0;
}

.h3 {
  font-family: var(--font-family-codecwarm-codecwarm-bold);
  font-size: var(--font-size-28px);
  font-style: normal;
  font-weight: 700;
  letter-spacing: 0;
}

.h4 {
  font-family: var(--font-family-codecwarm-codecwarm-bold);
  font-size: var(--font-size-xxl);
  line-height: 23px;
  font-style: normal;
  font-weight: 700;
  letter-spacing: 0;
}

.h5 {
  font-family: var(--font-family-codecwarm-codecwarm-bold);
  font-size: var(--font-size-s);
  line-height: 20px;
  font-style: normal;
  font-weight: 700;
  letter-spacing: 0;
}

.p {
  font-family: var(--font-family-codecwarm-codecwarm-regular);
  font-size: var(--font-size-m);
  font-style: normal;
  font-weight: 400;
  letter-spacing: 0;
  line-height: 24px;
}

.small {
  font-family: var(--font-family-codecwarm-codecwarm-regular);
  font-size: var(--font-size-xs);
  line-height: var(--line-height-xs);
  font-style: normal;
  font-weight: 400;
  letter-spacing: 0;
}

.button {
  font-family: var(--font-family-codecwarm-codecwarm-extrabold);
  font-size: var(--font-size-xl);
  line-height: var(--line-height-xl);
  font-style: normal;
  font-weight: 800;
  letter-spacing: 0;
}

.medium {
  font-family: var(--font-family-codecwarm-codecwarm-extrabold);
  font-size: var(--font-size-m);
  line-height: var(--line-height-m);
  font-style: normal;
  font-weight: 400;
  letter-spacing: 0;
}

.input {
  font-family: var(--font-family-codecwarm-codecwarm-regular);
  font-size: var(--font-size-xxl);
  line-height: var(--line-height-xxl);
  font-style: normal;
  font-weight: 400;
  letter-spacing: 0;
}

.codecwarm-bold-white-20px {
  color: var(--white);
  font-family: var(--font-family-codecwarm-codecwarm-bold);
  font-size: var(--font-size-xxl);
  line-height: var(--line-height-xxl);
  font-style: normal;
  font-weight: 400;
}

.helvetica {
  font-family: Helvetica, sans-serif !important;
}
.slash{
  font-size: 1.3em;
  vertical-align: top;
}

@media screen and (max-width: 767px) {
  .h1 { font-size: var(--font-size-28px) }
  .h2 { font-size: var(--font-size-25px); font-family: var(--font-family-codecwarm-codecwarm-regular) }
  .h3 { font-size: var(--font-size-xxl); font-family: var(--font-family-codecwarm-codecwarm-regular) }
  .h4 { font-size: var(--font-size-xl); font-family: var(--font-family-codecwarm-codecwarm-regular) }
  .h5 { font-size: var(--font-size-s); font-family: var(--font-family-codecwarm-codecwarm-regular) }
  .p, .medium { font-size: var(--font-size-s); line-height: 22px }
  .small { font-size: var(--font-size-xxs) }
  .button { font-size: var(--font-size-m) }
  .input { font-size: var(--font-size-xl) }
}

.weight-400 { font-weight: 400}