@font-face {
	font-family: 'Akzidenz-Grotesk Pro';
  font-style: normal;
  font-weight: 300;
	src: url(../fonts/akzidenzgroteskpro_regular.ttf);
	src: url(../fonts/akzidenzgroteskpro_regular.ttf) format('truetype');
  font-display: swap;
}
@font-face {
	font-family: 'Akzidenz-Grotesk Pro';
  font-style: normal;
  font-weight: 700;
	src: url(../fonts/akzidenzgroteskpro_boldex.otf);
	src: url(../fonts/akzidenzgroteskpro_boldex.otf) format('opentype');
  font-display: swap;
}

:root {
  --column-size: 336px;

  --primary-color: #1E1E1E;
  --primary-accent: #fff;
  --primary-accent2: #DC1E1C;
  --primary-accent3: #FF9F9F;
  --primary-accent4: #757E88;
  --primary-accent5: #202020;
  --primary-accent6: #218768;
  --primary-accent7: #214A87;
  --primary-accent8: #E7D2C3;
  --primary-accent9: #D9D9D9;
  --primary-accent10: #E3E3E3;
  --primary-accent11: #FAFAFA;
  --primary-accent12: #e6effc;
  --primary-accent13: #ffe4e4;
  --primary-accent14: #e6fff8;
  --primary-opacity: rgba(255, 255, 255, 0.04);
  --primary-opacity2: rgba(255, 159, 159, 0.04);
  --primary-opacity3: rgba(118, 118, 118, 0.04);
  --primary-opacity4: #fbfbfb;
  --primary-opacity5: rgba(117, 126, 136, 0.14);
  --primary-opacity6: rgba(117, 126, 136, 0.75);
  --primary-opacity7: rgba(117, 126, 136, 0.24);
  --primary-opacity8: rgba(117, 126, 136, 0.02);

  --link-color: var(--primary-color);
  --link-hover: var(--primary-accent2);

  --button-width: 450px;
  --button-height: 56px;
  --button-offset: 26px;
  --button-radius: 56px;

  --button-color: var(--primary-accent);
  --button-color-hover: var(--primary-accent);
  --button-background: var(--primary-color);
  --button-background-hover: var(--primary-accent2);

  -webkit-tap-highlight-color: transparent;
}

@media (max-width: 1600px) {
  body {
    container-type: inline-size;
    container-name: desctop;
  }
}

@media (max-width: 1440px) {
  body {
    container-type: inline-size;
    container-name: desctop large;
  }
}

@media (max-width: 1280px) {
  body {
    container-type: inline-size;
    container-name: desctop large xlarge;
  }
}

@media (max-width: 1025px) {
  body {
    container-type: inline-size;
    container-name: desctop large xlarge medium;
  }
}

@media (max-width: 640px) {
  :root {
    container-type: inline-size;
    container-name: desctop large xlarge medium small;
  }
}

@media (max-width: 399px) {
  body {
    container-type: inline-size;
    container-name: desctop large xlarge medium small xsmall;
  }
}

@container medium (min-width: 0) {
  
}

body {
  /* overflow: hidden; */
  /* overflow-y: auto; */
  min-height: 100vh;
  line-height: 1.3;
  font-weight: 300;
  font-size: calc(12px + 2 * var(--window-resize));
  font-family: 'Mont', 'Montserrat', Arial, Helvetica, sans-serif !important;
  
  row-gap: 0;
  display: flex;
  flex-direction: column;
}

* {
  outline: none;
  font-weight: inherit;
  font-family: inherit;
  font-size: inherit;
  line-height: inherit;
  box-sizing: border-box;

  @container large (min-width: 0) {
    --column-size: 280px;
  }
}

a {
  color: var(--link-color);
  transition: color .3s ease;
  text-decoration: none;
}
a:hover {
  color: var(--link-hover);
}
.text a {
  --link-color: var(--primary-accent2);
  /* text-decoration: underline !important; */
  border-bottom: 1px solid var(--link-color);
}
.text a:hover {
  border-bottom-color: var(--link-hover);
}

h1 {
  font-weight: 300;
  font-size: calc(24px + 24 * var(--window-resize));
  color: var(--title-color, var(--primary-color));
}
h2 {
  font-weight: 300;
  font-size: calc(24px + 20 * var(--window-resize));
  color: var(--title-color, var(--primary-color));
}
.title > *:not(:is(h1, h2)) {
  font-weight: 300;
  font-size: calc(24px + 24 * var(--window-resize));
  color: var(--title-color, var(--primary-color));
}
.title :is(h1, h2) {
  margin-top: 0;
}
.title--center :is(h1, h2) {
  text-align: center;
}
.title span {
  font-weight: 300;
  font-size: calc(14px + 0 * var(--window-resize));
  color: var(--primary-accent4);
  text-transform: none;
  display: inline-block;
  margin-left: 8px;
}

.dfx {
  display: flex;
}

.container {
  padding: 0 var(--container-offset);
  width: var(--container-size);
  max-width: 100%;
  margin: 0 auto;
  /* box-sizing: content-box; */
}
.container .container {
  width: 100%;
  padding: 0;
}

.separator {
  width: 100%;
  height: 1px;
  background-color: var(--primary-accent9);
}

.sticky {
  /* position: -webkit-sticky;
  position: sticky;
  top: 40px;
  z-index: 1; */
}

.loader-icon {
  transition: .1s;
  position: relative;
  width: 100%;
  height: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.loader-icon::after {
  content: " ";
  display: block;
  width: 16px;
  height: 16px;
  margin: 0;
  border-radius: 50%;
  border: 2px solid var(--primary-accent2);
  border-color: var(--primary-accent2) transparent var(--primary-accent2) transparent;
  animation: lds-dual-ring 1.2s linear infinite;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translateX(-50%) translateY(-50%);
  transform-origin: left top;
}
@keyframes lds-dual-ring {
  0% {
    rotate: 0deg;
  }
  100% {
    rotate: 360deg;
  }
}