{"id":983,"date":"2026-02-26T12:41:24","date_gmt":"2026-02-26T12:41:24","guid":{"rendered":"https:\/\/travelonhorseback.com\/?page_id=983"},"modified":"2026-03-31T21:34:47","modified_gmt":"2026-03-31T21:34:47","slug":"boeken","status":"publish","type":"page","link":"https:\/\/travelonhorseback.com\/en\/boeken\/","title":{"rendered":"Book"},"content":{"rendered":"\t\t<div data-elementor-type=\"wp-page\" data-elementor-id=\"983\" class=\"elementor elementor-983\" data-elementor-post-type=\"page\">\n\t\t\t\t<div class=\"elementor-element elementor-element-89b5a44 e-con-full e-flex e-con e-parent\" data-id=\"89b5a44\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-cb2d642 elementor-widget elementor-widget-shortcode\" data-id=\"cb2d642\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"shortcode.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<div class=\"elementor-shortcode\"><style>\n.toh-scroll-wrap {\n  position: relative;\n  width: 100%;\n  height: calc(100vh - 116.95px);\n  overflow: hidden;\n  background: #00112D;\n}\n\n\/* \u2500\u2500\u2500 Progress bar \u2500\u2500\u2500 *\/\n.toh-progress {\n  position: relative;\n  width: 100%;\n  height: 3px;\n  margin-top: 12px; \n  z-index: 60; \n  background: rgba(255, 255, 255, 0.08);\n}\n\n.toh-progress-bar {\n  position: relative;\n  height: 100%;\n  width: 0%;\n  background: #FF4040;\n  transition: width 0.05s linear;\n}\n\n\/* Airplane Icon *\/\n.toh-plane-icon {\n  position: absolute;\n  right: -12px;\n  top: 50%; \n  transform: translateY(-50%);\n  color: #FF4040;\n  font-size: 18px;\n  z-index: 61; \n}\n\n\/* \u2500\u2500\u2500 Title: below bar \u2500\u2500\u2500 *\/\n.toh-scroll-header {\n  text-align: centre;\n  padding: 50px 0 8px;\n}\n\n.toh-scroll-header h1 {\n  font-family: \"Lato\", sans-serif !important;\n  font-size: 38px !important;\n  font-weight: 700 !important;\n  text-transform: none !important;\n  color: #FFFFFF !important;\n  margin: 0 !important;\n  padding: 0 !important;\n  line-height: 1 !important;\n}\n\n\/* \u2500\u2500\u2500 Dots with arrows \u2500\u2500\u2500 *\/\n.toh-dots {\n  position: fixed;\n  left: 24px;\n  top: calc(60%); \n  transform: translateY(-50%);\n  display: flex;\n  flex-direction: column;\n  align-items: centre;\n  gap: 10px;\n  z-index: 40;\n}\n\n.toh-dot-arrow {\n  width: 20px;\n  height: 16px;\n  display: flex;\n  align-items: centre;\n  justify-content: centre;\n  cursor: pointer;\n  opacity: 0.45;\n  transition: opacity 0.3s ease, transform 0.2s ease;\n  color: #FF4040;\n  font-size: 11px;\n  user-select: none;\n  -webkit-user-select: none;\n}\n\n.toh-dot-arrow:hover {\n  opacity: 1;\n  transform: scale(1.25);\n}\n\n.toh-dot-arrow.disabled {\n  opacity: 0.15;\n  cursor: default;\n  pointer-events: none;\n}\n\n.toh-dot {\n  width: 8px;\n  height: 8px;\n  border-radius: 50%;\n  border: 1.5px solid #FF4040;\n  background: transparent;\n  transition: background 0.3s ease, transform 0.3s ease;\n  cursor: pointer;\n  position: relative;\n}\n\n.toh-dot:hover {\n  transform: scale(1.5);\n}\n\n.toh-dot.active {\n  background: #FF4040;\n  transform: scale(1.35);\n}\n\n.toh-dot.active:hover {\n  transform: scale(1.5);\n}\n\n\/* \u2500\u2500\u2500 Main content area \u2500\u2500\u2500 *\/\n.toh-scroll-content {\n  display: flex;\n  flex-direction: row;\n  align-items: stretch;\n  max-width: 60%;\n  margin: 0 auto;\n  height: calc(100vh - 116.95px - 65px); \n  transform: translateY(-80px); \n}\n\n\/* \u2500\u2500\u2500 Left: animation \u2500\u2500\u2500 *\/\n.toh-scroll-left {\n  position: relative;\n  width: 50%;\n  display: flex;\n  align-items: centre;\n  justify-content: centre;\n}\n\n.toh-animation-area {\n  position: relative;\n  width: 100%;\n  height: 100%;\n  display: flex;\n  align-items: centre;\n  justify-content: centre;\n  margin-top: -40px; \n}\n\n.toh-frame-wrapper {\n  position: absolute;\n  inset: 0;\n  display: flex;\n  align-items: centre;\n  justify-content: centre;\n  pointer-events: none;\n  will-change: opacity, transform;\n}\n\n.toh-frame-wrapper img {\n  max-width: 85%;\n  max-height: 65vh;\n  width: auto;\n  height: auto;\n}\n\n\/* \u2500\u2500\u2500 Right: text \u2500\u2500\u2500 *\/\n.toh-scroll-right {\n  width: 50%;\n  display: flex;\n  align-items: centre;\n  justify-content: flex-start;\n  position: relative;\n}\n\n.toh-text-block {\n  position: absolute;\n  inset: 0;\n  display: flex;\n  flex-direction: column;\n  justify-content: centre;\n  padding: 0 5%;\n  opacity: 0;\n  transform: translateY(12px);\n  transition: opacity 0.4s ease, transform 0.4s ease;\n  pointer-events: none;\n}\n\n.toh-text-block.active {\n  opacity: 1;\n  transform: translateY(0);\n  pointer-events: auto;\n}\n\n.toh-step-title {\n  font-family: \"TOH\", Sans-serif !important;\n  font-size: 32px !important;\n  font-weight: 500 !important;\n  text-transform: uppercase !important;\n  color: #FFFFFF !important;\n  margin: 0 0 10px 0 !important;\n  line-height: 1.3 !important;\n}\n\n.toh-step-text {\n  font-family: \"Lato\", sans-serif !important;\n  font-size: 16px !important;\n  font-weight: 400 !important;\n  line-height: 1.7 !important;\n  color: rgba(255, 255, 255, 0.95) !important;\n  text-transform: none !important;\n  margin: 0 !important;\n}\n\n\/* \u2500\u2500\u2500 Invisible scroll driver \u2500\u2500\u2500 *\/\n.toh-scroll-driver {\n  position: absolute;\n  top: 0;\n  left: 0;\n  width: 100%;\n  height: 100%;\n  overflow-y: scroll;\n  z-index: 30;\n  -ms-overflow-style: none;\n  scrollbar-width: none;\n}\n\n.toh-scroll-driver::-webkit-scrollbar {\n  display: none;\n}\n\n.toh-scroll-driver-inner {\n  height: 800vh;\n  pointer-events: none;\n}\n\n\/* \u2500\u2500\u2500 Cloud overlay \u2500\u2500\u2500 *\/\n.toh-cloud-overlay {\n  position: absolute;\n  inset: -50px;\n  transform: translate(-30px, 180px);\n  pointer-events: none;\n  z-index: 100;\n  opacity: 0;\n}\n\n.toh-cloud-piece {\n  position: absolute;\n  transition: none;\n  will-change: transform, opacity, filter;\n}\n\n.toh-cloud-piece svg {\n  width: 100%;\n  height: 100%;\n  display: block;\n}\n\n.toh-cp-1 { width: 372px; height: 207px; top: 10%; left: 15%; }\n.toh-cp-2 { width: 414px; height: 186px; top: 5%; right: 15%; }\n.toh-cp-3 { width: 331px; height: 207px; top: 35%; left: 20%; }\n.toh-cp-4 { width: 455px; height: 248px; top: 30%; right: 10%; }\n.toh-cp-5 { width: 497px; height: 228px; top: 20%; left: 5%; }\n.toh-cp-6 { width: 414px; height: 207px; top: 15%; right: 0%; }\n.toh-cp-7 { width: 331px; height: 166px; top: 25%; left: 30%; }\n.toh-cp-8 { width: 393px; height: 186px; top: 40%; right: 25%; }\n\n\/* \u2500\u2500\u2500 MOBILE \u2500\u2500\u2500 *\/\n@media (max-width: 768px) {\n  .toh-scroll-wrap { \n    height: calc(100vh - 116.95px); \n  }\n  \n  .toh-scroll-header {\n    padding: 30px 0 8px;\n  }\n\n  .toh-scroll-header h1 {\n    font-size: 28px !important;\n  }\n\n  .toh-scroll-content {\n    max-width: 100%;\n    flex-direction: column;\n    height: calc(100vh - 116.95px - 70px);\n    transform: translateY(0);\n  }\n\n  .toh-scroll-left,\n  .toh-scroll-right {\n    width: 100%;\n    height: 50%;\n  }\n\n  .toh-animation-area {\n    margin-top: 0; \n  }\n  \n  .toh-frame-wrapper img {\n    max-width: 90%;\n    max-height: 35vh; \n  }\n\n  .toh-text-block {\n    padding: 0 20px 0 45px;\n  }\n\n  .toh-step-title {\n    font-size: 24px !important;\n  }\n\n  .toh-step-text {\n    font-size: 15px !important;\n  }\n\n  .toh-dots { \n    top: 50%;\n    left: 12px; \n    transform: translateY(-50%) scale(0.9);\n  }\n\n  .toh-cloud-overlay {\n    transform: translate(-20px, 30px) scale(0.9);\n  }\n}\n<\/style>\n\n<div class=\"toh-scroll-wrap\">\n  <div class=\"toh-progress\">\n    <div class=\"toh-progress-bar\" id=\"tohProgress\">\n      <i class=\"fas fa-plane toh-plane-icon\"><\/i>\n    <\/div>\n  <\/div>\n\n  <div class=\"toh-scroll-header\">\n    <h1>How does booking work?<\/h1>\n  <\/div>\n\n  <div class=\"toh-dots\" id=\"tohDots\">\n    <div class=\"toh-dot-arrow\" id=\"tohArrowUp\"><i class=\"fas fa-chevron-up\"><\/i><\/div>\n    <div class=\"toh-dot\" data-step=\"0\"><\/div>\n    <div class=\"toh-dot\" data-step=\"1\"><\/div>\n    <div class=\"toh-dot\" data-step=\"2\"><\/div>\n    <div class=\"toh-dot\" data-step=\"3\"><\/div>\n    <div class=\"toh-dot\" data-step=\"4\"><\/div>\n    <div class=\"toh-dot\" data-step=\"5\"><\/div>\n    <div class=\"toh-dot\" data-step=\"6\"><\/div>\n    <div class=\"toh-dot-arrow\" id=\"tohArrowDown\"><i class=\"fas fa-chevron-down\"><\/i><\/div>\n  <\/div>\n\n  <div class=\"toh-scroll-content\">\n    <div class=\"toh-scroll-left\">\n      <div class=\"toh-animation-area\">\n        <div class=\"toh-frame-wrapper\" id=\"tohFw1\" style=\"opacity:1\"><img decoding=\"async\" src=\"https:\/\/travelonhorseback.com\/wp-content\/uploads\/2025\/06\/step1.svg\" alt=\"Step 1\" loading=\"lazy\" \/><\/div>\n        <div class=\"toh-frame-wrapper\" id=\"tohFw2\" style=\"opacity:0\"><img decoding=\"async\" src=\"https:\/\/travelonhorseback.com\/wp-content\/uploads\/2025\/06\/step2.svg\" alt=\"Step 2\" loading=\"lazy\" \/><\/div>\n        <div class=\"toh-frame-wrapper\" id=\"tohFw3\" style=\"opacity:0\"><img decoding=\"async\" src=\"https:\/\/travelonhorseback.com\/wp-content\/uploads\/2025\/06\/step3.svg\" alt=\"Step 3\" loading=\"lazy\" \/><\/div>\n        <div class=\"toh-frame-wrapper\" id=\"tohFw4\" style=\"opacity:0; margin-top:25px;\"><img decoding=\"async\" src=\"https:\/\/travelonhorseback.com\/wp-content\/uploads\/2025\/06\/step4.svg\" alt=\"Step 4\" loading=\"lazy\" \/><\/div>\n        <div class=\"toh-frame-wrapper\" id=\"tohFw5\" style=\"opacity:0\"><img decoding=\"async\" src=\"https:\/\/travelonhorseback.com\/wp-content\/uploads\/2025\/06\/step5.svg\" alt=\"Step 5\" loading=\"lazy\" \/><\/div>\n        <div class=\"toh-frame-wrapper\" id=\"tohFw6\" style=\"opacity:0\"><img decoding=\"async\" src=\"https:\/\/travelonhorseback.com\/wp-content\/uploads\/2025\/06\/step6.svg\" alt=\"Step 6\" loading=\"lazy\" \/><\/div>\n        <div class=\"toh-frame-wrapper\" id=\"tohFw7\" style=\"opacity:0\"><img decoding=\"async\" src=\"https:\/\/travelonhorseback.com\/wp-content\/uploads\/2025\/06\/step7.svg\" alt=\"Step 7\" loading=\"lazy\" \/><\/div>\n\n        <div class=\"toh-cloud-overlay\" id=\"tohClouds\">\n          <div class=\"toh-cloud-piece toh-cp-1\"><svg viewBox=\"5 45 190 120\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\"><rect x=\"40\" y=\"110\" width=\"120\" height=\"30\" rx=\"15\" fill=\"#FFFFFF\"\/><circle cx=\"80\" cy=\"100\" r=\"30\" fill=\"#FFFFFF\"\/><circle cx=\"130\" cy=\"105\" r=\"25\" fill=\"#FFFFFF\"\/><\/svg><\/div>\n          <div class=\"toh-cloud-piece toh-cp-2\"><svg viewBox=\"195 55 210 110\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\"><rect x=\"230\" y=\"115\" width=\"140\" height=\"25\" rx=\"12.5\" fill=\"#F0F4F8\"\/><circle cx=\"270\" cy=\"110\" r=\"20\" fill=\"#F0F4F8\"\/><circle cx=\"300\" cy=\"105\" r=\"25\" fill=\"#F0F4F8\"\/><circle cx=\"335\" cy=\"110\" r=\"18\" fill=\"#F0F4F8\"\/><\/svg><\/div>\n          <div class=\"toh-cloud-piece toh-cp-3\"><svg viewBox=\"15 245 170 120\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\"><rect x=\"50\" y=\"310\" width=\"100\" height=\"30\" rx=\"15\" fill=\"#F9F9F9\"\/><circle cx=\"110\" cy=\"295\" r=\"30\" fill=\"#F9F9F9\"\/><\/svg><\/div>\n          <div class=\"toh-cloud-piece toh-cp-4\"><svg viewBox=\"205 225 190 140\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\"><rect x=\"240\" y=\"310\" width=\"120\" height=\"30\" rx=\"15\" fill=\"#FFFFFF\"\/><circle cx=\"265\" cy=\"305\" r=\"20\" fill=\"#FFFFFF\"\/><circle cx=\"300\" cy=\"285\" r=\"35\" fill=\"#FFFFFF\"\/><circle cx=\"340\" cy=\"300\" r=\"25\" fill=\"#FFFFFF\"\/><\/svg><\/div>\n          <div class=\"toh-cloud-piece toh-cp-5\"><svg viewBox=\"5 45 190 120\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\"><rect x=\"40\" y=\"110\" width=\"120\" height=\"30\" rx=\"15\" fill=\"#F0F4F8\"\/><circle cx=\"80\" cy=\"100\" r=\"30\" fill=\"#F0F4F8\"\/><circle cx=\"130\" cy=\"105\" r=\"25\" fill=\"#F0F4F8\"\/><\/svg><\/div>\n          <div class=\"toh-cloud-piece toh-cp-6\"><svg viewBox=\"205 225 190 140\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\"><rect x=\"240\" y=\"310\" width=\"120\" height=\"30\" rx=\"15\" fill=\"#F9F9F9\"\/><circle cx=\"265\" cy=\"305\" r=\"20\" fill=\"#F9F9F9\"\/><circle cx=\"300\" cy=\"285\" r=\"35\" fill=\"#F9F9F9\"\/><circle cx=\"340\" cy=\"300\" r=\"25\" fill=\"#F9F9F9\"\/><\/svg><\/div>\n          <div class=\"toh-cloud-piece toh-cp-7\"><svg viewBox=\"195 55 210 110\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\"><rect x=\"230\" y=\"115\" width=\"140\" height=\"25\" rx=\"12.5\" fill=\"#FFFFFF\"\/><circle cx=\"270\" cy=\"110\" r=\"20\" fill=\"#FFFFFF\"\/><circle cx=\"300\" cy=\"105\" r=\"25\" fill=\"#FFFFFF\"\/><circle cx=\"335\" cy=\"110\" r=\"18\" fill=\"#FFFFFF\"\/><\/svg><\/div>\n          <div class=\"toh-cloud-piece toh-cp-8\"><svg viewBox=\"15 245 170 120\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\"><rect x=\"50\" y=\"310\" width=\"100\" height=\"30\" rx=\"15\" fill=\"#F0F4F8\"\/><circle cx=\"110\" cy=\"295\" r=\"30\" fill=\"#F0F4F8\"\/><\/svg><\/div>\n        <\/div>\n      <\/div>\n    <\/div>\n\n    <div class=\"toh-scroll-right\">\n      <div class=\"toh-text-block active\" id=\"tohText0\"><h3 class=\"toh-step-title\">Step 1: Browse the trips<\/h3><p class=\"toh-step-text\">Check out the trips and choose the one that suits you. Need help choosing? Feel free to send me a message, I'm happy to help.<\/p><\/div>\n      <div class=\"toh-text-block\" id=\"tohText1\"><h3 class=\"toh-step-title\">Step 2: Choose your date<\/h3><p class=\"toh-step-text\">Choose the date you want to travel and fill in the booking form with your details.<\/p><\/div>\n      <div class=\"toh-text-block\" id=\"tohText2\"><h3 class=\"toh-step-title\">Step 3: Confirmation<\/h3><p class=\"toh-step-text\">I will contact you as soon as possible to confirm your booking. Please note: your booking is not final after filling in the form, but only after you have received a confirmation from me. It can happen that a trip is full on your preferred dates.<\/p><\/div>\n      <div class=\"toh-text-block\" id=\"tohText3\"><h3 class=\"toh-step-title\">Step 4: Down payment<\/h3><p class=\"toh-step-text\">Is your booking confirmed? Then you make a down payment. This is not paid to me, but directly to the partner where your trip takes place. At that moment, you also agree to their cancellation policy, which will be sent to you. Once the deposit has been made, your spot is officially reserved. From then on, you can also book your flight tickets and plan any extra hotel stays or activities. I can of course help you with this.<\/p><\/div>\n      <div class=\"toh-text-block\" id=\"tohText4\"><h3 class=\"toh-step-title\">Step 5: Have fun!<\/h3><p class=\"toh-step-text\">Countdown to the start of your trip, make a packing list and slowly pack your suitcase.<\/p><\/div>\n      <div class=\"toh-text-block\" id=\"tohText5\"><h3 class=\"toh-step-title\">Step 6: Time to go!<\/h3><p class=\"toh-step-text\">Your suitcase is packed, you're on your way to the airport and your adventure is about to begin. With many partners, you pay the remaining amount on location, but sometimes you pay everything in advance. You will always receive clear information about this.<\/p><\/div>\n      <div class=\"toh-text-block\" id=\"tohText6\"><h3 class=\"toh-step-title\">Step 7: Homesickness!<\/h3><p class=\"toh-step-text\">Your journey is over... and you've probably become addicted to horse holidays just like me. You scroll through all your photos and videos and catch yourself looking at the website for your next trip. Homesickness guaranteed!<\/p><\/div>\n    <\/div>\n  <\/div>\n\n  <div class=\"toh-scroll-driver\" id=\"tohDriver\"><div class=\"toh-scroll-driver-inner\"><\/div><\/div>\n<\/div>\n\n<script>\n(function() {\n  var driver   = document.getElementById('tohDriver');\n  var frames   = [1,2,3,4,5,6,7].map(function(i) { return document.getElementById('tohFw' + i); });\n  var texts    = [0,1,2,3,4,5,6].map(function(i) { return document.getElementById('tohText' + i); });\n  var dots     = document.querySelectorAll('.toh-dot');\n  var progress = document.getElementById('tohProgress');\n  var clouds   = document.getElementById('tohClouds');\n  var arrowUp  = document.getElementById('tohArrowUp');\n  var arrowDown = document.getElementById('tohArrowDown');\n  var N        = 7;\n\n  \/\/ \u2500\u2500\u2500 Even zone layout \u2500\u2500\u2500\n  \/\/ Steps 0-5 each get an equal zone. Step 6 (the cloud transition) gets 2.5x that size.\n  var normalUnits = 6;\n  var lastMultiplier = 2.5;\n  var totalUnits = normalUnits + lastMultiplier;\n  var normalZone = 1 \/ totalUnits;\n  var lastZone   = lastMultiplier \/ totalUnits;\n\n  function stepStart(i) {\n    if (i < 6) return i * normalZone;\n    if (i === 6) return 6 * normalZone;\n    return 1;\n  }\n  function stepEnd(i) {\n    if (i < 6) return (i + 1) * normalZone;\n    return 1;\n  }\n\n  var baseTransRatio = 0.35;\n  var cloudTransRatio = 0.85;\n\n  \/\/ \u2500\u2500\u2500 Click-to-navigate: dots \u2500\u2500\u2500\n  dots.forEach(function(dot) {\n    dot.addEventListener('click', function() {\n      var step = parseInt(dot.getAttribute('data-step'));\n      scrollToStep(step);\n    });\n  });\n\n  \/\/ \u2500\u2500\u2500 Click-to-navigate: arrows \u2500\u2500\u2500\n  arrowUp.addEventListener('click', function() {\n    var current = getCurrentStep();\n    if (current > 0) scrollToStep(current - 1);\n  });\n\n  arrowDown.addEventListener('click', function() {\n    var current = getCurrentStep();\n    if (current < N - 1) scrollToStep(current + 1);\n  });\n\n  function getCurrentStep() {\n    var scrollTop = driver.scrollTop;\n    var scrollHeight = driver.scrollHeight - driver.clientHeight;\n    if (scrollHeight <= 0) return 0;\n    var p = Math.max(0, Math.min(1, scrollTop \/ scrollHeight));\n    for (var i = 0; i < N; i++) {\n      if (p < stepEnd(i)) return i;\n    }\n    return N - 1;\n  }\n\n  function scrollToStep(step) {\n    var scrollHeight = driver.scrollHeight - driver.clientHeight;\n    var mid = (stepStart(step) + stepEnd(step)) \/ 2;\n    var targetScroll = mid * scrollHeight;\n    driver.scrollTo({ top: targetScroll, behavior: 'smooth' });\n  }\n\n  function updateArrows(currentStep) {\n    if (currentStep <= 0) { arrowUp.classList.add('disabled'); } \n    else { arrowUp.classList.remove('disabled'); }\n    if (currentStep >= N - 1) { arrowDown.classList.add('disabled'); } \n    else { arrowDown.classList.remove('disabled'); }\n  }\n\n  function outCurve(t) { var x = Math.min(t \/ 0.4, 1); return 1 - (x * x); }\n  function inCurve(t) { if (t < 0.15) return t * 0.3; var x = (t - 0.15) \/ 0.85; return 0.05 + 0.95 * (1 - Math.pow(1 - x, 2.5)); }\n\n  function update() {\n    var scrollTop = driver.scrollTop;\n    var scrollHeight = driver.scrollHeight - driver.clientHeight;\n    if (scrollHeight <= 0) { requestAnimationFrame(update); return; }\n    var p = Math.max(0, Math.min(1, scrollTop \/ scrollHeight));\n    progress.style.width = (p * 100) + '%';\n\n    var transFrom = -1, transTo = -1, t = -1;\n\n    for (var b = 1; b < N; b++) {\n      var boundary = stepStart(b);\n      var zoneSize = (b < 6) ? normalZone : lastZone;\n      var transRatio = (b === 6) ? cloudTransRatio : baseTransRatio;\n      var transWidth = zoneSize * transRatio;\n      var tStart = boundary - transWidth \/ 2;\n      var tEnd   = boundary + transWidth \/ 2;\n      if (p >= tStart && p <= tEnd) {\n        transFrom = b - 1;\n        transTo = b;\n        t = (p - tStart) \/ (tEnd - tStart);\n        break;\n      }\n    }\n\n    var activeFrame = -1;\n    if (t < 0) {\n      for (var s = 0; s < N; s++) {\n        if (p >= stepStart(s) && p < stepEnd(s)) { activeFrame = s; break; }\n      }\n      if (activeFrame < 0) activeFrame = N - 1;\n    }\n\n    var isCloudTrans = (transFrom === 5 && transTo === 6);\n\n    for (var i = 0; i < N; i++) {\n      var opacity = 0; var scale = 1;\n      if (t >= 0) {\n        if (isCloudTrans) {\n          if (i === transFrom) {\n            opacity = Math.max(0, 1 - (t * 2.2)); \n            scale = 1;\n          } else if (i === transTo) {\n            if (t < 0.6) { opacity = 0; scale = 0.95; } \n            else { \n              var fadeT = Math.min((t - 0.6) \/ 0.35, 1); \n              opacity = fadeT; \n              scale = 0.95 + (0.05 * fadeT); \n            }\n          }\n        } else {\n          if (i === transFrom) { opacity = outCurve(t); scale = 1 - t * 0.03; } \n          else if (i === transTo) { opacity = inCurve(t); scale = 0.97 + t * 0.03; }\n        }\n      } else { if (i === activeFrame) { opacity = 1; scale = 1; } }\n      frames[i].style.opacity = opacity;\n      frames[i].style.transform = 'scale(' + scale + ')';\n    }\n\n    if (isCloudTrans && t >= 0) {\n      clouds.style.opacity = 1;\n      var pieces = clouds.querySelectorAll('.toh-cloud-piece');\n      var staggerIn = [0.0, 0.05, 0.02, 0.08, 0.03, 0.06, 0.01, 0.09];\n      var staggerOut = [0.04, 0.0, 0.06, 0.01, 0.08, 0.03, 0.09, 0.02];\n      var dirs = [{x:-1.2,y:-1}, {x:1.2,y:-1}, {x:-1.3,y:1}, {x:1.3,y:1}, {x:-1.5,y:0}, {x:1.5,y:0}, {x:0,y:-1.3}, {x:0,y:1.3}];\n      \n      for (var ci = 0; ci < pieces.length; ci++) {\n        var d = dirs[ci];\n        var appearT = Math.max(0, Math.min((t - staggerIn[ci]) \/ 0.25, 1));\n        var disperseT = Math.max(0, (t - 0.65 - staggerOut[ci]) \/ 0.25);\n        var moveX = d.x * disperseT * 350; var moveY = d.y * disperseT * 300;\n        var pieceOpacity = appearT * (1 - Math.pow(Math.min(disperseT, 1), 2));\n        pieces[ci].style.transform = 'translate(' + moveX + 'px, ' + moveY + 'px)';\n        pieces[ci].style.filter = 'blur(' + (disperseT * 15) + 'px)';\n        pieces[ci].style.opacity = Math.max(0, pieceOpacity);\n      }\n    } else { clouds.style.opacity = 0; }\n\n    var displayFrame = (t >= 0) ? (t > 0.5 ? transTo : transFrom) : activeFrame;\n    for (var j = 0; j < N; j++) {\n      if (j === displayFrame) { texts[j].classList.add('active'); dots[j].classList.add('active'); } \n      else { texts[j].classList.remove('active'); dots[j].classList.remove('active'); }\n    }\n\n    updateArrows(displayFrame);\n    requestAnimationFrame(update);\n  }\n  requestAnimationFrame(update);\n})();\n<\/script><\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"_acf_changed":false,"footnotes":""},"class_list":["post-983","page","type-page","status-publish","hentry"],"acf":[],"_links":{"self":[{"href":"https:\/\/travelonhorseback.com\/en\/wp-json\/wp\/v2\/pages\/983","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/travelonhorseback.com\/en\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/travelonhorseback.com\/en\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/travelonhorseback.com\/en\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/travelonhorseback.com\/en\/wp-json\/wp\/v2\/comments?post=983"}],"version-history":[{"count":43,"href":"https:\/\/travelonhorseback.com\/en\/wp-json\/wp\/v2\/pages\/983\/revisions"}],"predecessor-version":[{"id":1645,"href":"https:\/\/travelonhorseback.com\/en\/wp-json\/wp\/v2\/pages\/983\/revisions\/1645"}],"wp:attachment":[{"href":"https:\/\/travelonhorseback.com\/en\/wp-json\/wp\/v2\/media?parent=983"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}