/* BE and FE - do not wrap styles in @media {} for BE use! */

.align-center {
  text-align: center;
}
.align-left {
  text-align: left;
}
.align-justify {
  text-align: justify;
}
.align-right {
  text-align: right;
}

.fa-rotate-45::before {
  -webkit-transform: rotate(45deg);
  -moz-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  -o-transform: rotate(45deg);
  transform: rotate(45deg);
  display: inline-block;
}

.fa-rotate-315::before {
  -webkit-transform: rotate(-45deg);
  -moz-transform: rotate(-45deg);
  -ms-transform: rotate(-45deg);
  -o-transform: rotate(-45deg);
  transform: rotate(-45deg);
  display: inline-block;
}

.fa:not(i) {
  display: inline;
  font-style: inherit;
  font-weight: inherit;
  font-family: inherit;
}

a > .fa {
  margin-right: 0.25em;
}

.fa:not(i)::before,
.link-download::before,
.link-whatsapp::before,
.link-mail::before {
  display: inline-block;
  font-family: FontAwesome;
  font-weight: normal;
  font-style: normal;
  padding-right: 0.25em;
  text-decoration: none;
}

.link-mail::before {
  content: "\f003";
}
.link-whatsapp::before {
  content: "\f232";
}

.link-download::before {
  content: "\f019";
}
.link-download[href$="pdf"]::before {
  content: "\f1c1";
}
.link-download[href$="docx"]::before,
.link-download[href$="doc"]::before {
  content: "\f1c2";
}
.link-download[href$="xlsx"]::before,
.link-download[href$="xls"]::before {
  content: "\f1c3";
}
.link-download[href$="pptx"]::before,
.link-download[href$="ppt"]::before {
  content: "\f1c4";
}

.link-download[href$="psd"]::before,
.link-download[href$="tiff"]::before,
.link-download[href$="tif"]::before,
.link-download[href$="bmp"]::before,
.link-download[href$="jpg"]::before,
.link-download[href$="png"]::before {
  content: "\f1c5";
}
.link-download[href$="zip"]::before {
  content: "\f1c6";
}
.link-download[href$="webm"]::before,
.link-download[href$="mov"]::before,
.link-download[href$="mp4"]::before {
  content: "\f1c8";
}
.link-external::after,
.link-external-blank::after {
  display: inline-block;
  font-family: FontAwesome;
  font-weight: normal;
  font-style: normal;
  padding-left: 0.25em;
  text-decoration: none;
}

.link-external::after,
.link-external-blank::after {
  content: "\f08e";
}

.p-big {
  font-size: 125%;
}
.p-tiny {
  font-size: 87.5%;
}

.c-bold {
  font-weight: 600 !important;
}
.c-bold.fa::before {
  font-weight: 600;
}

.c-tiny {
  font-size: 87.5%;
}

.c-important {
  color: rgb(204, 0, 0);
}

.icon {
  display: inline-block;
  width: 2.5rem;
  height: 2.5rem;
  background-size: 2.5rem 2.5rem;
  background-position: center center;
  color: rgba(0, 0, 0, 0);
  overflow: clip;
}

.icon-menu {
  background-image: url("../Img/icon_mainnav_menu_3x-compressor.png");
}

.icon-close {
  background-image: url("../Img/icon_mainnav_menu_close_3x-compressor.png");
}

.icon-search {
  background-image: url("../Img/icon_mainnav_search_white_3x-compressor.png");
}
.icon-gt {
  background-image: url("../Img/Google_Translate_Icon.png");
}

.icon-up {
  background-image: url("../Img/icon_accordeon_arrow_close_x3-compressor.png");
}

.icon-down {
  background-image: url("../Img/icon_accordeon_arrow_open_x3-compressor.png");
}

.icon-bus {
  background-image: url("../Img/icon_travel_bus_x3-compressor.png");
}

.icon-car {
  background-image: url("../Img/icon_travel_car_x3-compressor.png");
}

.icon-plane {
  background-image: url("../Img/icon_travel_plane_x3-compressor.png");
}

.icon-winter {
  background-image: url("../Img/icon_filter_winter_x3-compressor.png");
}

.icon-summer {
  background-image: url("../Img/icon_filter_summer_x3-compressor.png");
}

.page-stage .icon-calendar {
  background-image: url("../Img/icon_selector_calendar_x3-compressor.png");
}
.page-stage .icon-persons {
  background-image: url("../Img/icon_selector_persons_x3-compressor.png");
}

.page-stage .icon-find {
  background-image: url("../Img/icon_selector_find_x3-compressor.png");
}

/* icons with hover */
.icon-home {
  background-image: url("../Img/icon_jumpmark_accomodation_x3-compressor.png");
}
:focus > .icon-home,
:hover > .icon-home {
  background-image: url("../Img/icon_jumpmark_accomodation_hover_x3-compressor.png");
}

.icon-activity {
  background-image: url("../Img/icon_jumpmark_activities_x3-compressor.png");
}
:focus > .icon-activity,
:hover > .icon-activity {
  background-image: url("../Img/icon_jumpmark_activities_hover_x3-compressor.png");
}

.icon-cutlery {
  background-image: url("../Img/icon_jumpmark_food_x3-compressor.png");
}
:focus > .icon-cutlery,
:hover > .icon-cutlery {
  background-image: url("../Img/icon_jumpmark_food_hover_x3-compressor.png");
}

.icon-info {
  background-image: url("../Img/icon_jumpmark_info_x3-compressor.png");
}
:focus > .icon-info,
:hover > .icon-info {
  background-image: url("../Img/icon_jumpmark_info_hover_x3-compressor.png");
}

.icon-marker {
  background-image: url("../Img/icon_jumpmark_location_x3-compressor.png");
}
:focus > .icon-marker,
:hover > .icon-marker {
  background-image: url("../Img/icon_jumpmark_location_hover_x3-compressor.png");
}

.icon-case {
  background-image: url("../Img/icon_jumpmark_options_x3-compressor.png");
}
:focus > .icon-case,
:hover > .icon-case {
  background-image: url("../Img/icon_jumpmark_options_hover_x3-compressor.png");
}

.icon-factsheet {
  background-image: url("../Img/icon_jumpmark_factsheet_x3-compressor.png");
}
:focus > .icon-factsheet,
:hover > .icon-factsheet {
  background-image: url("../Img/icon_jumpmark_factsheet_hover_x3-compressor.png");
}

.btn-inner {
  display: flex;
  align-items: center;
}

.btn-inner .icon {
  width: 1em;
  height: 1.25em;
  margin-right: 0.5em;
}

/* (partial) bootstrap btn rules */

.btn {
  --btn-color-fg: var(--color-white);
  --btn-color-bg: var(--color-orange);
  --btn-color-border: var(--color-white);

  display: inline-block;
  text-align: center;
  white-space: normal;
  vertical-align: middle;
  user-select: none;
  color: var(--btn-color-fg) !important; /* needed bc bootstrap in cookiemanager */
  border: 2px solid;
  border-color: var(--btn-color-border) !important; /* needed bc bootstrap in cookiemanager */
  background-color: var(--btn-color-bg) !important; /* needed bc bootstrap in cookiemanager */
  background-clip: border-box;
  background-origin: border-box;
  padding: 0.5rem 1rem;
  font-size: max(14pt, 1em); /* needed to meet 3:1 contrast criterium */
  font-weight: bold; /* needed to meet 3:1 contrast criterium */
  line-height: 1.25;
  text-decoration: none;
  border-radius: 0.25rem;
  transition: all 0.2s ease-in-out;
  box-shadow: 5px 10px 15px rgba(0, 0, 0, 0.125);
}

.btn:focus,
.btn.focus,
.btn:hover,
.btn.hover,
.btn:active,
.btn.active {
  box-shadow: 2px 5px 10px rgba(0, 0, 0, 0.25);
}

.btn:focus,
.btn:hover {
  text-decoration: none;
}

.btn:focus,
.btn.focus {
  outline: 0;
}

.btn:disabled,
.btn.disabled {
  cursor: not-allowed;
  opacity: 0.65;
}

.btn:active,
.btn.active {
  background-image: none;
}

a.btn.disabled,
fieldset[disabled] a.btn {
  pointer-events: none;
}

.btn:disabled,
.btn.disabled {
  opacity: 0.25;
}

.ce-teaser .btn:disabled,
.ce-teaser .btn.disabled,
.ce-frame-inverted .btn:disabled,
.ce-frame-inverted .btn.disabled {
  opacity: 0.25;
}

.btn-primary {
  --btn-color-fg: var(--color-white);
  --btn-color-bg: var(--color-orange);
  --btn-color-border: var(--color-white);
}

.btn-primary:hover,
.btn-primary.hover,
.btn-primary:focus,
.btn-primary.focus,
.btn-primary:active,
.btn-primary.active {
  --btn-color-bg: var(--color-darkgray);
}

.btn-secondary {
  --btn-color-fg: var(--color-white);
  --btn-color-bg: var(--color-darkgray);
  --btn-color-border: var(--color-white);
}

.btn-secondary:hover,
.btn-secondary.hover,
.btn-secondary:focus,
.btn-secondary.focus,
.btn-secondary:active,
.btn-secondary.active {
  --btn-color-fg: var(--color-darkgray);
  --btn-color-bg: var(--color-lightgray);
  --btn-color-border: var(--color-darkgray);
}

.btn-link {
  font-weight: normal;
  color: var(--color-orange);
  box-shadow: none;
}

.btn-link:hover,
.btn-link.hover,
.btn-link:focus,
.btn-link.focus,
.btn-link:active,
.btn-link.active {
  text-decoration: underline !important;
  box-shadow: none;
}

.btn-link:disabled:focus,
.btn-link:disabled:hover {
  text-decoration: none;
}

/* .ce-teaser .btn-secondary,
.ce-frame-inverted .btn-secondary {
  color: var(--color-white);
  text-shadow: 0 0 1.25rem rgba(0, 0, 0, 0.25);
  background-color: rgba(0, 0, 0, 0.06);
  border-color: currentColor;
}

.ce-teaser .btn-secondary:hover,
.ce-teaser .btn-secondary.hover,
.ce-teaser .btn-secondary:focus,
.ce-teaser .btn-secondary.focus,
.ce-teaser .btn-secondary:active,
.ce-teaser .btn-secondary.active,
.ce-frame-inverted .btn-secondary:hover,
.ce-frame-inverted .btn-secondary.hover,
.ce-frame-inverted .btn-secondary:focus,
.ce-frame-inverted .btn-secondary.focus,
.ce-frame-inverted .btn-secondary:active,
.ce-frame-inverted .btn-secondary.active {
  color: var(--color-white);
  background-color: rgba(0, 0, 0, 0.17);
  background-image: linear-gradient(180deg, rgba(95, 95, 95, 1) 0%, rgba(76, 76, 76, 1) 100%);
  border-color: var(--color-white);
} */

.btn-expand {
  padding: 0;
  border-radius: 50%;
  width: calc(2.5rem + 4px);
  height: calc(2.5rem + 4px);
}

.btn-arrow {
  position: relative;
  padding: 1.25rem;
  padding-right: 7rem;
  width: 100%;
}

.btn-arrow::before {
  content: "";
  position: absolute;
  right: 0px;
  top: 0px;
  bottom: 0px;
  width: 100px;
  background-image: url("../Img/background_button_booking_x3.png");
  background-size: 100px 100%;
  border-radius: 4px;
}
.btn-arrow::after {
  content: "";
  position: absolute;
  right: 0;
  top: 0;
  bottom: 0;
  width: 90px;
  background-image: url("../Img/icon_button_booking_x3-compressor.png");
  background-repeat: no-repeat;
  background-position: center center;
  background-size: contain;
}

@media (min-width: 92.5em) {
  .btn-arrow {
    font-weight: bold;
    font-size: 112.5%;
  }
}