{"id":1052,"date":"2022-06-13T10:19:16","date_gmt":"2022-06-13T10:19:16","guid":{"rendered":"https:\/\/nnkgas.gr\/idc\/?page_id=1052"},"modified":"2025-08-22T15:16:15","modified_gmt":"2025-08-22T15:16:15","slug":"history","status":"publish","type":"page","link":"https:\/\/idc-cdi.com\/staging\/history\/","title":{"rendered":"History"},"content":{"rendered":"\t\t<div data-elementor-type=\"wp-page\" data-elementor-id=\"1052\" class=\"elementor elementor-1052\" data-elementor-post-type=\"page\">\n\t\t\t\t<div class=\"elementor-element elementor-element-d9c0153 e-con-full e-flex e-con e-parent\" data-id=\"d9c0153\" data-element_type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-b644cb5 elementor-widget elementor-widget-html\" data-id=\"b644cb5\" data-element_type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<div class=\"timeline-container\">\r\n  <div class=\"background-slider-scroll\">\r\n    <div class=\"slide-track\" id=\"slideTrack\"><\/div>\r\n  <\/div>\r\n  <div class=\"degradado-overlay\"><\/div>\r\n  <div class=\"timeline-years\">\r\n    <ul>\r\n      <li data-year=\"1925\">1925<\/li>\r\n      <li data-year=\"1939-1945\">1939-1945<\/li>\r\n      <li data-year=\"1947\">1947<\/li>\r\n      <li data-year=\"1948\">1948<\/li>\r\n      <li data-year=\"1950\">1950<\/li>\r\n      <li data-year=\"1956\">1956<\/li>\r\n      <li data-year=\"1960\">1960<\/li>\r\n      <li data-year=\"1961\">1961<\/li>\r\n      <li data-year=\"1982\">1982<\/li>\r\n      <li data-year=\"1999\">1999<\/li>\r\n      <li data-year=\"2021\">2021<\/li>\r\n    <\/ul>\r\n  <\/div>\r\n  <div class=\"timeline-content\">\r\n    <div class=\"timeline-text fade-text\" id=\"timelineText\">\r\n      <h5 id=\"year\">1925<\/h5>\r\n      <h2 id=\"title\"><\/h2>\r\n      <p id=\"desc\" class=\"collapsed-text\"><\/p>\r\n    <\/div>\r\n  <\/div>\r\n<\/div>\r\n\r\n<style>\r\n.timeline-container {\r\n  display: flex;\r\n  flex-direction: row;\r\n  height: 100vh;\r\n  width: 100vw;\r\n  position: relative;\r\n  overflow: hidden;\r\n  box-sizing: border-box;\r\n  color: white;\r\n}\r\n\r\n.background-slider-scroll {\r\n  position: absolute;\r\n  top: 0;\r\n  left: 0;\r\n  width: 100%;\r\n  height: 100%;\r\n  z-index: 0;\r\n  overflow: hidden;\r\n}\r\n\r\n.slide-track {\r\n  display: flex;\r\n  flex-direction: column;\r\n  height: 100%;\r\n  transition: transform 1s ease-in-out;\r\n}\r\n\r\n.slide-track .slide {\r\n  width: 100vw;\r\n  height: 100vh;\r\n  background-size: cover;\r\n  background-position: top;\r\n  flex-shrink: 0;\r\n}\r\n\r\n.degradado-overlay {\r\n  position: absolute;\r\n  top: 0;\r\n  right: 0;\r\n  width: 100%;\r\n  height: 100%;\r\n  background-image: url('https:\/\/idc-cdi.com\/staging\/wp-content\/uploads\/2025\/06\/degradado-IDC-CDI-Background.png');\r\n  background-size: cover;\r\n  background-repeat: no-repeat;\r\n  pointer-events: none;\r\n  z-index: 1;\r\n}\r\n\r\n.timeline-years {\r\n  z-index: 2;\r\n  position: relative;\r\n  padding: 2rem;\r\n  display: flex;\r\n  align-items: center;\r\n  justify-content: center;\r\n}\r\n\r\n.timeline-years ul {\r\n  list-style: none;\r\n  padding: 0;\r\n  margin: 0;\r\n  display: flex;\r\n  flex-direction: column;\r\n  gap: 1rem;\r\n}\r\n\r\n.timeline-years li {\r\n  cursor: pointer;\r\n  font-size: 1.5rem;\r\n  opacity: 0.85;\r\n  transition: 0.3s;\r\n  font-family: 'Montserrat', sans-serif;\r\n  font-weight: 900;\r\n}\r\n\r\n.timeline-years li.active,\r\n.timeline-years li:hover {\r\n  opacity: 1;\r\n  font-weight: bold;\r\n}\r\n\r\n.timeline-content {\r\n  flex: 1;\r\n  z-index: 2;\r\n  padding: 2rem;\r\n  margin: 2rem;\r\n  display: flex;\r\n  align-items: center;\r\n  justify-content: center;\r\n  overflow: auto;\r\n  max-height: 100vh;\r\n}\r\n\r\n.timeline-text {\r\n  max-width: 800px;\r\n  font-family: 'Montserrat', sans-serif;\r\n  position: relative;\r\n  z-index: 2;\r\n  opacity: 1;\r\n  transition: opacity 1.2s ease-in-out;\r\n}\r\n\r\n.timeline-text.fade-out {\r\n  opacity: 0;\r\n}\r\n\r\n.timeline-content h5 {\r\n  margin-top: 0;\r\n  font-size: 1.5rem;\r\n  color: #ffdddd;\r\n  font-family: 'Montserrat', sans-serif;\r\n  font-weight: 900;\r\n}\r\n\r\n.timeline-content h2 {\r\n  font-size: 2rem;\r\n  margin-bottom: 1rem;\r\n  font-weight: 700;\r\n}\r\n\r\n.timeline-content p {\r\n  font-size: 1.1rem;\r\n  font-weight: 400;\r\n  overflow: hidden;\r\n  text-overflow: ellipsis;\r\n  display: -webkit-box;\r\n  -webkit-line-clamp: 5;\r\n  -webkit-box-orient: vertical;\r\n}\r\n\r\n.timeline-content p.expanded-text {\r\n  -webkit-line-clamp: unset;\r\n  overflow: visible;\r\n}\r\n@media screen and (max-width: 768px) {\r\n  .timeline-container {\r\n    flex-direction: column;\r\n    height: auto;\r\n  }\r\n\r\n  \/* Fondo en m\u00f3vil: mostramos solo 1 imagen *\/\r\n  .background-slider-scroll {\r\n    position: relative;\r\n    width: 100%;\r\n    height: auto;\r\n    overflow: hidden;\r\n  }\r\n\r\n  .slide-track {\r\n    display: block; \/* quitar flex *\/\r\n    transform: none !important; \/* desactivar translate *\/\r\n    height: auto;\r\n  }\r\n\r\n  .slide-track .slide {\r\n    width: 100%;\r\n    height: 270px; \/* alto fijo en m\u00f3vil *\/\r\n    background-size: cover;\r\n    background-position: top;\r\n  }\r\n.degradado-overlay {\r\n    transform: rotate(270deg);\r\n    height: 768px;\r\n    width: 768px;\r\n}\r\n  \/* Lista de a\u00f1os horizontal debajo *\/\r\n  .timeline-years {\r\n    order: 2;\r\n    padding: 1rem;\r\n    width: 90%;\r\n    margin: 0 auto;\r\n    overflow-x: scroll; \/* forzamos scroll siempre *\/\r\n    overflow-y: hidden;\r\n    scrollbar-width: thin;  \/* Firefox *\/\r\n    scrollbar-color: rgba(255,0,0,0.6) rgba(255,0,0,0.2);\r\n  }\r\n\r\n  \/* Webkit (Chrome, Safari, Edge Chromium) *\/\r\n  .timeline-years::-webkit-scrollbar {\r\n    height: 6px;\r\n    background: rgba(255,0,0,0.2); \/* fondo visible siempre *\/\r\n  }\r\n\r\n  .timeline-years::-webkit-scrollbar-track {\r\n    background: rgba(255,0,0,0.2);\r\n    border-radius: 10px;\r\n  }\r\n\r\n  .timeline-years::-webkit-scrollbar-thumb {\r\n    background: rgba(255,0,0,0.6);\r\n    border-radius: 10px;\r\n  }\r\n\r\n  .timeline-years::-webkit-scrollbar-thumb:hover {\r\n    background: rgba(255,0,0,0.8);\r\n  }\r\n\r\n\r\n  .timeline-years ul {\r\n    flex-direction: row;\r\n    flex-wrap: nowrap;\r\n    gap: 1rem;\r\n    width: 100%;\r\n  }\r\n\r\n  .timeline-years li {\r\n    font-size: 1rem;\r\n    white-space: nowrap;\r\n  }\r\n\r\n  \/* Texto debajo *\/\r\n  .timeline-content {\r\n    order: 3;\r\n    width: 100%;\r\n    padding: 1rem;\r\n    margin: 0;\r\n  }\r\n\r\n  .timeline-text {\r\n    max-width: 100%;\r\n    width: 100%;\r\n  }\r\n\r\n  .timeline-content h2 {\r\n    font-size: 1.3rem;\r\n    color: #fff;\r\n  }\r\n\r\n  .timeline-content p {\r\n    font-size: 1rem;\r\n    -webkit-line-clamp: unset; \/* mostrar texto completo *\/\r\n    overflow: visible;\r\n  }\r\n}\r\n\r\n<\/style>\r\n\r\n<script>\r\nconst imageMap = {\r\n  \"1925\": {\r\n    title: \"Secr\u00e9tariat International des Partis D\u00e9mocratiques d\u2019Inspiration Chr\u00e9tienne (SIPDIC)\",\r\n    desc: \"The first international gathering of Catholic-Christian democratic parties takes place in Paris...\",\r\n    img: \"https:\/\/idc-cdi.com\/staging\/wp-content\/uploads\/2022\/06\/history-1.jpg\"\r\n  },\r\n  \"1939-1945\": {\r\n    title: \"World War II\",\r\n    desc: \"World War II suspends the operations of the SIPDIC.\",\r\n    img: \"https:\/\/idc-cdi.com\/staging\/wp-content\/uploads\/2022\/06\/history-2.jpg\"\r\n  },\r\n  \"1947\": {\r\n    title: \"Organizaci\u00f3n Dem\u00f3crata Cristiana de Am\u00e9rica (ODCA)\",\r\n    desc: \"Political leaders from Argentina, Brazil, Chile, and Uruguay meet in Montevideo...\",\r\n    img: \"https:\/\/idc-cdi.com\/staging\/wp-content\/uploads\/2022\/06\/history-3.jpg\"\r\n  },\r\n  \"1948\": {\r\n    title: \"Nouvelles \u00c9quipes Internationales (NEI)\",\r\n    desc: \"European Christian Democrats formed the NEI in Chaudfontaine, Belgium...\",\r\n    img: \"https:\/\/idc-cdi.com\/staging\/wp-content\/uploads\/2022\/06\/history-4.jpg\"\r\n  },\r\n  \"1950\": {\r\n    title: \"Christian Democratic Union of Central Europe (CDUCE)\",\r\n    desc: \"The CDUCE is formed in New York City to assist Christian democratic parties in exile...\",\r\n    img: \"https:\/\/idc-cdi.com\/staging\/wp-content\/uploads\/2022\/06\/hero-6-overlay.jpg\"\r\n  },\r\n  \"1956\": {\r\n    title: \"ODCA, NEI, and CDUCE Meeting\",\r\n    desc: \"The ODCA, NEI, and CDUCE meet for the first time in Paris...\",\r\n    img: \"https:\/\/idc-cdi.com\/staging\/wp-content\/uploads\/2022\/06\/history-5.jpg\"\r\n  },\r\n  \"1960\": {\r\n    title: \"Christian Democratic International Information and Documentation Centre (CDI-IDC)\",\r\n    desc: \"The three regional Christian democratic organizations establish the CDI-IDC in Rome...\",\r\n    img: \"https:\/\/idc-cdi.com\/staging\/wp-content\/uploads\/2022\/06\/history-6.jpg\"\r\n  },\r\n  \"1961\": {\r\n    title: \"World Union of Christian Democrats (WUCD)\",\r\n    desc: \"The WUCD is established in Santiago.\",\r\n    img: \"https:\/\/idc-cdi.com\/staging\/wp-content\/uploads\/2022\/06\/history-7.jpg\"\r\n  },\r\n  \"1982\": {\r\n    title: \"Christian Democrat International (CDI)\",\r\n    desc: \"The WUCD changes its name to the CDI.\",\r\n    img: \"https:\/\/idc-cdi.com\/staging\/wp-content\/uploads\/2022\/06\/hero-6-overlay.jpg\"\r\n  },\r\n  \"1999\": {\r\n    title: \"Centrist Democrat International\",\r\n    desc: \"The CDI changes its name due to growing membership of non-Christian political parties...\",\r\n    img: \"https:\/\/idc-cdi.com\/staging\/wp-content\/uploads\/2022\/06\/hero-6-overlay.jpg\"\r\n  },\r\n  \"2021\": {\r\n    title: \"Centrist Democrat International\",\r\n    desc: \"This organisation underwent a profound change in its legal and constitutive form...\",\r\n    img: \"https:\/\/idc-cdi.com\/staging\/wp-content\/uploads\/2022\/06\/hero-6-overlay.jpg\"\r\n  }\r\n};\r\n\r\nconst yearList = document.querySelectorAll(\".timeline-years li\");\r\nconst yearEl = document.getElementById(\"year\");\r\nconst titleEl = document.getElementById(\"title\");\r\nconst descEl = document.getElementById(\"desc\");\r\nconst slideTrack = document.getElementById(\"slideTrack\");\r\n\r\n\/\/ Crear slides\r\nObject.entries(imageMap).forEach(([key, data]) => {\r\n  const slide = document.createElement(\"div\");\r\n  slide.className = \"slide\";\r\n  slide.style.backgroundImage = `url(${data.img})`;\r\n  slideTrack.appendChild(slide);\r\n});\r\n\r\nfunction updateContent(year) {\r\n  const data = imageMap[year];\r\n  if (data) {\r\n    yearEl.textContent = year;\r\n    titleEl.textContent = data.title;\r\n    descEl.textContent = data.desc;\r\n\r\n    const index = Object.keys(imageMap).indexOf(year);\r\n    const axis = window.innerWidth < 768 ? null : 'Y';\r\n\r\n    if (axis) {\r\n      \/\/ Desktop: mover slides\r\n      slideTrack.style.transform = `translate${axis}(-${index * 100}%)`;\r\n    } else {\r\n      \/\/ M\u00f3vil: mostrar solo la imagen seleccionada\r\n      slideTrack.innerHTML = \"\";\r\n      const slide = document.createElement(\"div\");\r\n      slide.className = \"slide\";\r\n      slide.style.backgroundImage = `url(${data.img})`;\r\n      slideTrack.appendChild(slide);\r\n    }\r\n\r\n    yearList.forEach(li => li.classList.remove(\"active\"));\r\n    document.querySelector(`.timeline-years li[data-year=\"${year}\"]`).classList.add(\"active\");\r\n  }\r\n}\r\n\r\n\r\n\/\/ Inicializar con primer a\u00f1o\r\nupdateContent(\"1925\");\r\n\r\n\/\/ Listeners\r\nyearList.forEach(li => {\r\n  li.addEventListener(\"click\", () => {\r\n    updateContent(li.getAttribute(\"data-year\"));\r\n  });\r\n});\r\n<\/script>\r\n\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":"<p>1925 1939-1945 1947 1948 1950 1956 1960 1961 1982 1999 2021 1925<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"elementor_header_footer","meta":{"_acf_changed":false,"_seopress_robots_primary_cat":"","_seopress_titles_title":"","_seopress_titles_desc":"","_seopress_robots_index":"","inline_featured_image":false,"footnotes":""},"class_list":["post-1052","page","type-page","status-publish","hentry"],"acf":[],"_links":{"self":[{"href":"https:\/\/idc-cdi.com\/staging\/wp-json\/wp\/v2\/pages\/1052","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/idc-cdi.com\/staging\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/idc-cdi.com\/staging\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/idc-cdi.com\/staging\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/idc-cdi.com\/staging\/wp-json\/wp\/v2\/comments?post=1052"}],"version-history":[{"count":3,"href":"https:\/\/idc-cdi.com\/staging\/wp-json\/wp\/v2\/pages\/1052\/revisions"}],"predecessor-version":[{"id":6101,"href":"https:\/\/idc-cdi.com\/staging\/wp-json\/wp\/v2\/pages\/1052\/revisions\/6101"}],"wp:attachment":[{"href":"https:\/\/idc-cdi.com\/staging\/wp-json\/wp\/v2\/media?parent=1052"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}