/* stylelint-disable order/order */
/*
* Converts an pixel value into a rem value.
*
* @param string  $values    the pixel value(s) as a number. Can convert multiple values if values separated by a space.
* @param integer $base      the base pixel value.
*
* @return string   a space-separated string of rem values.
*/
/*
* This is an abbreviated wrapper for the responsive-values function.
*/
/*
* Creates a CSS clamp value that sizes between breakpoints.
*
* @param integer $min                    the minimum pixel value.
* @param integer $max                    the maximum pixel value.
* @param string  $smallest-breakpoint    the name of the smallest breakpoint from the $grid-breakpoints variable.
* @param string  $largest-breakpoint     the name of the largest breakpoint from the $grid-breakpoints variable.
* @param string  $screen                 whether to use a horizontal (width) breakpoint or a vertical (height) breakpoint.
*
* @return string   a CSS clamp property value.
*/
/*
* Outputs a font family value from the $fonts variable.
*
* @param string  $key   the font key.
*
* @return string   a font family value.
*/
/*
* Outputs a color value from the $paints or $additional-paints variables.
*
* @param string  $key   the color name.
*
* @return string   a color value.
*/
/*
* Outputs an effect value from the $effects variable.
*
* @param string  $key   the effect name.
*
* @return string   an effect value.
*/
/* stylelint-enable order/order */
/*
* Used to target heading selectors.
*
* @param integer  $start               the first heading element to target. 1 through 6.
* @param integer  $end                 the last heading element to target. 1 through 6.
* @param string   $beforeCombinator    the CSS combinator to include before the heading classes.
* @param string   $afterCombinator     the CSS combinator to include after the heading classes.
* @param boolean  $includeFontClasses  whether or not to include the .has-t-1... classes or just output the standard heading elements.
*
* @return string  The included CSS wrapped with selectors for the specified headings.
*/
/*
* Used to add properties to a for a pseudo element to make an icon based on the iconfont set.
*
* @param string   $content     the content for the icon. Usually uses one of the iconfont variables.
* @param string   $font-size   the font size with unit.
*
* @return string  The CSS properties for the icon.
*/
/*
* Generates CSS to fit an element into the 12-column grid. Only works when used on an element where the parent element is the width of the entire page.
*
* @return string  CSS properties to set the width of the element to the specified column sizes.
*/
/*
* Used to target elements with a background color that has a text color different from the standard color.
*
* @return string  The included CSS wrapped with selectors for the specified background.
*/
/*
* Used to add the CSS Grid properties for the 12-column grid.
*
* @return string  The CSS Grid properties for the 12-column grid.
*/
/* Quick Positioning */
/****************
 * Fonts
 *
 * The font settings are defined via the gulp figma which task creates variables in the css/__base-includes/figma/_figma-font-styles.scss file based on the Figma file. Additional variables are defined here.
 ****************/
/*
* This array is used to specify the fonts used on the project with the following parameters:
	base - the name for use in the font() mixin.
		css - the output CSS value.
		figma-name: - the 'font-family' name ued in the _figma-font-variable.scss file.
	)
*/
/****************
 * Colors
 *
 * The primary colors are defined via the gulp figma task which creates variables in the css/__base-includes/figma/_figma-color-variables.scss file based on the Figma file. Additional variables are defined here.
 ****************/
/* If additional colors need to be added to the _figma-color-variables.scss, they can be added to this variable: */
/* This variable controls the background colors generated in the ACF background_color field and the background color classes - bg-white, bg-gray-92, etc: */
/* If a background color uses a different font color than the default color, use these variables to specify the alternate colors */
/* Backgrounds specified in this variable will use the alternative text colors: */
/****************
 * Effects
 ****************/
/****************
 * Grid Settings
 ****************/
/****************
 * Block Spacing
 *
 * These variables are based on the "Spacing" rules found in the "Foundations" section in Figma. These control the default spacing between blocks of different colors.
 ****************/
/*
This file can be used for optional additions to the Figma-generated font style mixins in the figma/_figma-font-styles.scss file.

For example, if you want to add styles to the @overline mixin, just create a mixin here called @overline-custom and that CSS will be added to the primary mixin:

@mixin overline-custom() {
	font-weight: 700;
}
*/
.extend-your-trip {
  padding: clamp(3.5rem, 1.7857142857rem + 3.5714285714vw, 5rem) 0;
}
.extend-your-trip--block {
  padding: clamp(3.5rem, 2.5rem + 2.0833333333vw, 4.375rem) 0;
}
.extend-your-trip--block .extend-your-trip__slider,
.extend-your-trip--block .block-blog-related__top {
  padding-left: 0.625rem;
  overflow: hidden;
}
.extend-your-trip--block .block-blog-related__top .has-t-2-font-size {
  margin-bottom: 1.5rem;
}
.extend-your-trip--block .progress-slider-bar {
  padding-left: 0.625rem;
}
.extend-your-trip--block .slick-list {
  overflow: visible;
}
.extend-your-trip .has-t-4-font-size {
  font-size: 1.3125rem !important;
}
.extend-your-trip__slider .slick-track {
  display: flex;
  flex-wrap: wrap;
  grid-template-columns: repeat(3, 1fr);
  grid-column-gap: clamp(0.625rem, -0.8035714286rem + 2.9761904762vw, 1.875rem);
}
@media (min-width: 80.625rem) {
  .extend-your-trip__slider.no-slide-desktop .slick-track {
    flex-wrap: nowrap;
    max-width: 100%;
    transform: translate3d(-30px, 0, 0) !important;
  }
}
.extend-your-trip .progress-slider-bar--hidden {
  display: none;
}
@media (max-width: 80.605rem) {
  .extend-your-trip .progress-slider-bar {
    display: none;
  }
}
.extend-your-trip__slider:not(.component-slider) {
  display: flex;
  flex-wrap: wrap;
  grid-template-columns: repeat(3, 1fr);
  grid-column-gap: clamp(0.625rem, -0.8035714286rem + 2.9761904762vw, 1.875rem);
}
@media (max-width: 47.98rem) {
  .extend-your-trip__slider:not(.component-slider) .extend-your-trip__slide {
    width: 100%;
    margin-right: 0;
    margin-bottom: 1.875rem;
  }
}
@media (max-width: 61.98rem) {
  .extend-your-trip__header {
    text-align: center;
  }
}
.extend-your-trip__slide {
  display: flex;
  flex-direction: column;
  width: clamp(17.5rem, 16.0714285714rem + 2.9761904762vw, 18.75rem);
  margin-bottom: 1.875rem;
  background: #fff;
  box-shadow: 0rem 0rem 0.625rem rgba(0, 0, 0, 0.1);
}
.extend-your-trip__slide:hover .extend-your-trip__link span, .extend-your-trip__slide:focus .extend-your-trip__link span, .extend-your-trip__slide:active .extend-your-trip__link span {
  color: #fff;
  background-color: #041a2f;
}
.extend-your-trip__mid-content {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  min-height: clamp(10rem, 8.2142857143rem + 3.7202380952vw, 11.5625rem);
  padding: 0.75rem;
  color: #000;
  background-color: #fff;
}
.extend-your-trip__mid-content .has-t-4-font-size {
  font-size: 1.3125rem !important;
}
.extend-your-trip__image {
  position: relative;
  height: 12.5rem;
}
.extend-your-trip__bottom-callout {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-top: auto;
  text-align: center;
  border-top: 0.0625rem solid #d9d9d9;
  background-color: #fff;
}
.extend-your-trip__price, .extend-your-trip__link {
  display: flex;
  justify-content: center;
  align-items: center;
  align-self: stretch;
  width: 50%;
  padding: 1rem 0.5rem;
}
.extend-your-trip__link {
  padding: 0;
}
.extend-your-trip__link span {
  display: flex;
  justify-content: center;
  align-items: center;
  align-self: stretch;
  width: 100%;
  padding: 1rem 0;
  color: #0f4374;
  font-weight: 350;
  font-size: 0.875rem;
  line-height: 1rem;
  letter-spacing: 0.03125rem;
}
.extend-your-trip__price {
  color: #737373;
  border-right: 0.0625rem solid #d9d9d9;
}
.extend-your-trip .has-t-5-font-size {
  color: #737373;
}
.extend-your-trip .has-button-2-font-size {
  color: #0f4374;
  font-weight: 350;
}
.extend-your-trip .icon-text {
  justify-content: flex-start;
  align-items: center;
  margin-bottom: 0.625rem;
}
.extend-your-trip .icon-text__icon {
  color: #000;
}
.extend-your-trip .slick-list {
  padding-bottom: 0.625rem;
}
.extend-your-trip__chip-enabled {
  margin-bottom: 0.5rem;
  padding: 0.375rem 0.625rem;
  color: #000;
  font-weight: 325;
  font-size: 0.875rem;
  line-height: 1rem;
  background-color: #e0daca;
}
@media (max-width: 61.98rem) {
  .extend-your-trip__chip-enabled {
    font-weight: 350;
  }
}
.extend-your-trip__combine-both {
  display: flex;
  flex: 1;
  flex-direction: column;
}
.extend-your-trip .extend-your-trip__slide {
  display: flex !important;
  height: initial !important;
  max-height: initial !important;
}

.trip-chip {
  position: absolute;
  top: 0;
  z-index: 2;
  display: inline-block;
  padding: 0.5rem 0.75rem;
  color: #fff;
  font-size: 0.75rem;
  line-height: 1rem;
  letter-spacing: 0.09375rem;
  background-color: #a97c50;
}

.other-trips__titles {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: clamp(1.5rem, -0.7857142857rem + 4.7619047619vw, 3.5rem);
}
@media (max-width: 61.98rem) {
  .other-trips__titles {
    flex-direction: column;
  }
}
@media (min-width: 48rem) {
  .other-trips__title {
    margin-bottom: 0;
  }
}
.other-trips__trips {
  display: flex;
  flex-wrap: wrap;
}
@media (min-width: 36rem) {
  .other-trips__trips {
    grid-template-columns: repeat(2, 1fr);
    grid-column-gap: 0.9375rem;
  }
}
@media (min-width: 48rem) {
  .other-trips__trips {
    grid-template-columns: repeat(3, 1fr);
  }
}
@media (min-width: 62rem) {
  .other-trips__trips {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    grid-column-gap: 1.875rem;
  }
}
@media (min-width: 62rem) {
  .other-trips__trips.component-slider {
    display: flex;
  }
}
@media (max-width: 61.98rem) {
  .other-trips .extend-your-trip__mid-content {
    min-height: initial;
  }
}
.other-trips .extend-your-trip__slide {
  max-width: 18.75rem;
  margin-right: 0;
  margin-bottom: 1.875rem;
}
@media (max-width: 47.98rem) {
  .other-trips .extend-your-trip__slide {
    width: 100%;
    margin-right: 0;
  }
}
.other-trips .slick-dots {
  display: flex !important;
  margin-right: auto;
  margin-left: auto;
}
@media (min-width: 90rem) {
  .other-trips .slick-dots {
    display: none !important;
  }
}

@media (max-width: 61.98rem) {
  .tf-posts.other-trips .extend-your-trip__slide {
    max-width: unset;
  }
}

.trips-using {
  padding: clamp(1.5rem, -0.3571428571rem + 3.869047619vw, 3.125rem) 0 clamp(1.75rem, -4.25rem + 12.5vw, 7rem);
}
.trips-using h2 {
  margin-bottom: clamp(1.5rem, 0.3571428571rem + 2.380952381vw, 2.5rem);
  text-align: center;
}
.trips-using__con {
  width: 100%;
  max-width: 66.75rem;
  margin-right: auto;
  margin-left: auto;
}
.trips-using .extend-your-trip__slide {
  width: 100%;
}
@media (min-width: 62rem) {
  .trips-using .extend-your-trip__slide {
    flex-direction: row;
  }
}
@media (min-width: 62rem) {
  .trips-using .extend-your-trip__image {
    width: 48%;
    height: initial;
  }
}
@media (min-width: 62rem) {
  .trips-using .extend-your-trip__combine-both {
    width: 52%;
    padding: 1.625rem 3.125rem 1.71875rem 3.125rem;
  }
}
@media (min-width: 62rem) {
  .trips-using .extend-your-trip__bottom-callout {
    flex-direction: column;
    border: none;
  }
}
@media (min-width: 62rem) {
  .trips-using .extend-your-trip__link span {
    font-weight: var(--link-1-font-weight);
    font-size: var(--link-1-font-size);
    font-family: var(--link-1-font-family);
    line-height: var(--link-1-line-height);
    letter-spacing: var(--link-1-letter-spacing);
    display: inline-flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    padding: 1.25rem 1.875rem;
    text-align: center;
    border-radius: 0;
    cursor: pointer;
    -webkit-appearance: none;
    appearance: none;
    transition: color 0.2s linear, background-color 0.2s linear, border 0.2s linear;
    position: relative;
    margin-bottom: 0.625rem;
    padding: 0 !important;
    color: #0f4374;
    text-transform: uppercase;
    border: none;
    border-radius: 0;
    background-color: transparent;
  }
  .bg-dark .trips-using .extend-your-trip__link span {
    color: #fff;
  }
  .bg-dark .trips-using .extend-your-trip__link span:hover, .bg-dark .trips-using .extend-your-trip__link span:focus {
    color: #c6cad1;
  }
  .trips-using .extend-your-trip__link span::before {
    position: absolute;
    left: 0;
    bottom: -0.5rem;
    content: "";
    width: 100%;
    height: 0.09375rem;
    background-color: currentcolor;
    transition: bottom 300ms ease;
  }
  .trips-using .extend-your-trip__link span:hover, .trips-using .extend-your-trip__link span:focus {
    color: #041a2f;
  }
  .trips-using .extend-your-trip__link span:hover::before, .trips-using .extend-your-trip__link span:focus::before {
    bottom: -0.15625rem;
  }
  .bg-white .trips-using .extend-your-trip__link span {
    color: #0f4374;
  }
  .bg-white .trips-using .extend-your-trip__link span:hover, .bg-white .trips-using .extend-your-trip__link span:focus {
    color: #041a2f;
  }
}
@media (min-width: 62rem) {
  .trips-using .extend-your-trip__price,
.trips-using .extend-your-trip__link {
    justify-content: flex-start;
    padding: 0;
    border: none;
  }
}
@media (min-width: 62rem) {
  .trips-using .extend-your-trip__price p {
    display: flex;
    align-items: center;
    font-weight: 325;
  }
}
@media (min-width: 62rem) {
  .trips-using .extend-your-trip__price p::before {
    content: "\ea1e";
    font-weight: 400;
    font-size: 1.5rem;
    font-family: "iconfont-propel";
    font-style: normal;
    font-variant: normal;
    line-height: 1;
    text-transform: none;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    margin-right: 1.015625rem;
    margin-left: 0.3125rem;
    color: #a97c50;
    font-size: 0.9375rem;
  }
}
@media (min-width: 62rem) {
  .trips-using .extend-your-trip__mid-content {
    min-height: initial;
    padding: 0;
  }
}
@media (min-width: 62rem) {
  .trips-using .icon-text {
    margin-bottom: 0.625rem;
  }
}
@media (min-width: 62rem) {
  .trips-using .icon-text__icon {
    color: #000;
  }
}
@media (min-width: 62rem) {
  .trips-using .extend-your-trip__price {
    margin-bottom: 1.5rem;
  }
}

.multi-trips-using {
  padding: clamp(3.5rem, 0.6428571429rem + 5.9523809524vw, 6rem) 0;
  background-color: #f0f0f0;
}
.multi-trips-using--block {
  background-color: transparent;
}
.multi-trips-using--block.bg-neutral-97 {
  background-color: #f7f7f7;
}
.multi-trips-using--block .block-blog-related__top {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  margin-bottom: clamp(2rem, 0.2857142857rem + 3.5714285714vw, 3.5rem);
}
@media (max-width: 61.98rem) {
  .multi-trips-using--block .block-blog-related__top {
    text-align: center;
  }
}
.multi-trips-using--block .block-blog-related__top h2 {
  margin-bottom: clamp(0rem, 4.2857142857rem + -4.7619047619vw, 2rem);
}
@media (max-width: 61.98rem) {
  .multi-trips-using--block .block-blog-related__top h2,
.multi-trips-using--block .block-blog-related__top .wp-block-buttons {
    width: 100%;
  }
}
@media (max-width: 61.98rem) {
  .multi-trips-using--block .block-blog-related__top .wp-block-buttons {
    justify-content: center;
    margin-top: 0;
  }
}
@media (max-width: 47.98rem) {
  .multi-trips-using--block .extend-your-trip__slide {
    width: 100%;
    margin-right: 0;
  }
}
.multi-trips-using--block .extend-your-trip__slide:nth-child(n+5) {
  display: flex !important;
}
.multi-trips-using--block .extend-your-trip__slide:nth-child(n+9) {
  display: none !important;
}
.multi-trips-using__con {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  width: calc(100% + 1.875rem);
  width: 100%;
}
@media (min-width: 36rem) {
  .multi-trips-using__con {
    grid-template-columns: repeat(2, 1fr);
    grid-column-gap: 0.9375rem;
  }
}
@media (min-width: 48rem) {
  .multi-trips-using__con {
    grid-template-columns: repeat(3, 1fr);
  }
}
@media (min-width: 62rem) {
  .multi-trips-using__con {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    grid-column-gap: 1.875rem;
  }
}
@media (min-width: 36rem) {
  .multi-trips-using__con .extend-your-trip__slide {
    margin-right: 0;
  }
}
@media (min-width: 62rem) {
  .multi-trips-using__con .extend-your-trip__slide {
    width: initial;
    max-width: 18.75rem;
    margin-right: 0;
  }
}
.multi-trips-using h2 {
  text-align: center;
}
.multi-trips-using .extend-your-trip__slide {
  margin-bottom: clamp(2rem, -0.2857142857rem + 4.7619047619vw, 4rem);
}
.multi-trips-using .extend-your-trip__slide:nth-child(n+5) {
  display: none;
}
.multi-trips-using .extend-your-trip__slide.active {
  display: flex !important;
}
.multi-trips-using__btn {
  text-align: center;
}
.multi-trips-using__btn.remove {
  display: none;
}
@media (max-width: 47.98rem) {
  .multi-trips-using__btn .c-btn {
    width: 100%;
  }
}
.multi-trips-using .icon-text {
  margin-bottom: 0.625rem;
}
.multi-trips-using .icon-text .icon {
  color: #000;
}