.container-width {
  max-width: 1320px !important;
  width: 87.3%;
  margin-left: auto;
  margin-right: auto;
}
@media screen and (max-width: 428px) {
  .container-width {
    width: 100%;
    padding-left: 16px;
    padding-right: 16px;
  }
}
@media screen and (min-width: 1680px) {
  .container-width {
    max-width: calc(80.5rem + 0.2vw) !important;
  }
}
@media screen and (min-width: 1920px) {
  .container-width {
    max-width: calc(82.5rem + 0.2vw) !important;
  }
}
@media screen and (min-width: 2560px) {
  .container-width {
    max-width: calc(85.5rem + 0.2vw) !important;
  }
}
@media screen and (min-width: 3840px) {
  .container-width {
    max-width: calc(86.5rem + 0.2vw) !important;
  }
}
@media screen and (min-width: 4096px) {
  .container-width {
    max-width: calc(87.5rem + 0.2vw) !important;
  }
}

.container-width-small {
  max-width: 1472px !important;
  width: 97.4%;
  margin-left: auto;
  margin-right: auto;
}
@media screen and (max-width: 428px) {
  .container-width-small {
    width: 100%;
    padding-left: 16px;
    padding-right: 16px;
  }
}
@media screen and (min-width: 1680px) {
  .container-width-small {
    max-width: calc(95.5rem + 0.2vw) !important;
  }
}
@media screen and (min-width: 1921px) {
  .container-width-small {
    max-width: calc(110.5rem + 0.2vw) !important;
  }
}
@media screen and (min-width: 2561px) {
  .container-width-small {
    max-width: calc(102.5rem + 0.2vw) !important;
  }
}
@media screen and (min-width: 3840px) {
  .container-width-small {
    max-width: calc(120.5rem + 0.2vw) !important;
  }
}
@media screen and (min-width: 4096px) {
  .container-width-small {
    max-width: calc(125.5rem + 0.2vw) !important;
  }
}

@media screen and (min-width: 310px) and (max-width: 420px) {
  html,
  body {
    font-family: "sofia-pro", Helvetica, Arial, serif;
    font-size: calc(16px - 1.3vw);
    line-height: calc(16px - 1.3vw);
  }
}
@media screen and (min-width: 429px) and (max-width: 511px) {
  html,
  body {
    font-family: "sofia-pro", Helvetica, Arial, serif;
    font-size: calc(16px - 1.7vw);
    line-height: calc(16px - 1.7vw);
  }
}
@media screen and (min-width: 512px) and (max-width: 640px) {
  html,
  body {
    font-family: "sofia-pro", Helvetica, Arial, serif;
    font-size: calc(16px - 1.5vw);
    line-height: calc(16px - 1.5vw);
  }
}
@media screen and (min-width: 641px) and (max-width: 768px) {
  html,
  body {
    font-family: "sofia-pro", Helvetica, Arial, serif;
    font-size: calc(16px - 1.2vw);
    line-height: calc(16px - 1.2vw);
  }
}
@media screen and (min-width: 769px) and (max-width: 992px) {
  html,
  body {
    font-family: "sofia-pro", Helvetica, Arial, serif;
    font-size: calc(16px - 0.8vw);
    line-height: calc(16px - 0.8vw);
  }
}
@media screen and (min-width: 993px) and (max-width: 1024px) {
  html,
  body {
    font-family: "sofia-pro", Helvetica, Arial, serif;
    font-size: calc(16px - 0.5vw);
    line-height: calc(16px - 0.5vw);
  }
}
@media screen and (min-width: 1025px) and (max-width: 1320px) {
  html,
  body {
    font-family: "sofia-pro", Helvetica, Arial, serif;
    font-size: calc(16px - 0.3vw);
    line-height: calc(16px - 0.3vw);
  }
}
@media screen and (min-width: 1680px) {
  html,
  body {
    font-size: calc(16px + 0.1vw);
    line-height: calc(18px + 0.1vw);
  }
}
@media screen and (min-width: 1920px) {
  html,
  body {
    font-size: calc(16px + 0.2vw);
    line-height: calc(18px + 0.2vw);
  }
}
@media screen and (min-width: 2560px) {
  html,
  body {
    font-size: calc(16px + 0.4vw);
    line-height: calc(18px + 0.4vw);
  }
}
@media screen and (min-width: 3840px) {
  html,
  body {
    font-size: calc(20px + 0.5vw);
    line-height: calc(22px + 0.5vw);
  }
}
@media screen and (min-width: 4096px) {
  html,
  body {
    font-size: calc(24px + 0.4vw);
    line-height: calc(26px + 0.4vw);
  }
}

* {
  box-sizing: border-box;
  font-family: "sofia-pro", Helvetica, Arial, serif !important;
}

html,
body {
  padding: 0;
  margin: 0;
  overflow-x: hidden;
  scroll-behavior: smooth;
  text-size-adjust: none;
  background-color: #ffffff;
}

body {
  margin-top: 7.1875rem;
}
@media (max-width: 428px) {
  body {
    margin-top: 5rem;
  }
}

img {
  display: block;
}

a {
  cursor: pointer !important;
  color: inherit;
  text-decoration: none;
}

button {
  border: none;
  outline: none;
  color: inherit;
}

.header, .collective-footer {
  display: none;
}

body {
  margin: 0;
}

.guide-wrapper {
  position: relative;
  background-color: #272727;
  height: 100vh;
  display: flex;
  width: 100%;
  align-items: center;
  justify-content: center;
}
.guide-wrapper .iframe {
  border: 0;
  border-radius: 0.5rem;
  animation: animate-iframe 1s linear forwards;
}
.guide-wrapper .close-button {
  position: absolute;
  top: 4%;
  right: 3%;
  background: #333333;
  border-radius: 4px;
  padding: 0.3125rem;
}
.guide-wrapper .close-button img {
  height: 2rem;
  width: 2rem;
}
.guide-wrapper .error-content {
  color: white;
  font-size: 1.5rem;
  font-weight: 400;
}

@keyframes animate-iframe {
  0% {
    width: 0;
    height: 0;
  }
  100% {
    height: 95vh;
    width: 95%;
  }
}

/*# sourceMappingURL=guide.css.map */