@import url(https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500;700&display=swap);
:root {
  /* Design system colors */
  --tone-200: rgba(5, 5, 5, 0.06);
  --tone-300: rgba(0, 0, 0, 0.11);
  --tone-400: rgba(0, 0, 0, 0.28);
  --tone-500: rgba(0, 0, 0, 0.51);
  --tone-600: rgba(0, 0, 0, 0.65);
  --tone-700: rgba(0, 0, 0, 0.76);
  --tone-800: rgba(0, 0, 0, 0.86);
  --tone-900: rgba(0, 0, 0, 0.98);

  --absolute-100: #ffffff;
  --absolute-200: #f0f0f0;
  --absolute-300: #e3e3e3;
  --absolute-700: #3d3d3d;
  --absolute-800: #1f1f1f;
  --absolute-900: #050505;

  --aquamarine-500: rgba(1, 135, 144, 1);

  --red-100: rgba(228, 70, 86, 0.1);
  --red-500: rgba(211, 53, 69, 1);

  --blue-100: rgba(0, 122, 255, 0.1);
  --blue-400: rgba(0, 122, 255, 1);

  --text-secondary: rgba(0, 0, 0, 0.54);
  --text-disabled: rgba(0, 0, 0, 0.38);

  --white: white;
  --red: #ff3b2f;
  --light-red: #e44656;
  --transparent-red: rgba(228, 70, 86, 0.1);
  --light-footer-gray: #f1f1f1;
  --light-footer-bg-gray: #f8f8f8;
  --light-text-gray: rgba(0, 0, 0, 0.51);
  --text-black: rgba(0, 0, 0, 0.98);
  --text-black-title-popup: rgba(46, 46, 45, 1);
  --background-light-secondary: #f2f2f7;
  --popup-background: rgba(0, 0, 0, 0.28);
  --gray-border: rgba(0, 0, 0, 0.11);
  --gray-border-light: rgba(194, 194, 194, 0.5);
  --dark-gray: #333333;
  --light-gray: #d9d9d9;
  --medium-gray: #979797;
  --medium-dark-gray: #646464;
  --disabled-gray: #ebebeb;
  --disabled-dark-gray: #c2c2c2;
  --placeholder-gray: #f1f1f1;
  --white: white;
  --black: black;
  --light-black: rgba(61, 61, 61, 1);
  --main: #5648f8;
  --blue: rgba(0, 122, 255, 1);
  --link-blue: rgba(0, 106, 219, 1);
  --medium-main: #c1bbff;
  --light-main: #e7eafb;
  --accent: #22ccd8;
  --light-cookie-accent: rgba(233, 250, 251, 1);
  --light-accent: rgba(34, 204, 216, 0.2);
  --light-background-accent: rgba(144, 247, 254, 0.08);
  --lightest-accent: #b3eef2;
  --mts-red: #e30611;
  --yelow: #ff9f0a;
  --aquamarine: rgba(34, 204, 216, 0.1);

  /* New colors */
  --black-bg: var(--absolute-700);
  --black-hover: var(--absolute-800);

  /* Border-radius variants */
  --radius-sx: 4px;
  --radius-s: 8px;
  --radius-m: 16px;
  --radius-l: 24px;
  --radius-xl: 32px;

  /* Box-shadows */
  --shadow-xl: 0px 25px 59px rgba(0, 0, 0, 0.2);
  --shadow-m: 0px 16px 24px 0px rgba(0, 0, 0, 0.15);

  /**
   * Fonts using while preloading Lato
   * Or if preloading failed
   */
  --fonts: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell,
    "Open Sans", "Helvetica Neue", sans-serif;

  --font-family-main: Roboto;

  --font-size-heading-first: 30px;
  --font-size-heading-second: 22px;
  --font-size-heading-third: 18px;

  /**
   * Margin for the product card
   * Is using in the product grids and sliders
   */
  --product-margin: 8px;

  /**
   * Height of the `Header` component
   */
  --header-height: 84px;

  /**
   * Margins between content and page body
   * On desktop does not make sense because numeric value is unknown
   * 0 here on desktop to not to violate calculations
   */
  --wrapper-margin: 0;
  --wrapper-padding: 120px;

  /**
   * Cards spacings and width
   */

  --card-spacing: 16px;

  --card-width: 282px;
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
:root {
    --product-margin: 7.5px
}
  }
@media only screen and (max-width: 767px) {
:root {
    --product-margin: 5px
}
  }
@media only screen and (max-width: 767px) {
:root {
    --header-height: 54px
}
  }
@media only screen and (min-width: 768px) and (max-width: 991px),only screen and (max-width: 767px) {
:root {
    --wrapper-margin: 15px
}
  }
@media only screen and (min-width: 992px) {
:root {
    --card-spacing: 24px
}
  }
@media only screen and (min-width: 992px) {
:root {
    --card-width: calc((100% - (var(--card-spacing) * 2)) / 3)
}
  }
/* TODO: complete */
/* 1600 */
/* 1300 */
/* 992 */
/* 992 */
/* 768 */
/* 320 */
.Destinations-page {
  margin-bottom: 142px;
  margin-top: 30px;
}
.Destinations-page__tabs {
    margin-top: 26px;
  }
.Destinations-page__tabs h1 {
      margin-top: 0;
    }
.Destinations-page .BrainhubCarouselItem {
    -webkit-box-align: start;
        -ms-flex-align: start;
            align-items: flex-start;
  }
@media only screen and (max-width: 767px) {
.Destinations-page .ProductsSlider__select {
      margin-right: calc(-1 * 0);
      margin-right: calc(-1 * var(--wrapper-margin))
  }
    }
.Destinations-page__tab {
    -webkit-box-flex: 1;
        -ms-flex: 1;
            flex: 1;
    padding-top: 5px;
  }
.Destinations-page__country {
    font-size: 20px;
    line-height: 24px;
    margin-top: 30px;
  }
@media only screen and (max-width: 767px) {
.Destinations-page__country {
      -webkit-box-orient: vertical;
      -webkit-box-direction: normal;
          -ms-flex-direction: column;
              flex-direction: column;
      font-size: 15px;
      line-height: 170%;
      margin-top: 16px
  }
    }
.Destinations-page__country-link {
    display: inline-block;
    font-weight: 600;
  }
@media (hover:hover) {
      .Destinations-page__country-link:hover {
        color: #333333;
        color: var(--dark-gray);
        text-decoration: underline;
        opacity: 1;
      }
    }
@media only screen and (max-width: 767px) {
.Destinations-page__country-link {
      font-size: 17px;
      line-height: 20px
  }
    }
.Destinations-page__city {
    color: #333333;
    color: var(--dark-gray);
  }
@media (hover:hover) {
      .Destinations-page__city:hover {
        color: rgba(34, 204, 216, 0.2);
        color: var(--light-accent);
      }
    }
@media (hover:hover) {
      .Destinations-page__country-name a:hover {
        opacity: 1;
      }
    }
@media only screen and (min-width: 992px) {
.Destinations-page__country-name {
      -ms-flex-preferred-size: 18%;
          flex-basis: 18%;
      max-width: 18%
  }
    }
@media only screen and (max-width: 767px) {
.Destinations-page__country-name {
      max-width: unset
  }
    }
@media only screen and (min-width: 992px) {
.Destinations-page__cities {
      -ms-flex-preferred-size: 82%;
          flex-basis: 82%;
      max-width: 82%
  }
    }
@media only screen and (max-width: 767px) {
.Destinations-page__cities {
      max-width: unset
  }
    }


/*# sourceMappingURL=pages-Destinations.249af8e8.chunk.css.map*/