/* Fonts */

/* Inter */
@import url("https://fonts.googleapis.com/css2?family=Inter:opsz,wght@14..32,100..900&display=swap");

/* Oswald */
@import url("https://fonts.googleapis.com/css2?family=Oswald:wght@200..700&display=swap");

/* Alumni Sans */
@import url('https://fonts.googleapis.com/css2?family=Alumni+Sans:wght@100..900&display=swap');

/* Imports */
@import url(header.css);
@import url(header-user-profile.css);
@import url(custom-icons.css);
@import url(catalog-card.css);
@import url(subscription.css);
@import url(header-panel.css);
@import url(split-pop-up.css);
@import url(delivery-methods.css);
@import url(choose-city.css);
@import url(blog.css);
@import url(profile.css);
@import url(basket-pop.css);
@import url(custom-order.css);
@import url(apiship-pvz.css);
@import url(dispatched.css);
@import url(custom-article.css);
@import url(custom-article-header-share-popup.css);
@import url(cookie.css);
@import url(dosage-calculator-popup.css);
@import url(choose-city-home.css);
@import url(brand-pop.css);
@import url(brand-link.css);
@import url(delivery-pop.css);
@import url(subscribe-success.css);
@import url(order-status-modal.css);
@import url(contacts.css);
@import url(help-popup.css);
@import url(raschet-dozirovki.css);
@import url(home-custom.css);
@import url(dosage-guide.css);
@import url(popup-email-confirmation.css);
@import url(popup-review.css);
@import url(product-interest-popup.css);
@import url(partnership-modal.css);
@import url(logout-popup.css);
@import url(custom-calculator.css);
@import url(holiday-popup.css);
@import url(loyalty-program.css);
@import url(custom-about.css);
@import url(partner-tool-modal.css);
@import url(detailing-popup.css);
@import url(dosage-calculator.css);
@import url(trigger-emails.css);
@import url(profile-rules.css);
@import url(custom-dropdown.css);

/* Other styles */

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  clip-path: inset(100%);
  white-space: nowrap;
  border: 0;
}

.phone.phone--catalog-card::before {
  margin-right: 1.3rem;
}

.main.catalog-card {
  padding-left: 0;
}

/* Custom-close START */

.custom-close {
  position: absolute;

  transition: opacity 0.3s ease;
  background-color: transparent;
  border: none;
  outline: none;
}

.custom-close:hover {
  opacity: 0.7;
}

/* Custom-close END */

/* Inputs START */
.custom-input-wrapper {
  position: relative;
}

.custom-input-label {
  font-size: 1.4rem;
  font-weight: 500;
}

.custom-input-label span {
  color: #f00;
}

.custom-input {
  border-radius: 0.8rem;
  background-color: #fff;
  border: 1px solid #d3d3d3;
  padding: 1.5rem 1.5rem 1.5rem 2rem;

  outline: none;
}

.custom-input-tel {
  padding: 1.5rem 1.5rem 1.5rem 6.5rem;
}

.custom-input-not-necessarily {
  color: #d5d5d5;
  font-size: 1.2rem;
  font-weight: 600;
  letter-spacing: -0.03em;
}
/* Inputs END */

/* Form-required START */
.form-required {
  font-size: 1.2rem;
  font-weight: 500;
  letter-spacing: -0.03em;
}

.form-required span {
  color: #f00;
}
/* Form-required END */

/* info START */
.info-section {
  height: 53.8rem;

  padding-top: 4rem;
}

.info-section__title {
  font-size: 2.8rem;
  font-weight: 400;
}

.info-section__wrapper {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
}

.info-section__image {
  position: relative;

  max-width: 71.3rem;
  height: 45rem;

  z-index: 1;
}

.info-section__image img {
  width: 100%;
  height: 100%;

  border-radius: 1.5rem;
}
/* info END */

/* error START */
.error {
	animation: shake 0.4s ease;
}

@keyframes shake {
  0%, 100% { transform: translateX(0); }
  25%  { transform: translateX(-6px); }
  75%  { transform: translateX(6px); }
}
/* error END */