body {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  gap: 16px
}

.form {
  width: 100%;
  padding: 16px 16px;
  /*background-color: hsla(0, 0%, 100%, .5);*/
  background-color: hsla(0, 0%, 100%, 1);
  border: 1px solid rgba(0, 0, 0, .7);
  border-radius: 8px;
  font-size: 1.4rem;
  color: #111
}

.form-title {
  width: 100%;
  font-size: 2.4rem;
  font-weight: bold;
  text-align: center;
  margin-bottom: .4em
}

.form .input-block {
  margin-bottom: 1.6rem;
  width: 100%
}

.form .input-block .error {
  color: #971c24;
  font-weight: 600;
  font-size: 13.17px;
  margin-top: .4rem
}

.form .alert .close {
  font-size: 18.22px;
  padding: .4em .6em
}

@media screen and (min-width: 374.98px) {
  .form {
    padding: 16px 32px
  }
}

.input-text {
  height: 4rem;
  width: 100%;
  padding: 8px;
  border-radius: 8px;
  border: 1px solid rgba(0, 0, 0, .45);
  font-size: 1.4rem;
  font-weight: 400;
  color: #000
}

.input-text::-webkit-input-placeholder {
  font-size: inherit;
  font-weight: inherit;
  color: inherit
}

.input-text::-moz-placeholder {
  font-size: inherit;
  font-weight: inherit;
  color: inherit
}

.input-text:-ms-input-placeholder {
  font-size: inherit;
  font-weight: inherit;
  color: inherit
}

.input-text::-ms-input-placeholder {
  font-size: inherit;
  font-weight: inherit;
  color: inherit
}

.input-text::placeholder {
  font-size: inherit;
  font-weight: inherit;
  color: inherit
}

.input-check {
  position: relative;
  width: 1.6rem;
  height: 1.6rem;
  -webkit-box-flex: 0;
  -ms-flex: 0 0 1.6rem;
  flex: 0 0 1.6rem;
  display: block;
  border: 2px solid #107c90;
  border-radius: 2px
}

.input-check input, .input-check .custom {
  cursor: pointer;
  position: absolute;
  width: 100%;
  height: 100%;
  z-index: 1
}

.input-check input {
  opacity: 0
}

.input-check input:focus+.custom, .input-check input:hover+.custom {
  opacity: .5
}

.input-check input:checked+.custom {
  opacity: 1
}

.input-check input:checked:focus+.custom {
  outline: 2px solid #ddd;
  outline-offset: 2px
}

.input-check .custom {
  width: 100%;
  height: 100%;
  pointer-events: none;
  background-color: #107c90;
  opacity: 0;
  z-index: 0;
  -webkit-transition: opacity 200ms ease;
  transition: opacity 200ms ease
}

.input-check .custom::after {
  content: "✓";
  position: absolute;
  color: #fff;
  font-weight: bold;
  font-size: 1.2rem;
  left: 50%;
  top: 50%;
  -webkit-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%)
}

.tag {
  display: inline-block;
  padding: .4em 1.26em;
  color: #e2e2e2;
  font-size: 1.6rem;
  font-weight: 600;
  text-align: center;
  text-transform: uppercase;
  border-radius: 8px;
  background-color: #107c90
}

.header {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  gap: 16px;
  padding: 16px;
  margin-left: auto;
  margin-right: auto
}

.header .event-logo {
  max-width: 300px
}

@media screen and (min-width: 1439.98px) {
  .header .event-logo {
    max-width: 400px
  }
}

.main {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  gap: 32px;
  padding: 16px
}

.main .event-title {
  max-width: 400px;
  margin-left: auto;
  margin-right: auto
}

.main .form-container {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  gap: 32px
}

.main .form-container .form {
  max-width: 500px
}

@media screen and (min-width: 499.98px) {
  .main .form-container .form {
    padding: 16px 64px
  }
}

@media screen and (min-width: 1199.98px) {
  .main .form-container {
    -webkit-box-align: start;
    -ms-flex-align: start;
    align-items: flex-start;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
    -ms-flex-direction: row;
    flex-direction: row;
    gap: 56px
  }
}

.main .sign-forms {
  width: 100%;
  max-width: 500px
}

.main .sign-forms-tabs {
  -ms-flex-wrap: nowrap;
  flex-wrap: nowrap;
  padding: 4px 0;
  border-bottom: none;
  gap: 4px
}

.main .sign-forms-tabs .nav-item {
  width: 100%
}

.main .sign-forms-tabs .nav-link {
  width: 100%;
  padding: .4em;
  border-radius: 8px
}

.main .sign-forms-tabs .nav-link.active {
  color: #111;
  border: 1px solid rgba(0, 0, 0, .7);
  background-color: hsla(0, 0%, 100%, .5)
}

.main .featured-event {
  width: 100%;
  max-width: 650px
}

.main .featured-event-header {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: start;
  -ms-flex-align: start;
  align-items: flex-start;
  -webkit-box-orient: vertical;
  -webkit-box-direction: reverse;
  -ms-flex-direction: column-reverse;
  flex-direction: column-reverse;
  gap: 16px;
  margin-bottom: 16px
}

.main .featured-event-call {
  font-size: 1.4rem;
  font-weight: 400
}

.main .featured-event-title {
  font-size: 1.6rem;
  font-weight: bold
}

.main .featured-event-text {
  font-size: 1.6rem;
  line-height: 2rem
}

.main .featured-event-text.-bold {
  font-weight: bold
}

.main .featured-event-text:first-of-type {
  margin-bottom: 16px
}

@media screen and (min-width: 1199.98px)and (max-width: 1439.98px)and (orientation: landscape) {
  .main {
    padding: 0 16px
  }
}

.footer {
  padding: 16px
}

.footer .client-logos {
  max-width: 550px
}

.signup-modal {
  padding-right: 0 !important;
  background-color: rgba(0, 0, 0, .85)
}

.signup-modal-content {
  background-color: #fff;
  border-radius: 0;
  border: none;
  border-bottom: .4rem solid #107c90
}

.signup-modal-header {
  border: none;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: end;
  -ms-flex-pack: end;
  justify-content: flex-end
}

.signup-modal-header .btn-close {
  cursor: pointer;
  position: relative;
  width: 3.2rem;
  height: 3.2rem;
  font-size: 20.74px;
  font-weight: bold;
  color: #fff;
  display: inline-block;
  border: none;
  border-radius: 50%;
  background-color: #107c90;
  -webkit-transition: -webkit-transform 250ms ease-out;
  transition: -webkit-transform 250ms ease-out;
  transition: transform 250ms ease-out;
  transition: transform 250ms ease-out, -webkit-transform 250ms ease-out;
  transition: transform 250ms ease-out, -webkit-transform 250ms ease-out
}

.signup-modal-header .btn-close .btn-icon {
  position: absolute;
  display: inline;
  text-shadow: 0 1px 1px #cb9dcd;
  left: 50%;
  top: 50%;
  -webkit-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%)
}

.signup-modal-header .btn-close:hover {
  -webkit-transform: scale(1.15);
  transform: scale(1.15)
}

.signup-modal-header .btn-close:focus {
  outline: .2rem solid #107c90;
  outline-offset: .2rem
}

.signup-modal-body {
  width: 100%;
  max-width: 65rem;
  padding: 1rem 2.4rem 2.4rem 2.4rem;
  margin-right: auto;
  margin-left: auto;
  font-size: 18.22px;
  line-height: 21.864px;
  color: #111;
  text-align: center
}

.signup-modal-footer {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  border-top: none;
  margin-bottom: 12px
}

@media screen and (min-width: 399.98px) {
  .signup-modal .signup-modal-body {
    font-size: 20.74px;
    line-height: 24.888px
  }
}
