body {
  display: none;
  margin: 0;
  font-family: var(--font-family);
}

body.appear {
  display: block;
}

header {
  height: var(--nav-height);
}

footer {
	background-color: var(--black-color);
	padding: 60px 60px 70px;
}

header .header,
footer .footer {
  visibility: hidden;
}

header .header[data-block-status="loaded"],
footer .footer[data-block-status="loaded"] {
  visibility: visible;
}

a,
button,
input[type="submit"] {
  display: inline-block;
  text-align: center;
  cursor: pointer;
  text-decoration: none;
  text-overflow: ellipsis;
}

.button {
  font-size: var(--font-size-label1);
  font-weight: var(--font-weight-label1);
  transition: opacity 0.15s ease;
  border: 2px solid transparent;
  color: var(--black-color);
  border-radius: var(--button-border-radius);
  padding: 14px 24px 11px;

  &.disabled,
  &:disabled {
    pointer-events: none;
  }

  &.primary {
    background-color: var(--primary-color);
    color: var(--black-color);

    &:hover {
      background-color: var(--secondary-pf-color);
    }

    &.disabled,
    &:disabled {
      background-color: var(--gray-white-color);
      color: var(--gray-color);
    }
  }

  &.secondary {
    border: 2px solid var(--black-color);
    background-color: transparent;
    color: var(--black-color);

    &:hover {
      background-color: var(--black-color);
      color: var(--white-color);
    }

    &.disabled,
    &:disabled {
      background-color: var(--gray-white-color);
      border-color: var(--gray-color);
      color: var(--gray-color);
    }
  }

  &.tertiary {
    border: 2px solid var(--white-color);
    background-color: transparent;
    color: var(--white-color);
    padding: 16px 24px;

    &:hover {
      background-color: var(--white-color);
      color: var(--black-color);
    }
  }
}

.section {
  position: relative;
  z-index: 3;
  padding: var(--section-padding);
  overflow-x: auto;
  background-color: var(--white-color);

  &.rounded-top {
    border-radius: 40px 40px 0 0;
  }

  &.tertiary {
    background-color: var(--gray-white-color);
    color: var(--black-color);
  }

  >.button-action-wrapper.no-padding-top,
  >.button-link-wrapper.no-padding-top {
    padding-top: 0;
  }

  >div {
    max-width: 1440px;
    padding: var(--wrapper-padding);
    margin: auto;
  }

  &.dark {
    background-color: var(--gray-darkest-color);
    color: var(--white-color);
  }

  &.pf {
    &.primary {
      background-color: var(--primary-color);
      color: var(--black-color);

      .button {
        &.primary {
          background-color: var(--black-color);
          color: var(--white-color);

          &:hover {
            background-color: var(--gray-dark-color);
          }

          &.disabled,
          &:disabled {
            background-color: var(--gray-white-color);
            color: var(--gray-color);
          }
        }
      }
    }

    &.secondary {
      background-color: var(--secondary-pf-color);
      color: var(--white-color);

      .button {

        /* stylelint-disable-next-line no-descending-specificity */
        &.primary {
          background-color: var(--black-color);
          color: var(--white-color);

          &:hover {
            background-color: var(--gray-dark-color);
          }

          &.disabled,
          &:disabled {
            background-color: var(--gray-white-color);
            color: var(--gray-color);
          }
        }
      }
    }

    &.tertiary {
      background-color: var(--gray-lightest-color);
      color: var(--black-color);
    }

    &.dark {
      .button.secondary {
        color: var(--white-color);
        border-color: var(--white-color);

        &:hover {
          color: var(--black-color);
          background-color: var(--white-color);
        }

        &.disabled,
        &:disabled {
          background-color: transparent;
          border-color: var(--gray-color);
          color: var(--gray-color);
        }
      }
    }
  }

  &.pj {
    &.primary {
      background-color: var(--secondary-dark-color);
      color: var(--white-color);
    }

    &.secondary {
      background-color: var(--secondary-pj-color);
      color: var(--secondary-dark-color);
    }

    &.tertiary {
      background-color: var(--gray-lightest-color);
      color: var(--black-color);
    }

    &.dark {

      /* stylelint-disable-next-line no-descending-specificity */
      .button.secondary {
        color: var(--white-color);
        border-color: var(--white-color);

        &:hover {
          color: var(--black-color);
          background-color: var(--white-color);
        }

        &.disabled,
        &:disabled {
          background-color: transparent;
          border-color: var(--gray-color);
          color: var(--gray-color);
        }
      }
    }
  }
}

.tablet,
.mobile {
  .section {
    padding: var(--section-padding-mobile);

    >div {
      padding: var(--wrapper-padding-mobile);
    }

    .button {
      font-size: var(--font-size-label2);
      font-weight: var(--font-weight-label2);
      padding: 12px 24px 8px;
    }
  }
}

@media (width <= 768px) {
	footer{
		padding: 32px 20px 64px;
	}
}


.pj { 
  --secondary: #c2d0c0;
}