:root {
  --wpjpf-cubic-bezier: cubic-bezier(0.165, 0.84, 0.44, 1);
}

body:not(.admin-bar) {
  --wp-admin--admin-bar--height: 0;
}

html {
  margin-top: var(--wp-admin--admin-bar--height) !important;
}

#wpjpf-overlay {
  visibility: hidden;
  opacity: 0;
  position: fixed;
  width: 100vw;
  height: 100vh;
  inset: 0;
  z-index: 2147483647;
  pointer-events: none;
}

#wpjpf-overlay .wpjpf-departure {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.wpjpf-departure.slide-top {
  transform: translateY(100%);
}
.wpjpf-departure.slide-right {
  transform: translateX(-100%);
}
.wpjpf-departure.slide-bottom {
  transform: translateY(-100%);
}
.wpjpf-departure.slide-left {
  transform: translateX(100%);
}

.wpjpf-departure .cards-grid__item {
  opacity: 0;
}

#wpjpf-loader,
#wpjpf-custom-logo {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  transition: opacity 300ms;
}

/*************************************** EFFECTS ****************************/

/* FADE EFFECT */

.fade {
  height: 100%;
  width: 100%;
  opacity: 0;
  background-color: var(--color-option);
  visibility: hidden;
  transition: opacity var(--time-duration) var(--wpjpf-cubic-bezier);
}

.fade--in {
  visibility: visible;
  opacity: 1;
  transition: opacity var(--time-duration) var(--wpjpf-cubic-bezier);
}

.fade--out {
  visibility: hidden;
  opacity: 0;
  transition: opacity var(--time-duration) var(--wpjpf-cubic-bezier);
}

/* SLIDE EFFECT */

.slide-top {
  height: 100%;
  width: 100%;
  background-color: var(--color-option);
}

@keyframes slideTopIn {
  from {
    transform: translateY(100%);
  }
  to {
    transform: translateY(0);
  }
}

@keyframes slideTopOut {
  from {
    transform: translateY(0);
  }
  to {
    transform: translateY(-100%);
  }
}

.slide-right {
  height: 100%;
  width: 100%;
  background-color: var(--color-option);
}

@keyframes slideRightIn {
  from {
    transform: translateX(-100%);
  }
  to {
    transform: translateX(0);
  }
}

@keyframes slideRightOut {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(100%);
  }
}

.slide-bottom {
  height: 100%;
  width: 100%;
  background-color: var(--color-option);
}

@keyframes slideBottomIn {
  from {
    transform: translateY(-100%);
  }
  to {
    transform: translateY(0);
  }
}

@keyframes slideBottomOut {
  from {
    transform: translateY(0);
  }
  to {
    transform: translateY(100%);
  }
}

.slide-left {
  height: 100%;
  width: 100%;
  background-color: var(--color-option);
}

@keyframes slideLeftIn {
  from {
    transform: translateX(100%);
  }
  to {
    transform: translateX(0);
  }
}

@keyframes slideLeftOut {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(-100%);
  }
}

/* GLASSMORPHISM EFFECT */

.glassmorphism {
  height: 100%;
  width: 100%;
  background: var(--color-option);
  background: color-mix(in srgb, var(--color-option) 50%, transparent);
  background: rgb(from var(--color-option) r g b / 0.5);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  opacity: 0;
  visibility: hidden;
  transition: opacity 700ms var(--wpjpf-cubic-bezier);
}

.glassmorphism--in {
  visibility: visible;
  opacity: 1;
  transition: opacity var(--time-duration) var(--wpjpf-cubic-bezier);
}

.glassmorphism--out {
  visibility: hidden;
  opacity: 0;
  transition: opacity var(--time-duration) var(--wpjpf-cubic-bezier);
}

/* TILES EFFECT */

.tiles-h {
  height: 100%;
  width: 100%;
  display: flex;
  flex-direction: column;
}

.tiles-h__item {
  flex: 1;
  background-image: linear-gradient(
    to right,
    var(--color-option),
    var(--color-option)
  );
  background-size: 0% 100%;
  background-repeat: no-repeat;
  transition: var(--time-duration) var(--wpjpf-cubic-bezier);
}

.tiles-h__item--in {
  background-size: 100% 100%;
}

.tiles-h__item--out {
  background-size: 0% 100%;
}

.tiles-v {
  height: 100%;
  width: 100%;
  display: flex;
}

.tiles-v__item {
  flex: 1;
  background-image: linear-gradient(
    to right,
    var(--color-option),
    var(--color-option)
  );
  background-size: 100% 0%;
  background-repeat: no-repeat;
  transition: var(--time-duration) var(--wpjpf-cubic-bezier);
}

.tiles-v__item--in {
  background-size: 100% 100%;
}

.tiles-v__item--out {
  background-size: 100% 0%;
}

/* CURTAINS EFFECT */

.curtains {
  height: 100%;
  width: 100%;
  display: flex;
}

.curtains__item {
  flex: 1;
  background-image: linear-gradient(
    to right,
    var(--color-option),
    var(--color-option)
  );
  background-size: 0% 100%;
  background-repeat: no-repeat;
  transition: var(--time-duration) var(--wpjpf-cubic-bezier);
}

.curtains__item--in {
  background-size: 100% 100%;
}

.curtains__item--out {
  background-size: 0% 100%;
}

/* ZOOM CIRCLE EFFECT */

.zoom-circle {
  position: absolute;
  inset: 0;
  background-color: var(--color-option);
  clip-path: circle(0% at 50% 50%);
}

.zoom-circle--out {
  clip-path: circle(100% at 50% 50%);
}

@keyframes zoomCircleIn {
  to {
    clip-path: circle(100% at 50% 50%);
  }
}

@keyframes zoomCircleOut {
  to {
    clip-path: circle(0% at 50% 50%);
  }
}

/* JAW DIAG */

.jaw-diag {
  position: absolute;
  inset: 0;
}

.jaw-diag__item {
  position: absolute;
  inset: 0;
  background-color: var(--color-option);
  transition: var(--time-duration) var(--wpjpf-cubic-bezier);
}

.jaw-diag__item:first-child {
  clip-path: polygon(0 100%, 0 0, 101% 100%);
}

.jaw-diag__item:last-child {
  clip-path: polygon(100% 0, 0 0, 100% 100%);
}

.jaw-diag.active .jaw-diag__item:first-child {
  clip-path: polygon(0 100%, 0 100%, 0 100%);
}

.jaw-diag.active .jaw-diag__item:last-child {
  clip-path: polygon(100% 0, 100% 0, 100% 0);
}

/* MULTIPLES SLIDES */

.multiple-slides-h,
.multiple-slides-v {
  position: relative;
  height: 100%;
  width: 100%;
}

.multiple-slides-h__item,
.multiple-slides-v__item {
  position: absolute;
  inset: 0;
  background-image: linear-gradient(
    to right,
    var(--color-option),
    var(--color-option)
  );
  background-repeat: no-repeat;
  transition: var(--time-duration) ease;
  filter: brightness(33%);
}

.multiple-slides-h__item {
  background-size: 0 100%;
}

.multiple-slides-v__item {
  background-size: 100% 0;
}

.multiple-slides-h__item:nth-child(2),
.multiple-slides-v__item:nth-child(2) {
  filter: brightness(66%);
}

.multiple-slides-h__item:nth-child(3),
.multiple-slides-v__item:nth-child(3) {
  filter: brightness(1);
}

.multiple-slides-h__item--in {
  background-size: 100% 100%;
}

.multiple-slides-v__item--in {
  background-size: 100% 100%;
}

.multiple-slides-h__item--out {
  background-size: 0 100%;
}

.multiple-slides-v__item--out {
  background-size: 100% 0;
}

/* CARDS GRID */

.cards-grid {
  height: 100%;
  width: 100%;
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  grid-template-rows: repeat(6, 1fr);
}

.cards-grid__item {
  transition: calc(var(--time-duration) / 32) var(--wpjpf-cubic-bezier);
  background-color: var(--color-option);
}

.cards-grid__item--in {
  opacity: 1;
}
.cards-grid__item--out {
  opacity: 0;
}

/* Body specials effect */

body.fade-direction {
  position: relative;
  opacity: 0;
  transition: var(--time-duration) var(--wpjpf-cubic-bezier);
}

body.fade-top {
  top: -300px;
}

body.fade-right {
  right: -300px;
}

body.fade-bottom {
  bottom: -300px;
}

body.fade-left {
  left: -300px;
}

body.fade-direction--in {
  opacity: 1;
  transition: var(--time-duration) var(--wpjpf-cubic-bezier);
}

body.fade-direction--in--top {
  top: 0;
}
body.fade-direction--in--right {
  right: 0;
}
body.fade-direction--in--bottom {
  bottom: 0;
}
body.fade-direction--in--left {
  left: 0;
}

/******************************** LOGO *********************************/

#wpjpf-custom-logo {
  transition: opacity 300ms;
}

#wpjpf-custom-logo img {
  max-width: 300px;
}

/******************************** LOADERS ******************************/

.spinner-basic {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  border: 9px solid var(--wpjpf-loader-color);
  animation:
    SpinnerBasic 0.8s infinite linear alternate,
    SpinnerBasic2 1.6s infinite linear;
}

@keyframes SpinnerBasic {
  0% {
    clip-path: polygon(50% 50%, 0 0, 50% 0%, 50% 0%, 50% 0%, 50% 0%, 50% 0%);
  }

  12.5% {
    clip-path: polygon(
      50% 50%,
      0 0,
      50% 0%,
      100% 0%,
      100% 0%,
      100% 0%,
      100% 0%
    );
  }

  25% {
    clip-path: polygon(
      50% 50%,
      0 0,
      50% 0%,
      100% 0%,
      100% 100%,
      100% 100%,
      100% 100%
    );
  }

  50% {
    clip-path: polygon(
      50% 50%,
      0 0,
      50% 0%,
      100% 0%,
      100% 100%,
      50% 100%,
      0% 100%
    );
  }

  62.5% {
    clip-path: polygon(
      50% 50%,
      100% 0,
      100% 0%,
      100% 0%,
      100% 100%,
      50% 100%,
      0% 100%
    );
  }

  75% {
    clip-path: polygon(
      50% 50%,
      100% 100%,
      100% 100%,
      100% 100%,
      100% 100%,
      50% 100%,
      0% 100%
    );
  }

  100% {
    clip-path: polygon(
      50% 50%,
      50% 100%,
      50% 100%,
      50% 100%,
      50% 100%,
      50% 100%,
      0% 100%
    );
  }
}

@keyframes SpinnerBasic2 {
  0% {
    transform: scaleY(1) rotate(0deg);
  }

  49.99% {
    transform: scaleY(1) rotate(135deg);
  }

  50% {
    transform: scaleY(-1) rotate(0deg);
  }

  100% {
    transform: scaleY(-1) rotate(-135deg);
  }
}

.spinner-2 {
  width: 56px;
  height: 56px;
  position: relative;
  backface-visibility: hidden;
}

.spinner-2 span {
  left: 22px;
  top: 0px;
  position: absolute;
  animation: Spinner2 linear 1s infinite;
  background: var(--wpjpf-loader-color);
  width: 6px;
  height: 12px;
  border-radius: 6px / 12px;
  transform-origin: 3px 28px;
  box-sizing: border-box;
}

.spinner-2 span:nth-child(1) {
  transform: rotate(0deg);
  animation-delay: -0.9166666666666666s;
}
.spinner-2 span:nth-child(2) {
  transform: rotate(30deg);
  animation-delay: -0.8333333333333334s;
}
.spinner-2 span:nth-child(3) {
  transform: rotate(60deg);
  animation-delay: -0.75s;
}
.spinner-2 span:nth-child(4) {
  transform: rotate(90deg);
  animation-delay: -0.6666666666666666s;
}
.spinner-2 span:nth-child(5) {
  transform: rotate(120deg);
  animation-delay: -0.5833333333333334s;
}
.spinner-2 span:nth-child(6) {
  transform: rotate(150deg);
  animation-delay: -0.5s;
}
.spinner-2 span:nth-child(7) {
  transform: rotate(180deg);
  animation-delay: -0.4166666666666667s;
}
.spinner-2 span:nth-child(8) {
  transform: rotate(210deg);
  animation-delay: -0.3333333333333333s;
}
.spinner-2 span:nth-child(9) {
  transform: rotate(240deg);
  animation-delay: -0.25s;
}
.spinner-2 span:nth-child(10) {
  transform: rotate(270deg);
  animation-delay: -0.16666666666666666s;
}
.spinner-2 span:nth-child(11) {
  transform: rotate(300deg);
  animation-delay: -0.08333333333333333s;
}
.spinner-2 span:nth-child(12) {
  transform: rotate(330deg);
  animation-delay: 0s;
}

@keyframes Spinner2 {
  0% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}

.spinner-3 {
  position: relative;
  width: 15.7px;
  height: 15.7px;
}

.spinner-3 span {
  animation: Spinner3 1.875s infinite backwards;
  background-color: var(--wpjpf-loader-color);
  border-radius: 50%;
  height: 100%;
  position: absolute;
  width: 100%;
}

.spinner-3 span:nth-child(1) {
  animation-delay: 0.15s;
  background-color: var(--wpjpf-loader-color);
  background-color: color-mix(
    in srgb,
    var(--wpjpf-loader-color) 90%,
    transparent
  );
}

.spinner-3 span:nth-child(2) {
  animation-delay: 0.3s;
  background-color: var(--wpjpf-loader-color);
  background-color: color-mix(
    in srgb,
    var(--wpjpf-loader-color) 80%,
    transparent
  );
}

.spinner-3 span:nth-child(3) {
  animation-delay: 0.45s;
  background-color: var(--wpjpf-loader-color);
  background-color: color-mix(
    in srgb,
    var(--wpjpf-loader-color) 70%,
    transparent
  );
}

.spinner-3 span:nth-child(4) {
  animation-delay: 0.6s;
  background-color: var(--wpjpf-loader-color);
  background-color: color-mix(
    in srgb,
    var(--wpjpf-loader-color) 60%,
    transparent
  );
}

.spinner-3 span:nth-child(5) {
  animation-delay: 0.75s;
  background-color: var(--wpjpf-loader-color);
  background-color: color-mix(
    in srgb,
    var(--wpjpf-loader-color) 50%,
    transparent
  );
}

@keyframes Spinner3 {
  0% {
    transform: rotate(0deg) translateY(-200%);
  }

  60%,
  100% {
    transform: rotate(360deg) translateY(-200%);
  }
}

.spinner-4 {
  width: 56px;
  height: 56px;
  display: grid;
  border: 5px solid transparent;
  border-radius: 50%;
  border-color: var(--wpjpf-loader-color) transparent;
  border-color: color-mix(in srgb, var(--wpjpf-loader-color) 20%, transparent)
    transparent;
  animation: Spinner4 1s infinite linear;
}

.spinner-4::before,
.spinner-4::after {
  content: "";
  grid-area: 1/1;
  margin: 2.2px;
  border: inherit;
  border-radius: 50%;
}

.spinner-4::before {
  border-color: var(--wpjpf-loader-color) #0000;
  animation: inherit;
  animation-duration: 0.5s;
  animation-direction: reverse;
}

.spinner-4::after {
  margin: 9px;
}

@keyframes Spinner4 {
  100% {
    transform: rotate(1turn);
  }
}

.dots-basic {
  width: 56px;
  height: 13.4px;
  background: radial-gradient(
      circle closest-side,
      var(--wpjpf-loader-color) 90%,
      #0000
    )
    0 0/33% 100% space;
  clip-path: inset(0 100% 0 0);
  animation: DotsBasic 1s steps(4) infinite;
}

@keyframes DotsBasic {
  to {
    clip-path: inset(0 -34% 0 0);
  }
}

.dots-2 {
  position: relative;
  width: 56px;
  height: 56px;
  display: inline-block;
  overflow: hidden;
  background: none;
}

.dots-2::after {
  content: "";
  position: absolute;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: var(--wpjpf-loader-color);
  left: 15px;
  top: 8px;
  animation: Dots2 1s linear infinite;
}

@keyframes Dots2 {
  0%,
  100% {
    animation-timing-function: cubic-bezier(0.45, 0, 0.9, 0.55);
  }
  0% {
    transform: translate(0, 0);
  }
  50% {
    transform: translate(0, 18px);
    animation-timing-function: cubic-bezier(0, 0.45, 0.55, 0.9);
  }
  100% {
    transform: translate(0, 0);
  }
}

.dots-3 {
  width: 56px;
  height: 27px;
  background:
    radial-gradient(circle closest-side, var(--wpjpf-loader-color) 90%, #0000)
      0% 50%,
    radial-gradient(circle closest-side, var(--wpjpf-loader-color) 90%, #0000)
      50% 50%,
    radial-gradient(circle closest-side, var(--wpjpf-loader-color) 90%, #0000)
      100% 50%;
  background-size: calc(100% / 3) 13.4px;
  background-repeat: no-repeat;
  animation: Dots3 1s infinite linear;
}

@keyframes Dots3 {
  20% {
    background-position:
      0% 0%,
      50% 50%,
      100% 50%;
  }

  40% {
    background-position:
      0% 100%,
      50% 0%,
      100% 50%;
  }

  60% {
    background-position:
      0% 50%,
      50% 100%,
      100% 0%;
  }

  80% {
    background-position:
      0% 50%,
      50% 50%,
      100% 100%;
  }
}

.dots-4 {
  width: 15px;
  height: 15px;
  border-radius: 50%;
  clip-path: inset(-50px);
  color: var(--wpjpf-loader-color);
  box-shadow:
    -24px 18px,
    0px 18px,
    24px 18px;
  transform: translateY(-16px);
  animation: Dots4 1s infinite linear;
}

@keyframes Dots4 {
  0% {
    box-shadow:
      -75px 18px,
      -75px 18px,
      -75px 18px;
  }
  15% {
    box-shadow:
      -75px 18px,
      -75px 18px,
      24px 18px;
  }

  30% {
    box-shadow:
      -75px 18px,
      0px 18px,
      24px 18px;
  }

  40%,
  60% {
    box-shadow:
      -24px 18px,
      0px 18px,
      24px 18px;
  }

  70% {
    box-shadow:
      -24px 18px,
      0px 18px,
      75px 18px;
  }

  85% {
    box-shadow:
      -24px 18px,
      75px 18px,
      75px 18px;
  }

  100% {
    box-shadow:
      75px 16.8px,
      75px 16.8px,
      75px 16.8px;
  }
}

.bars-basic {
  width: 50.4px;
  height: 67.2px;
  --color: linear-gradient(var(--wpjpf-loader-color) 0 0);
  background:
    var(--color) 0% 100%,
    var(--color) 50% 100%,
    var(--color) 100% 100%;
  background-size: 10.1px 65%;
  background-repeat: no-repeat;
  animation: BarsBasic 1s infinite linear;
}

@keyframes BarsBasic {
  20% {
    background-position:
      0% 50%,
      50% 100%,
      100% 100%;
  }

  40% {
    background-position:
      0% 0%,
      50% 50%,
      100% 100%;
  }

  60% {
    background-position:
      0% 100%,
      50% 0%,
      100% 50%;
  }

  80% {
    background-position:
      0% 100%,
      50% 100%,
      100% 0%;
  }
}

.bars-2 {
  width: 56px;
  height: 56px;
  --gradient: linear-gradient(var(--wpjpf-loader-color) 0 0);
  background: var(--gradient), var(--gradient), var(--gradient);
  background-repeat: no-repeat;
  animation:
    Bars2 1s infinite,
    Bars2Bis 1s infinite;
}

@keyframes Bars2 {
  0%,
  100% {
    background-size: 10px 100%;
  }

  33%,
  66% {
    background-size: 10px 40%;
  }
}

@keyframes Bars2Bis {
  0%,
  33% {
    background-position:
      0 0,
      50% 100%,
      100% 100%;
  }

  66%,
  100% {
    background-position:
      100% 0,
      0 100%,
      50% 100%;
  }
}

.bars-3 {
  width: 50px;
  height: 50px;
  --gradient: linear-gradient(var(--wpjpf-loader-color) 0 0);
  background:
    var(--gradient) 0 0,
    var(--gradient) 50% 50%,
    var(--gradient) 100% 100%;
  background-repeat: no-repeat;
  animation: Bars3 1s infinite alternate;
}

@keyframes Bars3 {
  0%,
  10% {
    background-size: 10px 100%;
  }

  50% {
    background-size: 10px 10px;
  }

  90%,
  100% {
    background-size: 100% 10px;
  }
}

.bars-4 {
  width: 56px;
  height: 56px;
  background:
    linear-gradient(
        #0000 calc(1 * 100% / 6),
        var(--wpjpf-loader-color) 0 calc(3 * 100% / 6),
        #0000 0
      )
      left bottom,
    linear-gradient(
        #0000 calc(2 * 100% / 6),
        var(--wpjpf-loader-color) 0 calc(4 * 100% / 6),
        #0000 0
      )
      center bottom,
    linear-gradient(
        #0000 calc(3 * 100% / 6),
        var(--wpjpf-loader-color) 0 calc(5 * 100% / 6),
        #0000 0
      )
      right bottom;
  background-size: 10.1px 600%;
  background-repeat: no-repeat;
  animation: Bars4 1.5s infinite linear;
}

@keyframes Bars4 {
  100% {
    background-position:
      left top,
      center top,
      right top;
  }
}

.progressbar-basic {
  width: 100px;
  height: 20px;
  background: linear-gradient(var(--wpjpf-loader-color) 0 0) left/0% 100%
    no-repeat var(--wpjpf-loader-color);
  background: linear-gradient(var(--wpjpf-loader-color) 0 0) left/0% 100%
    no-repeat color-mix(in srgb, var(--wpjpf-loader-color) 20%, transparent);
  animation: ProgressBarBasicAnimation 2s infinite linear;
}

@keyframes ProgressBarBasicAnimation {
  100% {
    background-size: 100% 100%;
  }
}

.progressbar-2 {
  width: 100px;
  height: 20px;
  border-radius: 20px;
  color: var(--wpjpf-loader-color);
  border: 2px solid;
  position: relative;
}

.progressbar-2::before {
  content: "";
  position: absolute;
  margin: 2px;
  inset: 0 100% 0 0;
  border-radius: inherit;
  background: currentColor;
  animation: ProgressBar2 2s infinite linear;
}

@keyframes ProgressBar2 {
  100% {
    inset: 0;
  }
}

.pulse-basic {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--wpjpf-loader-color);
  box-shadow: 0 0 0 0 var(--wpjpf-loader-color);
  animation: PulseBasicAnimation 1s infinite;
}

@keyframes PulseBasicAnimation {
  100% {
    box-shadow: 0 0 0 30px #0000;
  }
}

.pulse-2 {
  position: relative;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--wpjpf-loader-color);
  box-shadow: 0 0 0 0 var(--wpjpf-loader-color);
  box-shadow: 0 0 0 0
    color-mix(in srgb, var(--wpjpf-loader-color) 50%, transparent);
  animation: Pulse2 1.5s infinite linear;
}

.pulse-2:before,
.pulse-2:after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  box-shadow: 0 0 0 0 var(--wpjpf-loader-color);
  box-shadow: 0 0 0 0
    color-mix(in srgb, var(--wpjpf-loader-color) 50%, transparent);
  animation: inherit;
  animation-delay: -0.5s;
}

.pulse-2:after {
  animation-delay: -1s;
}

@keyframes Pulse2 {
  100% {
    box-shadow: 0 0 0 45px #0000;
  }
}