{"id":7,"date":"2026-03-30T11:01:20","date_gmt":"2026-03-30T11:01:20","guid":{"rendered":"https:\/\/marathonmondaylpr.com\/?page_id=7"},"modified":"2026-04-12T22:38:49","modified_gmt":"2026-04-12T22:38:49","slug":"elementor-7","status":"publish","type":"page","link":"https:\/\/marathonmondaylpr.com\/","title":{"rendered":"Marathon Monday"},"content":{"rendered":"\t\t<div data-elementor-type=\"wp-post\" data-elementor-id=\"7\" class=\"elementor elementor-7\">\n\t\t\t\t<div class=\"elementor-element elementor-element-9f2118a e-flex e-con-boxed e-con e-parent\" data-id=\"9f2118a\" data-element_type=\"container\" data-e-type=\"container\" data-settings=\"{&quot;background_background&quot;:&quot;classic&quot;}\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t<div class=\"elementor-element elementor-element-05d0187 elementor-widget elementor-widget-html\" data-id=\"05d0187\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<style>\n\/* 1. THE FONT ENGINE (Safari-Safe) *\/\n@font-face {\n    font-family: 'CITY-ATHLETIC';\n    \/* Note: %20 is mandatory for the space in 'CityPBol Regular' *\/\n    src: url('https:\/\/marathonmondaylpr.com\/wp-content\/uploads\/fonts\/CityPBol%20Regular.woff2') format('woff2');\n    font-weight: normal;\n    font-style: normal;\n    font-display: swap;\n}\n\n\/* 2. THE UTILITY CLASS *\/\n.apply-city-font, \n.apply-city-font * {\n    font-family: 'CITY-ATHLETIC', sans-serif !important;\n    -webkit-font-smoothing: antialiased;\n}\n  \/* Navigation Container Setup *\/\n  .custom-animated-header {\n    display: flex;\n    align-items: center;\n    justify-content: space-between;\n    height: 90px;\n    font-family: 'Citypot', 'city p ot', sans-serif;\n    position: relative;\n    box-sizing: border-box;\n    width: 100%;\n    padding: 0 0px;\n  \n  }\n\n  \/* Logo Styling *\/\n  .header-logo {\n    position: relative;\n    z-index: 100;\n    opacity: 0; \n    display: flex;\n    align-items: center;\n  }\n  \n  .header-logo img {\n    height: 100px; \/* Adjusted for better fit *\/\n    width: auto;\n    display: block;\n  }\n\n  \/* Navigation Links Styling (Desktop) *\/\n  .header-nav {\n    display: flex;\n    gap: 20px;\n    position: relative;\n    z-index: 5;\n    opacity: 0; \n  }\n  \n  .header-nav a {\n    color: #ffffff;\n    text-decoration: none;\n    font-weight: 400;\n    font-size: 18px; \n    letter-spacing: 0.5px;\n    text-transform: uppercase;\n    transition: color 0.3s ease; \n  }\n  \n  .header-nav a:hover {\n    color: #F57E20; \n  }\n\n  \/* Hamburger Menu Button *\/\n  .menu-toggle {\n    display: none;\n    flex-direction: column;\n    gap: 6px;\n    cursor: pointer;\n    z-index: 100;\n    padding: 10px;\n  }\n\n  .menu-toggle span {\n    display: block;\n    width: 30px;\n    height: 3px;\n    background-color: #fff;\n    transition: all 0.3s ease;\n  }\n\n  \/* Mobile Styles *\/\n  @media (max-width: 900px) {\n    .menu-toggle {\n      display: flex;\n    }\n\n    .header-nav {\n      position: fixed;\n      top: 0;\n      right: -100%; \/* Hidden off-screen *\/\n      width: 250px;\n      height: 100vh;\n      background: #0A3479;\n      flex-direction: column;\n      align-items: center;\n      justify-content: center;\n      gap: 30px;\n      transition: right 0.4s ease;\n      opacity: 1 !important; \/* Overriding desktop animation opacity *\/\n      z-index: 90;\n      box-shadow: -5px 0 15px rgba(0,0,0,0.5);\n    }\n\n    .header-nav.active {\n      right: 0;\n    }\n\n    \/* Animate Hamburger to X *\/\n    .menu-toggle.active span:nth-child(1) {\n      transform: translateY(9px) rotate(45deg);\n    }\n    .menu-toggle.active span:nth-child(2) {\n      opacity: 0;\n    }\n    .menu-toggle.active span:nth-child(3) {\n      transform: translateY(-9px) rotate(-45deg);\n    }\n\n    .header-logo {\n      opacity: 1 !important; \n      transform: none !important; \n    }\n  }\n<\/style>\n\n<div class=\"custom-animated-header\" id=\"anim-header\">\n  <a href=\"\/\" class=\"header-logo\" id=\"anim-logo\">\n    <img decoding=\"async\" src=\"https:\/\/marathonmondaylpr.com\/wp-content\/uploads\/2026\/03\/666.png\" alt=\"Logo\">\n  <\/a>\n  \n  <div class=\"header-nav\" id=\"anim-nav\">\n    <a href=\"#etusivu\">ETUSIVU<\/a>\n    <a href=\"#artistit\">ARTISTIT<\/a>\n    <a href=\"#aikataulu\">AIKATAULU<\/a>\n    <a href=\"#tapahtuma-alue\">TAPAHTUMA-ALUE<\/a>\n    <a href=\"#yhteistyokumppanit\">YHTEISTY\u00d6KUMPPANIT<\/a>\n  <\/div>\n\n  <div class=\"menu-toggle\" id=\"mobile-toggle\">\n    <span><\/span>\n    <span><\/span>\n    <span><\/span>\n  <\/div>\n<\/div>\n\n<script>\n  (function() {\n    const logo = document.getElementById(\"anim-logo\");\n    const nav = document.getElementById(\"anim-nav\");\n    const header = document.getElementById(\"anim-header\");\n    const toggle = document.getElementById(\"mobile-toggle\");\n    const logoImg = logo.querySelector(\"img\");\n\n    \/\/ --- Mobile Toggle Logic ---\n    toggle.addEventListener('click', () => {\n      nav.classList.toggle('active');\n      toggle.classList.toggle('active');\n    });\n\n    \/\/ Close menu when a link is clicked (mobile)\n    nav.querySelectorAll('a').forEach(link => {\n      link.addEventListener('click', () => {\n        nav.classList.remove('active');\n        toggle.classList.remove('active');\n      });\n    });\n\n    \/\/ --- Desktop Entrance Animation ---\n    function playEntranceAnimation() {\n      if (window.innerWidth <= 900) {\n        logo.style.opacity = '1';\n        return;\n      }\n\n      logo.style.opacity = '1';\n      nav.style.opacity = '1';\n\n      const logoRect = logo.getBoundingClientRect();\n      const navRect = nav.getBoundingClientRect();\n      const headerRect = header.getBoundingClientRect();\n      const headerCenter = headerRect.left + (headerRect.width \/ 2);\n\n      const logoStartX = headerCenter - (logoRect.left + logoRect.width \/ 2);\n      const navStartX = headerCenter - (navRect.left + navRect.width \/ 2);\n\n      logo.style.transform = `translateX(${logoStartX}px)`;\n      nav.style.transform = `translateX(${navStartX}px)`;\n      nav.style.opacity = '0';\n\n      void header.offsetWidth;\n\n      setTimeout(() => {\n        logo.style.transition = 'transform 2s cubic-bezier(0.22, 1, 0.36, 1)';\n        nav.style.transition = 'transform 2s cubic-bezier(0.22, 1, 0.36, 1), opacity 1.2s ease 0.3s';\n\n        requestAnimationFrame(() => {\n          logo.style.transform = 'translateX(0)';\n          nav.style.transform = 'translateX(0)';\n          nav.style.opacity = '1';\n        });\n\n        setTimeout(() => {\n          logo.style.transition = '';\n          nav.style.transition = '';\n          logo.style.transform = '';\n          nav.style.transform = '';\n        }, 2100); \n      }, 1000); \n    }\n\n    if (logoImg.complete) {\n      playEntranceAnimation();\n    } else {\n      logoImg.onload = playEntranceAnimation;\n    }\n  })();\n<\/script>\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-ea6675e e-flex e-con-boxed e-con e-parent\" data-id=\"ea6675e\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t<div class=\"elementor-element elementor-element-b104937 elementor-widget elementor-widget-heading\" data-id=\"b104937\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t\t<h2 class=\"elementor-heading-title elementor-size-default\">Designed by Jonas Jokinen<\/h2>\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-48160d7 e-flex e-con-boxed e-con e-parent\" data-id=\"48160d7\" data-element_type=\"container\" data-e-type=\"container\" id=\"etusivu\" data-settings=\"{&quot;background_background&quot;:&quot;classic&quot;}\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t<div class=\"elementor-element elementor-element-383655c e-con-full e-flex e-con e-child\" data-id=\"383655c\" data-element_type=\"container\" data-e-type=\"container\" data-settings=\"{&quot;background_background&quot;:&quot;classic&quot;}\">\n\t\t<div class=\"elementor-element elementor-element-4608ab3 e-con-full e-flex e-con e-child\" data-id=\"4608ab3\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-0d6fde1 elementor-widget elementor-widget-html\" data-id=\"0d6fde1\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<!DOCTYPE html>\n<html>\n<head>\n<style>\n  .scroll-container {\n    width: 100%;\n    overflow: hidden;\n    background: transparent;\n    padding: 0; \/* Removed top\/bottom padding *\/\n    display: flex;\n  }\n\n  .scroll-text {\n    display: flex;\n    white-space: nowrap;\n    \/* Adjust '40s' to change the speed. Higher = Slower *\/\n    animation: scroll-loop 40s linear infinite;\n  }\n\n  .scroll-text span {\n    font-family: 'City P ot', system-ui, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, sans-serif;\n    font-size: 2rem; \/* Adjust size as needed *\/\n    font-weight: bold;\n    color: #FFFFFF;\n    text-transform: uppercase;\n    display: inline-block;\n  }\n\n  @keyframes scroll-loop {\n    0% {\n      transform: translateX(0);\n    }\n    100% {\n      transform: translateX(-50%);\n    }\n  }\n<\/style>\n<\/head>\n<body>\n\n<div class=\"scroll-container\">\n  <div class=\"scroll-text\">\n    <span>\n      HAPPORADIO \/\/ GOOD BOYS \/\/ STIG \/\/ DOG HUSTLERS \/\/ LAPPEENRANNASSA \/\/ 13.-14.4.2026 \/\/&nbsp;\n    <\/span>\n    <span>\n      HAPPORADIO \/\/ GOOD BOYS \/\/ STIG \/\/ DOG HUSTLERS \/\/ LAPPEENRANNASSA \/\/ 13.-14.4.2026 \/\/&nbsp;\n    <\/span>\n  <\/div>\n<\/div>\n\n<\/body>\n<\/html>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-0bff83e elementor-widget elementor-widget-html\" data-id=\"0bff83e\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<!DOCTYPE html>\n<html lang=\"fi\">\n    \n<head>\n    <link href=\"https:\/\/db.onlinewebfonts.com\/c\/620f6bc722c34c665e405dcf7d9e5199?family=CityDBol+V2\" rel=\"stylesheet\">\n  <meta charset=\"UTF-8\">\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n  <title>Marathon Monday Hero<\/title>\n  <style>\n    \/* 1. RESET & BASE *\/\n    * {\n      box-sizing: border-box;\n      margin: 0;\n      padding: 0;\n    }\n\n    body {\n       font-family: 'CITY-MAIN';\n    \/* Note the %20 for the space and the exact capitalization *\/\n    src: url('https:\/\/marathonmondaylpr.com\/wp-content\/uploads\/fonts\/CityPBol%20Regular.woff2') format('woff2');\n      background-color: #F57E20; \n      color: #ffffff;\n      line-height: 1.2;\n    }\n\n    \/* 2. HERO MAIN CONTAINER *\/\n    .hero {\n      position: relative;\n      width: 100%;\n      height: 80vh; \n      min-height: 600px; \n      display: flex;\n      align-items: flex-end; \n      justify-content: center; \n      padding-bottom: 60px; \n      overflow: hidden; \/* T\u00c4RKE\u00c4: Pit\u00e4\u00e4 suuremman videon laatikon sis\u00e4ll\u00e4 *\/\n    }\n\n    \/* 2.1 BACKGROUND VIDEO - ZOOM & CROP *\/\n    .hero-bg {\n      position: absolute;\n      top: 0;\n      left: 0;\n      width: 100%;\n      height: 100%;\n      object-fit: cover;\n      z-index: 0;\n      \/* SUURENNUS: scale(1. 2) kasvattaa videota 20%, jolloin reunat menev\u00e4t yli (crop) *\/\n      \/* object-position siirt\u00e4\u00e4 n\u00e4kym\u00e4n keskittym\u00e4\u00e4n alas, jolloin ylh\u00e4\u00e4lt\u00e4 leikkaantuu enemm\u00e4n *\/\n      transform: scale(1.2); \n      transform-origin: center bottom;\n      object-position: center 80%; \n    }\n\n    \/* 3. OVERLAYS *\/\n    .hero::before {\n      content: \"\";\n      position: absolute;\n      inset: 0;\n      background: rgba(0, 0, 0, 0.2); \n      z-index: 1;\n      pointer-events: none;\n    }\n\n    .hero::after {\n      content: \"\";\n      position: absolute;\n      bottom: -10%;\n      left: -10%;\n      width: 120%; \n      height: 100%; \n      background: \n        radial-gradient(circle at 20% 80%, rgba(245, 126, 32, 0.9) 0%, rgba(245, 126, 32, 0) 60%),\n        radial-gradient(circle at 80% 90%, rgba(245, 126, 32, 0.8) 0%, rgba(245, 126, 32, 0) 50%),\n        linear-gradient(to top, #F57E20 5%, rgba(245, 126, 32, 0.6) 30%, transparent 100%);\n      filter: blur(40px);\n      z-index: 2; \n      pointer-events: none;\n      animation: organicFlow 12s ease-in-out infinite alternate;\n    }\n\n    @keyframes organicFlow {\n      0% { transform: translateY(0) scale(1) rotate(0deg); opacity: 0.8; }\n      100% { transform: translateY(-10px) scale(1.05) rotate(0.5deg); opacity: 0.9; }\n    }\n\n    \/* 4. CONTENT WRAPPER *\/\n    .hero-inner {\n      position: relative;\n      z-index: 10;\n      width: 100%;\n      max-width: 1300px; \n      margin: 0 auto;\n      padding: 0 60px; \n      display: flex;\n      flex-direction: row;\n      align-items: flex-end; \n      justify-content: space-between;\n      gap: 40px;\n    }\n\n    .hero-text { flex: 1; max-width: 700px; }\n    .hero-date { font-size: 2rem; font-weight: 600; letter-spacing: 3px; text-transform: uppercase; margin-bottom: 12px; display: block; }\n    .hero-title { font-size: 5.5rem; font-weight: 900; line-height: 0.8; margin-bottom: 5px; }\n    .hero-subtitle { font-size: 1.3rem; font-weight: 400; margin-bottom: 30px; max-width: 500px; opacity: 0.95; }\n    .hero-btn { display: inline-block; padding: 16px 40px; border: 2px solid #ffffff; border-radius: 60px; color: #ffffff; text-decoration: none; font-size: 1.1rem; font-weight: 700; text-transform: uppercase; transition: all 0.3s ease; }\n    .hero-btn:hover { background: #ffffff; color: #F57E20; }\n\n    .hero-logo-wrap { flex: 0 1 380px; display: flex; justify-content: flex-end; }\n    .hero-logo { width: 100%; height: auto; max-width: 380px; filter: drop-shadow(0 10px 20px rgba(0,0,0,0.15)); }\n\n    @media (max-width: 850px) {\n      .hero { height: auto; min-height: 500px; padding-top: 100px; padding-bottom: 50px; }\n      .hero-inner { flex-direction: column; text-align: left; align-items: flex-start; padding: 0 30px; }\n      .hero-title { font-size: 3.5rem; }\n      .hero-logo-wrap { display: none; }\n    }\n  <\/style>\n<\/head>\n<body>\n\n  <section class=\"hero\">\n    <video class=\"hero-bg\" autoplay muted loop playsinline poster=\"https:\/\/marathonmondaylpr.com\/wp-content\/uploads\/2026\/03\/2-scaled.jpg\">\n      <source src=\"https:\/\/marathonmondaylpr.com\/wp-content\/uploads\/2026\/03\/Marathon-Monday-2025-oli-leffaa-\ud83d\udc10-Aftermovie-nyt-ulkona-\ud83e\udd29Taman-huikean-videon-meille-toimit.mp4\" type=\"video\/mp4\">\n      Selaimesi ei tue videota.\n    <\/video>\n\n    <div class=\"hero-inner\">\n      <div class=\"hero-text\">\n        <span class=\"hero-date\">13.-14.4.2026<\/span>\n        <h1 class=\"hero-title\">MARATHON<br>MONDAY<\/h1>\n        <p class=\"hero-subtitle\">Tapahtumien G.O.A.T. Koko vuoden pisin ja hauskin maanantai. T\u00e4m\u00e4 legendaarisen maineen saavuttanut haaste kest\u00e4\u00e4 kokonaiset 24 tuntia - oletko valmis?<\/p>\n        <a href=\"#ohjelma\" class=\"hero-btn\">Tutustu ohjelmaan!<\/a>\n      <\/div>\n      <div class=\"hero-logo-wrap\">\n        <img decoding=\"async\" src=\"https:\/\/marathonmondaylpr.com\/wp-content\/uploads\/2026\/03\/666.png\" alt=\"Marathon Monday Logo\" class=\"hero-logo\">\n      <\/div>\n    <\/div>\n  <\/section>\n\n<\/body>\n<\/html>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-1bcfc68 e-flex e-con-boxed e-con e-parent\" data-id=\"1bcfc68\" data-element_type=\"container\" data-e-type=\"container\" id=\"artistit\" data-settings=\"{&quot;background_background&quot;:&quot;classic&quot;}\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t<div class=\"elementor-element elementor-element-3b81ab2 elementor-widget elementor-widget-html\" data-id=\"3b81ab2\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<style>\n\/* 1. THE FONT ENGINE *\/\n@font-face {\n    font-family: 'CITY-ATHLETIC';\n    src: url('https:\/\/marathonmondaylpr.com\/wp-content\/uploads\/fonts\/CityPBol%20Regular.woff2') format('woff2');\n    font-weight: normal;\n    font-style: normal;\n    font-display: swap;\n}\n\n.artist-section {\n    display: flex;\n    flex-direction: row;\n    align-items: stretch;\n    max-width: 1300px;\n    margin: 0 auto;\n    padding: 0 20px 40px 20px;\n    gap: 15px;\n    box-sizing: border-box;\n    font-family: 'CITY-ATHLETIC', sans-serif;\n}\n\n.vertical-title {\n    color: #FFFFFF;\n    text-transform: uppercase;\n    font-weight: 900;\n    margin: 0;\n    font-size: clamp(1.8rem, 3.2vw, 3.1rem); \n    letter-spacing: clamp(2px, 0.4vw, 5px);\n    writing-mode: vertical-rl;\n    transform: rotate(180deg);\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    text-align: center;\n}\n\n.artist-grid {\n    display: grid;\n    grid-template-columns: repeat(4, 1fr);\n    gap: 20px;\n    width: 100%;\n}\n\n\/* 2. THE CLICKABLE BOX *\/\n.artist-box {\n    position: relative;\n    aspect-ratio: 1 \/ 1; \n    overflow: hidden;\n    background: #000;\n    border-radius: 4px;\n    display: block; \/* Makes the <a> tag fill the space *\/\n    text-decoration: none;\n}\n\n.artist-image {\n    width: 100%;\n    height: 100%;\n    object-fit: cover;\n    display: block;\n    transition: transform 0.5s ease;\n}\n\n.artist-label {\n    position: absolute;\n    bottom: 20px;\n    left: 0;\n    width: 100%;\n    text-align: center;\n    color: #FFFFFF;\n    text-transform: uppercase;\n    font-size: 1.5rem;\n    font-weight: bold;\n    z-index: 5;\n    text-shadow: 0 2px 8px rgba(0,0,0,0.8); \n}\n\n\/* 3. HOVER OVERLAY (Desktop only) *\/\n.artist-overlay {\n    position: absolute;\n    top: 0;\n    left: 0;\n    width: 100%;\n    height: 100%;\n    background: linear-gradient(to bottom, rgba(245, 126, 32, 0) 0%, rgba(245, 126, 32, 0.95) 100%);\n    display: flex;\n    flex-direction: column;\n    justify-content: center;\n    align-items: center;\n    opacity: 0;\n    transition: opacity 0.4s ease;\n    z-index: 10;\n}\n\n.spotify-hint {\n    color: #fff;\n    border: 2px solid #fff;\n    padding: 8px 15px;\n    font-size: 0.8rem;\n    text-transform: uppercase;\n    font-weight: bold;\n}\n\n\/* Desktop Hover Effects *\/\n@media (hover: hover) {\n    .artist-box:hover .artist-overlay { opacity: 1; }\n    .artist-box:hover .artist-image { transform: scale(1.1); }\n}\n\n\/* 4. MOBILE \/ TOUCH LOGIC *\/\n@media (max-width: 768px) {\n    .artist-section { flex-direction: column; }\n    .vertical-title {\n        writing-mode: horizontal-tb;\n        transform: none;\n        margin-bottom: 10px;\n    }\n}\n\n@media (max-width: 600px) {\n    .artist-grid { grid-template-columns: 1fr; } \/* Vertical List *\/\n    \n    \/* On mobile, we remove the orange overlay entirely so the photo is clear, \n       but the whole box remains a clickable link *\/\n    .artist-overlay { display: none; } \n    \n    .artist-label {\n        font-size: 1.8rem;\n        bottom: 30px;\n        background: rgba(0,0,0,0.4); \/* Slight backing for readability *\/\n        padding: 10px 0;\n    }\n}\n<\/style>\n\n<div class=\"artist-section\">\n    <h2 class=\"vertical-title\">ARTISTIT<\/h2>\n\n    <div class=\"artist-grid\">\n        <a href=\"SPOTIFY_LINK_HERE\" target=\"_blank\" class=\"artist-box\">\n            <img decoding=\"async\" src=\"https:\/\/marathonmondaylpr.com\/wp-content\/uploads\/2026\/03\/ab6761610000e5ebe1bfd0586794c97aac08bc2c.jpg\" alt=\"STIG\" class=\"artist-image\">\n            <div class=\"artist-label\">STIG<\/div>\n            <div class=\"artist-overlay\">\n                <div class=\"spotify-hint\">Kuuntele Spotifyssa<\/div>\n            <\/div>\n        <\/a>\n\n        <a href=\"SPOTIFY_LINK_HERE\" target=\"_blank\" class=\"artist-box\">\n            <img decoding=\"async\" src=\"https:\/\/marathonmondaylpr.com\/wp-content\/uploads\/2026\/03\/d1bf33ce1318c280bcba343c22a13a46.1000x1000x1.jpg\" alt=\"HAPPORADIO\" class=\"artist-image\">\n            <div class=\"artist-label\">HAPPORADIO<\/div>\n            <div class=\"artist-overlay\">\n                <div class=\"spotify-hint\">Kuuntele Spotifyssa<\/div>\n            <\/div>\n        <\/a>\n\n        <a href=\"SPOTIFY_LINK_HERE\" target=\"_blank\" class=\"artist-box\">\n            <img decoding=\"async\" src=\"https:\/\/marathonmondaylpr.com\/wp-content\/uploads\/2026\/03\/good-boys-2048px-001.jpg\" alt=\"GOOD BOYS\" class=\"artist-image\">\n            <div class=\"artist-label\">GOOD BOYS<\/div>\n            <div class=\"artist-overlay\">\n                <div class=\"spotify-hint\">Kuuntele Spotifyssa<\/div>\n            <\/div>\n        <\/a>\n\n        <a href=\"SPOTIFY_LINK_HERE\" target=\"_blank\" class=\"artist-box\">\n            <img decoding=\"async\" src=\"https:\/\/marathonmondaylpr.com\/wp-content\/uploads\/2026\/03\/ab6761610000e5ebcac0bba1b843d6a6ba84a1d4.jpg\" alt=\"DOG HUSTLERS\" class=\"artist-image\">\n            <div class=\"artist-label\">DOG HUSTLERS<\/div>\n            <div class=\"artist-overlay\">\n                <div class=\"spotify-hint\">Kuuntele Spotifyssa<\/div>\n            <\/div>\n        <\/a>\n    <\/div>\n<\/div>\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-4b0ede6 e-flex e-con-boxed e-con e-parent\" data-id=\"4b0ede6\" data-element_type=\"container\" data-e-type=\"container\" id=\"aikataulu\" data-settings=\"{&quot;background_background&quot;:&quot;classic&quot;}\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t<div class=\"elementor-element elementor-element-7fe1688 elementor-widget elementor-widget-html\" data-id=\"7fe1688\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<style>\n\/* 1. THE FONT ENGINE (Safari-Safe) *\/\n@font-face {\n    font-family: 'CITY-ATHLETIC';\n    \/* Note: %20 is mandatory for the space in 'CityPBol Regular' *\/\n    src: url('https:\/\/marathonmondaylpr.com\/wp-content\/uploads\/fonts\/CityPBol%20Regular.woff2') format('woff2');\n    font-weight: normal;\n    font-style: normal;\n    font-display: swap;\n}\n\n\/* 2. THE UTILITY CLASS *\/\n.apply-city-font, \n.apply-city-font * {\n    font-family: 'CITY-ATHLETIC', sans-serif !important;\n    -webkit-font-smoothing: antialiased;\n}\n\n\/* --- Container & General Typography --- *\/\n.hor-schedule-widget {\n    font-family: 'CITY-ATHLETIC', system-ui, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, sans-serif !important;\n    color: #ffffff; \n    width: 100%;\n    max-width: 800px;\n    margin: 0 auto;\n    padding: clamp(10px, 3vw, 20px);\n    box-sizing: border-box;\n}\n\n\/* --- Header Section --- *\/\n.hor-header {\n    margin-bottom: 20px; \n    line-height: 1.2;\n}\n\n.hor-title {\n    font-size: clamp(2.5rem, 8vw, 4.5rem); \n    font-weight: 800;\n    letter-spacing: 3px;\n    display: inline-block;\n}\n\n.hor-subtitle {\n    font-family: \"Times New Roman\", Times, serif;\n    font-size: clamp(1rem, 2.5vw, 1.4rem);\n    font-style: italic;\n    font-weight: 400;\n    letter-spacing: 3px;\n    margin-left: 8px;\n    vertical-align: top;\n    margin-top: 8px;\n    display: inline-block;\n}\n\n.hor-year {\n    font-size: clamp(2.5rem, 8vw, 4.5rem);\n    font-weight: 800;\n    letter-spacing: 1px;\n    display: block;\n}\n\n\/* --- Schedule List --- *\/\n.hor-list {\n    display: flex;\n    flex-direction: column;\n}\n\n\/* --- Individual Row --- *\/\n.hor-row {\n    display: grid;\n    grid-template-columns: clamp(60px, 8vw, 70px) 1fr auto; \n    align-items: center;\n    gap: 10px;\n    padding: 10px 0; \n    border-bottom: 1px solid #ffffff; \n    transition: all 0.3s ease;\n}\n\n.hor-row:first-child {\n    border-top: 1px solid #ffffff;\n}\n\n\/* --- Column Typography --- *\/\n.hor-time {\n    font-family: 'CITY-ATHLETIC', sans-serif !important;\n    color: #ffffff; \n    font-size: 1.1rem; \n    letter-spacing: 2px;\n    font-weight: 700;\n    transition: all 0.3s ease;\n}\n\n.hor-event {\n    font-family: 'CITY-ATHLETIC', sans-serif !important;\n    font-size: 1.05rem; \n    font-weight: 700;\n    transition: all 0.3s ease;\n}\n\n\/* --- ARTIST SPECIFIC STYLING --- *\/\n.hor-event.artist-name {\n    color: #F57E20;\n    font-size: 1.3rem;\n}\n\n\/* --- Labels (Descriptions \/ P\u00e4\u00e4ttyy texts) --- *\/\n.hor-label {\n    font-family: \"Times New Roman\", Times, serif;\n    color: #ffffff; \n    letter-spacing: 0.8px;\n    font-size: 0.85rem; \n    font-style: italic;\n    font-weight: 600;\n    border: 1px solid #ffffff; \n    border-radius: 50px;\n    padding: 4px 12px; \n    text-align: center;\n    word-break: break-word; \n    transition: all 0.3s ease;\n    opacity: 1; \n}\n\n.hor-label:empty {\n    display: none;\n    border: none;\n    padding: 0;\n}\n\n\/* --- ACTIVE STATE HIGHLIGHTS --- *\/\n.hor-row.active {\n    background-color: #F57E20; \/* Orange Background *\/\n    border-bottom: none; \/* Removes the white line UNDER the active row *\/\n \/* Smooth corners for the highlight box *\/\n    padding: 14px 15px; \/* Adds side padding *\/\n    margin: 4px 0; \/* Breathing room *\/\n}\n\n\/* Hide the bottom border of the row right ABOVE the active one *\/\n.hor-row:has(+ .hor-row.active) {\n    border-bottom: none;\n}\n\n\/* Hide the top border if the VERY FIRST row is the active one *\/\n.hor-row.active:first-child {\n    border-top: none;\n}\n\n\/* Keeps the Time, Event, and Label Pure White *\/\n.hor-row.active .hor-time {\n    color: #ffffff; \n    font-size: clamp(1.3rem, 4.5vw, 1.5rem);\n}\n\n.hor-row.active .hor-event {\n    color: #ffffff; \n    font-size: clamp(1.2rem, 4vw, 1.4rem);\n}\n\n\/* Ensure the artist name turns white when the background is orange *\/\n.hor-row.active .hor-event.artist-name {\n    color: #ffffff;\n}\n\n.hor-row.active .hor-label {\n    color: #ffffff; \n    border-color: #ffffff;\n    font-size: 0.95rem; \n}\n\n\/* --- Standard Mobile Responsiveness --- *\/\n@media (max-width: 767px) {\n    .hor-row {\n        grid-template-columns: 60px 1fr; \n        grid-template-areas: \n            \"time event\"\n            \". label\";\n        padding: 12px 0;\n        gap: 6px 8px;\n    }\n    \n    .hor-row.active {\n        padding: 16px 15px; \n    }\n\n    .hor-time {\n        font-family: 'CITY-ATHLETIC', sans-serif !important;\n        font-size: 1rem;\n    }\n\n    .hor-event {\n        font-size: 1rem;\n    }\n    \n    .hor-event.artist-name {\n        font-size: 1.15rem; \/* Slightly scaled down for mobile, but still bigger than standard events *\/\n    }\n\n    .hor-label-container {\n        grid-area: label;\n        display: flex;\n        justify-content: flex-start;\n        margin-top: 2px;\n    }\n    \n    .hor-label {\n        font-size: 0.85rem;\n        border: none;\n        border-radius: 0;\n        padding: 0;\n        text-align: left; \n    }\n    \n    .hor-row.active .hor-label {\n        border: none;\n    }\n}\n\n\/* --- Extra Small Mobile Devices --- *\/\n@media (max-width: 400px) {\n    .hor-row {\n        grid-template-columns: 50px 1fr; \n        gap: 4px 6px;\n    }\n\n    .hor-time {\n        font-size: 0.95rem;\n    }\n\n    .hor-event {\n        font-size: 0.9rem;\n    }\n\n    .hor-row.active .hor-time {\n        font-size: 1.2rem; \n    }\n\n    .hor-row.active .hor-event {\n        font-size: 1.1rem; \n    }\n}\n<\/style>\n\n<div class=\"hor-schedule-widget\">\n    <div class=\"hor-header\">\n        <span class=\"hor-title\"> AIKATAULU<\/span><span class=\"hor-subtitle\"><\/span>\n        <span class=\"hor-year\"><\/span>\n    <\/div>\n    \n    <div class=\"hor-list\" id=\"schedule-list\">\n        <div class=\"hor-row\">\n            <div class=\"hor-time\">7.00<\/div>\n            <div class=\"hor-event\">Avaus lavalta<\/div>\n            <div class=\"hor-label-container\"><div class=\"hor-label\"><\/div><\/div>\n        <\/div>\n        <div class=\"hor-row\">\n            <div class=\"hor-time\">8.00<\/div>\n            <div class=\"hor-event\">Brunssi<\/div>\n            <div class=\"hor-label-container\"><div class=\"hor-label\">P\u00e4\u00e4ttyy 10.00<\/div><\/div>\n        <\/div>\n        <div class=\"hor-row\">\n            <div class=\"hor-time\">9.00<\/div>\n            <div class=\"hor-event\">Bp-turnaus<\/div>\n            <div class=\"hor-label-container\"><div class=\"hor-label\">P\u00e4\u00e4ttyy 11.00<\/div><\/div>\n        <\/div>\n        <div class=\"hor-row\">\n            <div class=\"hor-time\">9.00<\/div>\n            <div class=\"hor-event\">Bingo<\/div>\n            <div class=\"hor-label-container\"><div class=\"hor-label\"><\/div><\/div>\n        <\/div>\n        <div class=\"hor-row\">\n            <div class=\"hor-time\">11.00<\/div>\n            <div class=\"hor-event\">Sitsit #1<\/div>\n            <div class=\"hor-label-container\"><div class=\"hor-label\">P\u00e4\u00e4ttyy 12.00<\/div><\/div>\n        <\/div>\n        <div class=\"hor-row\">\n            <div class=\"hor-time\">12.30<\/div>\n            <div class=\"hor-event artist-name\">Good Boys<\/div>\n            <div class=\"hor-label-container\"><div class=\"hor-label\"><\/div><\/div>\n        <\/div>\n        <div class=\"hor-row\">\n            <div class=\"hor-time\">14.00<\/div>\n            <div class=\"hor-event\">Sitsit #2<\/div>\n            <div class=\"hor-label-container\"><div class=\"hor-label\">P\u00e4\u00e4ttyy 15.00<\/div><\/div>\n        <\/div>\n        <div class=\"hor-row\">\n            <div class=\"hor-time\">15.30<\/div>\n            <div class=\"hor-event artist-name\">Stig<\/div>\n            <div class=\"hor-label-container\"><div class=\"hor-label\">P\u00e4\u00e4ttyy 16.30<\/div><\/div>\n        <\/div>\n        <div class=\"hor-row\">\n            <div class=\"hor-time\">16.45<\/div>\n            <div class=\"hor-event\">Bp finaali<\/div>\n            <div class=\"hor-label-container\"><div class=\"hor-label\">P\u00e4\u00e4ttyy 17.15<\/div><\/div>\n        <\/div>\n        <div class=\"hor-row\">\n            <div class=\"hor-time\">17.15<\/div>\n            <div class=\"hor-event artist-name\">Dog Hustlers<\/div>\n            <div class=\"hor-label-container\"><div class=\"hor-label\">P\u00e4\u00e4ttyy 18.15<\/div><\/div>\n        <\/div>\n        <div class=\"hor-row\">\n            <div class=\"hor-time\">18.45<\/div>\n            <div class=\"hor-event artist-name\">Happoradio<\/div>\n            <div class=\"hor-label-container\"><div class=\"hor-label\">P\u00e4\u00e4ttyy 19.45<\/div><\/div>\n        <\/div>\n        <div class=\"hor-row\">\n            <div class=\"hor-time\">20.00<\/div>\n            <div class=\"hor-event\">Tapahtuma-alue sulkeutuu<\/div>\n            <div class=\"hor-label-container\"><div class=\"hor-label\"><\/div><\/div>\n        <\/div>\n        <div class=\"hor-row\">\n            <div class=\"hor-time\">21.00<\/div>\n            <div class=\"hor-event\">Jatkot alkavat<\/div>\n            <div class=\"hor-label-container\"><div class=\"hor-label\"><\/div><\/div>\n        <\/div>\n        <div class=\"hor-row\">\n            <div class=\"hor-time\">4.00<\/div>\n            <div class=\"hor-event\">Tapahtuma-alue aukeaa<\/div>\n            <div class=\"hor-label-container\"><div class=\"hor-label\">Jatkojen jatkot alkavat<\/div><\/div>\n        <\/div>\n        <div class=\"hor-row\">\n            <div class=\"hor-time\">6.00<\/div>\n            <div class=\"hor-event\">Portit menev\u00e4t kiinni<\/div>\n            <div class=\"hor-label-container\"><div class=\"hor-label\">Jatkojen jatkot jatkuvat<\/div><\/div>\n        <\/div>\n        <div class=\"hor-row\">\n            <div class=\"hor-time\">7.00<\/div>\n            <div class=\"hor-event\">24h merkkien jako<\/div>\n            <div class=\"hor-label-container\"><div class=\"hor-label\"><\/div><\/div>\n        <\/div>\n    <\/div>\n<\/div>\n\n<script>\n    function updateActiveScheduleEvent() {\n        const rows = document.querySelectorAll('.hor-row');\n        const now = new Date();\n        const currentHour = now.getHours();\n        const currentMinute = now.getMinutes();\n        \n        const getEffectiveMinutes = (h, m) => {\n            let adjustedHour = h < 7 ? h + 24 : h;\n            return adjustedHour * 60 + m;\n        };\n\n        const currentTotalMins = getEffectiveMinutes(currentHour, currentMinute);\n        let activeIndex = -1;\n\n        const rowTimes = Array.from(rows).map(row => {\n            const timeText = row.querySelector('.hor-time').innerText;\n            const [h, m] = timeText.split('.').map(Number);\n            return getEffectiveMinutes(h, m);\n        });\n\n        for (let i = 0; i < rowTimes.length; i++) {\n            const startMins = rowTimes[i];\n            const nextStartMins = i + 1 < rowTimes.length ? rowTimes[i + 1] : Infinity;\n\n            if (currentTotalMins >= startMins && currentTotalMins < nextStartMins) {\n                activeIndex = i;\n                break;\n            }\n        }\n\n        rows.forEach((row, index) => {\n            if (index === activeIndex) {\n                row.classList.add('active');\n            } else {\n                row.classList.remove('active');\n            }\n        });\n    }\n\n    updateActiveScheduleEvent();\n    setInterval(updateActiveScheduleEvent, 60000);\n<\/script>\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-69862e2 e-flex e-con-boxed e-con e-parent\" data-id=\"69862e2\" data-element_type=\"container\" data-e-type=\"container\" data-settings=\"{&quot;background_background&quot;:&quot;classic&quot;}\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t<div class=\"elementor-element elementor-element-47079a8 elementor-widget elementor-widget-html\" data-id=\"47079a8\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<style>\n  \/* Wrapper keeps the map centered and handles scrolling *\/\n  .marathon-map-wrapper {\n    max-width: 500px; \/* Makes the default map smaller *\/\n    margin: 0 auto; \/* Centers the map in your Elementor column *\/\n    overflow: auto; \/* Adds scrollbars only when zoomed *\/\n    border-radius: 8px;\n  }\n\n  .marathon-map-image {\n    width: 100%;\n    max-width: 100%; \/* Respects the 500px wrapper limit initially *\/\n    height: auto;\n    display: block;\n    cursor: zoom-in;\n    \/* Added max-width to the transition for a much smoother, glide-like effect *\/\n    transition: width 0.4s ease-in-out, max-width 0.4s ease-in-out; \n  }\n\n  \/* The active zoomed state *\/\n  .marathon-map-image.zoomed-in {\n    width: 200%; \/* A more reasonable zoom size (double size) *\/\n    max-width: 200%; \/* Smoothly overrides Elementor's global image restrictions *\/\n    cursor: zoom-out;\n  }\n<\/style>\n\n<div class=\"marathon-map-wrapper\">\n  <img decoding=\"async\" \n    src=\"https:\/\/marathonmondaylpr.com\/wp-content\/uploads\/2026\/04\/aluekartta.png\" \n    alt=\"Marathon Area Map\" \n    class=\"marathon-map-image\" \n    id=\"interactive-marathon-map\"\n  >\n<\/div>\n\n<script>\n  \/\/ Simple script to toggle the zoom class when tapped\/clicked\n  const mapEl = document.getElementById('interactive-marathon-map');\n  \n  mapEl.addEventListener('click', () => {\n    mapEl.classList.toggle('zoomed-in');\n  });\n<\/script>\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-cdb4940 e-flex e-con-boxed e-con e-parent\" data-id=\"cdb4940\" data-element_type=\"container\" data-e-type=\"container\" data-settings=\"{&quot;background_background&quot;:&quot;classic&quot;}\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t<div class=\"elementor-element elementor-element-38fa3bd elementor-widget elementor-widget-html\" data-id=\"38fa3bd\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<link rel=\"stylesheet\" href=\"https:\/\/cdn.jsdelivr.net\/npm\/swiper@11\/swiper-bundle.min.css\" \/>\n<style>\n\t.custom-html-scroller {\n\t\tpadding: 0 !important;\n\t\tmargin: 0 !important;\n\t\tbackground: #ffffff !important;\n\t\twidth: 100%;\n\t\toverflow: hidden;\n\t}\n\t.my-html-swiper {\n\t\twidth: 100%;\n\t\tpadding: 0;\n\t\tbackground: #ffffff !important;\n\t}\n\t.my-html-swiper .swiper-wrapper {\n\t\ttransition-timing-function: linear !important;\n\t\talign-items: center;\n\t}\n\t.my-html-swiper .swiper-slide {\n\t\tdisplay: flex;\n\t\tjustify-content: center;\n\t\talign-items: center;\n\t\tpadding: 0;\n\t}\n\t\/* Uniform sizing constraints *\/\n\t.my-html-swiper .swiper-slide img {\n\t\tmax-height: 80px; \n\t\twidth: auto;\n\t\tmax-width: 80%;\n\t\tobject-fit: contain;\n\t\tpointer-events: none; \n\t}\n<\/style>\n\n<div class=\"custom-html-scroller\">\n\t<div class=\"swiper my-html-swiper\">\n\t\t<div class=\"swiper-wrapper\">\n\t\t\t<div class=\"swiper-slide\">\n\t\t\t\t<img decoding=\"async\" src=\"https:\/\/marathonmondaylpr.com\/wp-content\/uploads\/2026\/04\/Unknown-2-scaled.png\" alt=\"Logo 1\">\n\t\t\t<\/div>\n\t\t\t\n\t\t\t<div class=\"swiper-slide\">\n\t\t\t\t<img decoding=\"async\" src=\"https:\/\/marathonmondaylpr.com\/wp-content\/uploads\/2026\/04\/Screenshot-2026-04-12-at-18.52.54.png\" alt=\"Logo 2\">\n\t\t\t<\/div>\n\t\t\t\n\t\t\t<div class=\"swiper-slide\">\n\t\t\t\t<img decoding=\"async\" src=\"https:\/\/marathonmondaylpr.com\/wp-content\/uploads\/2026\/04\/Unknown.png\" alt=\"Logo 3\">\n\t\t\t<\/div>\n\t\t\t<div class=\"swiper-slide\">\n\t\t\t\t<img decoding=\"async\" src=\"https:\/\/marathonmondaylpr.com\/wp-content\/uploads\/2026\/04\/Unknown-1.png\" alt=\"Logo 4\">\n\t\t\t<\/div>\n\t\t\t<div class=\"swiper-slide\">\n\t\t\t\t<img decoding=\"async\" src=\"https:\/\/marathonmondaylpr.com\/wp-content\/uploads\/2026\/04\/Lappeenrannan-Energia-logo.jpg\" alt=\"Logo 5\">\n\t\t\t<\/div>\n\t\t\t<div class=\"swiper-slide\">\n\t\t\t\t<img decoding=\"async\" src=\"https:\/\/marathonmondaylpr.com\/wp-content\/uploads\/2026\/04\/Ekonomit-Logo-Valkotausta.png\" alt=\"Logo 6\">\n\t\t\t<\/div>\n\t\t\t<div class=\"swiper-slide\">\n\t\t\t\t<img decoding=\"async\" src=\"https:\/\/marathonmondaylpr.com\/wp-content\/uploads\/2026\/04\/LOAS-logo-vihr-2-scaled.png\" alt=\"Logo 7\">\n\t\t\t<\/div>\n\t\t\t<div class=\"swiper-slide\">\n\t\t\t\t<img decoding=\"async\" src=\"https:\/\/marathonmondaylpr.com\/wp-content\/uploads\/2026\/04\/Las_palmas_preview.png\" alt=\"Logo 8\">\n\t\t\t<\/div>\n\t\t\t<div class=\"swiper-slide\">\n\t\t\t\t<img decoding=\"async\" src=\"https:\/\/marathonmondaylpr.com\/wp-content\/uploads\/2026\/04\/lutlogo.webp\" alt=\"Logo 9\">\n\t\t\t<\/div>\n\t\t\t<div class=\"swiper-slide\">\n\t\t\t\t<img decoding=\"async\" src=\"https:\/\/marathonmondaylpr.com\/wp-content\/uploads\/2026\/04\/Ekonomit-Logo-Mustatausta.png\" alt=\"Logo 10\">\n\t\t\t<\/div>\n\t\t\t<div class=\"swiper-slide\">\n\t\t\t\t<img decoding=\"async\" src=\"https:\/\/marathonmondaylpr.com\/wp-content\/uploads\/2026\/04\/JM-Sec-Logo.jpg\" alt=\"Logo 11\">\n\t\t\t<\/div>\n\t\t<\/div>\n\t<\/div>\n<\/div>\n\n<script src=\"https:\/\/cdn.jsdelivr.net\/npm\/swiper@11\/swiper-bundle.min.js\"><\/script>\n<script>\n\tconst initCustomLogoScroller = () => {\n\t\tif (typeof Swiper !== 'undefined') {\n\t\t\tnew Swiper('.my-html-swiper', {\n\t\t\t\tslidesPerView: 3,\n\t\t\t\tspaceBetween: 0,\n\t\t\t\tloop: true,\n\t\t\t\tspeed: 4000, \n\t\t\t\tallowTouchMove: true, \n\t\t\t\tautoplay: {\n\t\t\t\t\tdelay: 0, \n\t\t\t\t\tdisableOnInteraction: false,\n\t\t\t\t},\n\t\t\t\tbreakpoints: {\n\t\t\t\t\t768: { slidesPerView: 4 },\n\t\t\t\t\t1024: { slidesPerView: 5 }\n\t\t\t\t}\n\t\t\t});\n\t\t} else {\n\t\t\tsetTimeout(initCustomLogoScroller, 100);\n\t\t}\n\t};\n\t\n\tinitCustomLogoScroller();\n<\/script>\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-a00df93 e-flex e-con-boxed e-con e-parent\" data-id=\"a00df93\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t<div class=\"elementor-element elementor-element-f13c85e elementor-widget elementor-widget-html\" data-id=\"f13c85e\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<!DOCTYPE html>\n<html lang=\"fi\">\n<head>\n    <meta charset=\"UTF-8\">\n    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n    <title>Marathon Monday<\/title>\n    <link rel=\"stylesheet\" href=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/font-awesome\/6.0.0\/css\/all.min.css\">\n    \n    <style>\n    \/* 1. THE FONT ENGINE (Safari-Safe) *\/\n@font-face {\n    font-family: 'CITY-ATHLETIC';\n    \/* Note: %20 is mandatory for the space in 'CityPBol Regular' *\/\n    src: url('https:\/\/marathonmondaylpr.com\/wp-content\/uploads\/fonts\/CityPBol%20Regular.woff2') format('woff2');\n    font-weight: normal;\n    font-style: normal;\n    font-display: swap;\n}\n\n\/* 2. THE UTILITY CLASS *\/\n.apply-city-font, \n.apply-city-font * {\n    font-family: 'CITY-ATHLETIC', sans-serif !important;\n    -webkit-font-smoothing: antialiased;\n}\n        \/* --- SMOOTH SCROLLING --- *\/\n        html {\n            scroll-behavior: smooth;\n        }\n\n        body {\n            margin: 0;\n            padding-left: 240px; \n            transition: padding 0.4s ease;\n            font-family: 'Citypot', 'city p ot', sans-serif;\n        }\n\n        \/* --- THE SIDEBAR --- *\/\n        .side-bar {\n            position: fixed;\n            top: 0;\n            left: 0;\n            width: 240px; \n            height: 100vh;\n            background-color: #0A3479;\n            z-index: 9998;\n            display: flex;\n            flex-direction: column;\n            justify-content: space-between; \n            padding: 40px 25px; \/* Hieman kapeampi padding, jotta pitk\u00e4t sanat mahtuvat *\/\n            box-sizing: border-box;\n        }\n\n        \/* --- LOGO SECTION --- *\/\n        .side-bar-top {\n            display: flex;\n            justify-content: flex-start;\n            margin-bottom: 20px;\n        }\n\n        .sidebar-logo {\n            max-width: 100%;\n            height: auto;\n            width: 200px; \n        }\n\n        \/* --- MIDDLE MENU SECTION --- *\/\n        .menu-center-wrapper {\n            margin-top: auto;\n            margin-bottom: auto;\n        }\n\n        .dot-nav {\n            display: flex;\n            flex-direction: column;\n            gap: 40px; \/* Kasvatettu v\u00e4li\u00e4 isomman tekstin vuoksi *\/\n            position: relative;\n        }\n\n        .dot-nav::before {\n            content: '';\n            position: absolute;\n            top: 10px;    \n            bottom: 10px; \n            left: 4px; \n            border-left: 2px dotted rgba(255, 255, 255, 0.3);\n            z-index: -1;  \n        }\n\n        .dot-link {\n            display: flex;\n            align-items: center;\n            text-decoration: none;\n            transition: all 0.4s cubic-bezier(0.22, 1, 0.36, 1);\n        }\n\n        .dot {\n            width: 10px;\n            height: 10px;\n            border-radius: 50%;\n            background-color: #ffffff;\n            margin-right: 15px; \n            transition: all 0.4s cubic-bezier(0.22, 1, 0.36, 1);\n            flex-shrink: 0;\n        }\n\n        .dot-text {\n            color: #ffffff;\n            font-size: 14px; \n            opacity: 0.6;\n            text-transform: uppercase;\n            letter-spacing: 1.2px;\n            white-space: nowrap;\n            transition: all 0.4s cubic-bezier(0.22, 1, 0.36, 1);\n        }\n\n        \/* ACTIVE & HOVER STATES *\/\n        .dot-link.active .dot, .dot-link:hover .dot {\n            background-color: #F57E20; \n            transform: scale(1.8); \/* Hieman isompi pallo *\/\n        }\n\n        .dot-link.active .dot-text {\n            opacity: 1;\n            font-weight: bold;\n            font-size: 28px; \/* Tuntuvasti isompi koko *\/\n            letter-spacing: 1.2px; \/* Tiivistet\u00e4\u00e4n hieman, jotta mahtuu palkkiin *\/\n        }\n\n        .dot-link:hover .dot-text {\n            opacity: 1;\n        }\n\n        \/* --- BOTTOM LINKS SECTION --- *\/\n        .bottom-links-section {\n            margin-top: 40px;\n        }\n\n        .link-header {\n            color: #ffffff;\n            font-size: 11px;\n            text-transform: uppercase;\n            letter-spacing: 2px;\n            margin-bottom: 20px;\n            opacity: 0.5;\n            font-weight: bold;\n        }\n\n        .social-vertical-list {\n            display: flex;\n            flex-direction: column;\n            gap: 15px;\n        }\n\n        .social-row {\n            display: flex;\n            align-items: center;\n            text-decoration: none;\n            transition: transform 0.2s ease;\n        }\n\n        .social-row:hover {\n            transform: translateX(5px);\n        }\n\n        .social-icon {\n            color: #F57E20; \n            font-size: 18px;\n            width: 25px; \n            text-align: center;\n            margin-right: 12px;\n        }\n\n        .social-label {\n            color: #ffffff;\n            font-size: 12px;\n            text-transform: uppercase;\n            letter-spacing: 1px;\n            opacity: 0.8;\n            transition: opacity 0.2s ease;\n        }\n\n        \/* --- MOBILE RESPONSIVE --- *\/\n        @media (max-width: 1024px) {\n            body { padding-left: 0; }\n            .side-bar { display: none; }\n        }\n    <\/style>\n<\/head>\n<body>\n\n<div class=\"side-bar\">\n  <div class=\"side-bar-top\">\n      <img decoding=\"async\" src=\"https:\/\/marathonmondaylpr.com\/wp-content\/uploads\/2026\/03\/TOP.png\" alt=\"Marathon Monday Logo\" class=\"sidebar-logo\">\n  <\/div>\n\n  <div class=\"menu-center-wrapper\">\n    <div class=\"dot-nav\" id=\"dot-nav\">\n      <a href=\"#etusivu\" class=\"dot-link\">\n        <span class=\"dot\"><\/span>\n        <span class=\"dot-text\">ETUSIVU<\/span>\n      <\/a>\n      <a href=\"#artistit\" class=\"dot-link\">\n        <span class=\"dot\"><\/span>\n        <span class=\"dot-text\">ARTISTIT<\/span>\n      <\/a>\n      <a href=\"#aikataulu\" class=\"dot-link\">\n        <span class=\"dot\"><\/span>\n        <span class=\"dot-text\">AIKATAULU<\/span>\n      <\/a>\n      <a href=\"#tapahtuma-alue\" class=\"dot-link\">\n        <span class=\"dot\"><\/span>\n        <span class=\"dot-text\">TAPAHTUMA-ALUE<\/span>\n      <\/a>\n      <a href=\"#yhteistyokumppanit\" class=\"dot-link\">\n        <span class=\"dot\"><\/span>\n        <span class=\"dot-text\">YHTEISTY\u00d6KUMPPANIT<\/span>\n      <\/a>\n    <\/div>\n  <\/div>\n\n  <div class=\"bottom-links-section\">\n    <div class=\"link-header\">LINKKEJ\u00c4<\/div>\n    <div class=\"social-vertical-list\">\n        <a href=\"https:\/\/www.instagram.com\/marathonmondaylpr\/\" target=\"_blank\" class=\"social-row\">\n            <i class=\"fab fa-instagram social-icon\"><\/i>\n            <span class=\"social-label\">INSTAGRAM<\/span>\n        <\/a>\n        <a href=\"https:\/\/www.tiktok.com\/tag\/marathonmonday\" target=\"_blank\" class=\"social-row\">\n            <i class=\"fab fa-tiktok social-icon\"><\/i>\n            <span class=\"social-label\">TIKTOK<\/span>\n        <\/a>\n        <a href=\"https:\/\/www.flickr.com\/photos\/126632179@N06\/albums\/72177720316470844\/\" target=\"_blank\" class=\"social-row\">\n            <i class=\"fab fa-flickr social-icon\"><\/i>\n            <span class=\"social-label\">2024 KUVAT<\/span>\n        <\/a>\n        <a href=\"https:\/\/www.enklaavi.fi\/fi\/\" target=\"_blank\" class=\"social-row\">\n            <i class=\"fas fa-globe social-icon\"><\/i>\n            <span class=\"social-label\">ENKLAAVI<\/span>\n        <\/a>\n    <\/div>\n  <\/div>\n<\/div>\n\n<script>\n  document.addEventListener(\"DOMContentLoaded\", () => {\n    const navLinks = document.querySelectorAll(\".dot-link\");\n    \n    const options = {\n      root: null,\n      rootMargin: \"0px 0px -50% 0px\", \n      threshold: 0\n    };\n\n    const observer = new IntersectionObserver((entries) => {\n      entries.forEach(entry => {\n        if (entry.isIntersecting) {\n          const id = entry.target.getAttribute(\"id\");\n          navLinks.forEach(link => link.classList.remove(\"active\"));\n          const activeLink = document.querySelector(`.dot-link[href=\"#${id}\"]`);\n          if (activeLink) activeLink.classList.add(\"active\");\n        }\n      });\n    }, options);\n\n    navLinks.forEach(link => {\n      const targetId = link.getAttribute(\"href\");\n      const section = document.querySelector(targetId);\n      if (section) observer.observe(section);\n    });\n\n    window.addEventListener(\"scroll\", () => {\n        if (window.scrollY < 100) {\n            navLinks.forEach(link => link.classList.remove(\"active\"));\n            navLinks[0].classList.add(\"active\");\n        }\n    });\n  });\n<\/script>\n\n<\/body>\n<\/html>\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-c08150a e-flex e-con-boxed e-con e-parent\" data-id=\"c08150a\" data-element_type=\"container\" data-e-type=\"container\" data-settings=\"{&quot;background_background&quot;:&quot;classic&quot;}\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t<div class=\"elementor-element elementor-element-1327967 elementor-widget elementor-widget-html\" data-id=\"1327967\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<style>\n\/* Forces the goat cursor on literally every single element on the page *\/\n*, *::before, *::after, html, body {\n    cursor: url('https:\/\/marathonmondaylpr.com\/wp-content\/uploads\/2026\/03\/goat-1-1.png'), auto !important;\n}\n\n\/* Forces the goat cursor over text, links, buttons, and form fields *\/\na, a:hover, button, button:hover, input, textarea, p, h1, h2, h3, h4, h5, h6, span, img {\n    cursor: url('https:\/\/marathonmondaylpr.com\/wp-content\/uploads\/2026\/03\/goat-1.png'), auto !important;\n}\n<\/style>\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-ffa969d e-flex e-con-boxed e-con e-parent\" data-id=\"ffa969d\" data-element_type=\"container\" data-e-type=\"container\" data-settings=\"{&quot;background_background&quot;:&quot;classic&quot;}\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t<div class=\"elementor-element elementor-element-f466809 elementor-widget elementor-widget-html\" data-id=\"f466809\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<link rel=\"preload\" as=\"image\" href=\"https:\/\/marathonmondaylpr.com\/wp-content\/uploads\/2026\/03\/MMMnogoat.png\" fetchpriority=\"high\">\n<link rel=\"preload\" as=\"image\" href=\"https:\/\/marathonmondaylpr.com\/wp-content\/uploads\/2026\/03\/TROUGH-1.png\" fetchpriority=\"high\">\n\n<style id=\"loader-critical-css\">\n    \/* Only apply the lock and background while the loader is ACTIVE *\/\n    body.loader-active {\n        overflow: hidden !important;\n        \/* iOS specific locks to prevent scroll bleed *\/\n        height: 100vh !important; \n        height: 100dvh !important; \n        \/* Matches your loader color to prevent the gray flash *\/\n        background-color: #0A3479 !important; \n    }\n\n    #custom-page-loader {\n        position: fixed;\n        top: 0;\n        left: 0;\n        right: 0;\n        bottom: 0; \/* Better than 100vh\/100vw for mobile URL bars *\/\n        background-color: #0A3479;\n        display: flex;\n        justify-content: center;\n        align-items: center;\n        z-index: 2147483647; \/* Highest possible z-index *\/\n        pointer-events: all;\n        touch-action: none; \/* Kills iOS scroll bouncing *\/\n        transition: opacity 0.4s ease;\n    }\n\n    #custom-page-loader img {\n        position: absolute;\n        width: 10%;\n        min-width: 150px;\n        max-width: 80vw; \/* Prevents overflow on very narrow phones *\/\n        height: auto; \/* Maintains aspect ratio *\/\n        object-fit: contain;\n        opacity: 0;\n        transform: translateZ(0); \/* GPU acceleration *\/\n        will-change: opacity;\n    }\n\n    \/* Snappy 2.5s sequence *\/\n    .animate-img-1 { animation: loaderStep1 2.5s forwards linear; }\n    .animate-img-2 { animation: loaderStep2 2.5s forwards linear; }\n\n    @keyframes loaderStep1 {\n        0% { opacity: 1; } \/* Start visible immediately *\/\n        40% { opacity: 1; }\n        45% { opacity: 0; }\n        100% { opacity: 0; }\n    }\n\n    @keyframes loaderStep2 {\n        0% { opacity: 0; }\n        45% { opacity: 0; }\n        50% { opacity: 1; } \/* Swap instant *\/\n        90% { opacity: 1; }\n        100% { opacity: 0; }\n    }\n<\/style>\n\n<div id=\"custom-page-loader\">\n    <img decoding=\"async\" id=\"loader-img-1\" class=\"animate-img-1\" src=\"https:\/\/marathonmondaylpr.com\/wp-content\/uploads\/2026\/03\/MMMnogoat.png\" alt=\"1\">\n    <img decoding=\"async\" id=\"loader-img-2\" class=\"animate-img-2\" src=\"https:\/\/marathonmondaylpr.com\/wp-content\/uploads\/2026\/03\/TROUGH-1.png\" alt=\"2\">\n<\/div>\n\n<script>\n    (function() {\n        const loader = document.getElementById('custom-page-loader');\n        const body = document.body;\n        \n        const isEditor = window.location.href.indexOf('elementor') !== -1;\n        const hasSeen = sessionStorage.getItem('siteLoaderShown');\n\n        \/\/ Kill it immediately if they've seen it or are editing\n        if (isEditor || hasSeen) {\n            if(loader) loader.style.display = 'none';\n            return;\n        }\n\n        \/\/ Add the lock class to body\n        body.classList.add('loader-active');\n\n        \/\/ Force cleanup after 2.5 seconds\n        setTimeout(() => {\n            loader.style.opacity = '0';\n            \n            setTimeout(() => {\n                \/\/ Restore the layout completely\n                body.classList.remove('loader-active');\n                sessionStorage.setItem('siteLoaderShown', 'true');\n                \n                \/\/ Hard delete the loader element so it can't interfere with clicks\/menu\n                loader.remove();\n                \n                \/\/ Force a window resize event to \"wake up\" the side menu if it got stuck\n                window.dispatchEvent(new Event('resize'));\n            }, 400); \n        }, 2500);\n    })();\n<\/script>\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-4dd8197 e-flex e-con-boxed e-con e-parent\" data-id=\"4dd8197\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t<div class=\"elementor-element elementor-element-4f5ac76 elementor-widget elementor-widget-html\" data-id=\"4f5ac76\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<style>\n\/* 1. THE FONT ENGINE *\/\n@font-face {\n    font-family: 'CITY-MAIN';\n    src: url('https:\/\/marathonmondaylpr.com\/wp-content\/uploads\/fonts\/CityPBol%20Regular.woff2') format('woff2');\n    font-weight: normal;\n    font-style: normal;\n    font-display: swap;\n}\n\n\/* 2. THE WHOLE SITE (Safe Version) *\/\n\/* Targets content, not the structure\/dashboard *\/\nbody, \np, \na, \nli, \nh1, h2, h3, h4, h5, h6, \n.elementor-heading-title, \n.elementor-widget-text-editor,\n.scroll-text, \n.scroll-text span {\n    font-family: 'CITY-MAIN', sans-serif !important;\n    -webkit-font-smoothing: antialiased;\n}\n\n\/* 3. PROTECT THE ICONS & BUILDER *\/\n\/* Forces Elementor icons and FontAwesome to stay as icons *\/\ni, \n[class^=\"eicon\"], \n[class*=\" eicon\"], \n[class^=\"fa-\"], \n[class*=\" fa-\"] {\n    font-family: 'eicons', 'Font Awesome 5 Free', 'Font Awesome 5 Brands', sans-serif !important;\n}\n<\/style>\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>ETUSIVU ARTISTIT AIKATAULU TAPAHTUMA-ALUE YHTEISTY\u00d6KUMPPANIT Designed by Jonas Jokinen HAPPORADIO \/\/ GOOD BOYS \/\/ STIG \/\/ DOG HUSTLERS \/\/ LAPPEENRANNASSA \/\/ 13.-14.4.2026 \/\/&nbsp; HAPPORADIO \/\/ GOOD BOYS \/\/ STIG \/\/ DOG HUSTLERS \/\/ LAPPEENRANNASSA \/\/ 13.-14.4.2026 \/\/&nbsp; Marathon Monday Hero Selaimesi ei tue videota. 13.-14.4.2026 MARATHONMONDAY Tapahtumien G.O.A.T. Koko vuoden pisin ja hauskin maanantai. T\u00e4m\u00e4 [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"open","ping_status":"closed","template":"elementor_canvas","meta":{"footnotes":""},"class_list":["post-7","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/marathonmondaylpr.com\/index.php\/wp-json\/wp\/v2\/pages\/7","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/marathonmondaylpr.com\/index.php\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/marathonmondaylpr.com\/index.php\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/marathonmondaylpr.com\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/marathonmondaylpr.com\/index.php\/wp-json\/wp\/v2\/comments?post=7"}],"version-history":[{"count":132,"href":"https:\/\/marathonmondaylpr.com\/index.php\/wp-json\/wp\/v2\/pages\/7\/revisions"}],"predecessor-version":[{"id":234,"href":"https:\/\/marathonmondaylpr.com\/index.php\/wp-json\/wp\/v2\/pages\/7\/revisions\/234"}],"wp:attachment":[{"href":"https:\/\/marathonmondaylpr.com\/index.php\/wp-json\/wp\/v2\/media?parent=7"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}