/*------------------------------------------------*/
/*---OOH PROJECTATONS DETAIL PAGE - 24-04-2024---*/
/*----------------------------------------------*/ 

#main-content p:empty { display: none;}
.mb-0 { margin-bottom:0;}

/*---INTRODUCTION---*/
#introduction { }

/*reboot*/ 
#introduction .container .cols { margin:0;}
#introduction .container .cols .col-10 { padding:0;}

#introduction .cols { justify-content: center;}
#introduction p.lead { margin-bottom:40px;}
#introduction .information-illu {margin-bottom:0; }
#introduction img {  max-width: 100%; height: auto; border-radius: 12px;}

/*---INFORMATION---*/
#information { margin-top:-9rem; padding-top:9rem; padding-bottom:18rem; background-color: #F3F4F7;}

/*reboot*/ 
#information .container .cols { margin:0;}
#information .container .cols .col-10 { padding:0;}

#information .cols { justify-content: center;}

@media screen and (min-width: 769px) {
  #information { margin-top:-18rem; padding-top:18rem;}
}

/*---BOX CTA REPORT---*/
#box-cta-report { margin-top:-12rem; padding-top:0; position:relative;}
#box-cta-report .projectathon-box { padding:1.5rem; background-color: #00284A; border-radius:20px;}
#box-cta-report .container .cols { margin-bottom:-1rem;}
#box-cta-report .projectathon-box-col-illu { margin-bottom:1rem;}
#box-cta-report .projectathon-box-col-illu img { width: 120px; height:auto;}
#box-cta-report h3, #box-cta-report p { color: white;}
#box-cta-report p.p-opacity { opacity: 0.75}
#box-cta-report p:last-of-type { margin-bottom:0;}
/*hack - remove empty p from confluence*/
#box-cta-report .container > p:first-child, #box-cta-events .container > p:last-child { display: none; border:1px solid green;}

@media screen and (min-width: 769px) {
 #box-cta-report .projectathon-box { padding:2.5rem;}
 #box-cta-report .projectathon-box-cols { display: flex; align-items: center;}
 #box-cta-report .projectathon-box-col-illu { margin-bottom:0; padding:0 3rem 0 0}
}

@media screen and (min-width: 1366px) {
 #box-cta-report .projectathon-box { padding:5rem;}
}

/*---GALLERY---*/
#gallery { position: relative; z-index: 2; padding-top:0; padding-bottom:0;}

/*reboot*/ 
#gallery .container .cols { margin:0;}
#gallery .container .cols .col-10 { padding:0;}

#gallery .container .cols > div p:first-child, #gallery .container .cols > div p:last-child { display: none;}
#gallery .cols { justify-content: center;}
.wiki-content .gallery-p { margin:0 0 2rem 0;}
.wiki-content .gallery-cta { margin:2rem 0 0 0;}

.gallery { margin: 0 -5px!important; width:100%;}
.gallery table { width:100%;}
.gallery table td { width:20%;}
.gallery table td img { margin: 0 !important; padding: 5px; width: 100%; max-width: 400px; height: auto; border-radius: 16px;}
.gallery table td img:hover { cursor: pointer;}

/*cols video*/
.cols-video { justify-content: center;}
#gallery .cols:nth-child(2) {  padding-top:120px;}
.cols-video div p:first-child { display: none; border:1px solid yellow;}

/*tabs video*/
#tabs-video-nav { list-style: none; margin: 40px 0 0 0; padding: 0; overflow: auto;}
#tabs-video-nav li a { text-decoration: none; color: #001832;}
#tabs-video-nav li a .cover-play { position: relative; display:inline-block; line-height: 0;}
#tabs-video-nav li a .cover-play:before { z-index: 1000; content: ""; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); height: 40px; width: 40px; background: url(https://ec.europa.eu/digital-building-blocks/sites/download/attachments/581239505/ico-play-video-secondary.svg)}
#tabs-video-nav li a .cover-play img { width: 100%; max-width: 110px; height: auto; border: 2px solid transparent; border-radius:16px; opacity: 1; filter: brightness(0.7) saturate(0.7);}
#tabs-video-nav li:hover a .cover-play img { opacity: 1; filter: none;}
#tabs-video-nav li.active a .cover-play:before { display: none;}
#tabs-video-nav li.active a .cover-play img { /*border: 2px solid #842DB5;*/ opacity: 1; filter: none;}
#tabs-video-nav li a .cover-text { display: block; color: #3D597A;}
#tabs-video-nav li.active a .cover-text { color:#842DB5;}

.tabs-video-content { background-color: #FFF;}
.tabs-video-content-iframe { position: relative; width: 100%; overflow: hidden; padding-top: 56.25%; /* 16:9 Aspect Ratio */}
.tabs-video-content-iframe iframe { position: absolute; top: 0; left: 0; bottom: 0; right: 0; width: 100%; height: 100%; border: none; border-radius: 16px;}

@media screen and (min-width: 769px) {
  #tabs-video-nav { list-style: none; display:flex; justify-content:center; gap: 2%; padding: 0; overflow: auto;}
  #tabs-video-nav li { width: 33%; cursor: pointer;}
  #tabs-video-nav li a .cover-play img { width: 100%; max-width: 360px; height: auto;}
}
/*---UPCOMING PROJECTATONS---*/
#upcoming-projectatons {}

/*reboot*/ 
#upcoming-projectatons .container .cols { margin:0;}
#upcoming-projectatons .container .cols .col-10 { padding:0;}

#upcoming-projectatons .cols { justify-content: center;}

#upcoming-projectatons .badge { display:flex; align-items:center; gap:4px; border-radius:4px;}

.card-upcoming-cols { display: flex; flex-direction: column; margin-top:40px; width: 100%; gap:24px;}
.card-upcoming { position: relative; display: flex; flex-direction: column; min-width: 0; height: 100% !important; padding:1rem 2rem 2rem 2rem; background-color: white; box-shadow: 0px 2px 12px rgba(0, 24, 50, 0.12); border-radius: 12px; overflow: hidden;}

.card-upcoming-body a { display: block; line-height:0; text-align: right; height: 300px; border-top-right-radius: 12px; border-top-left-radius: 12px; overflow: hidden;}
.card-upcoming-col.p2 .card-upcoming-body a { margin:-1rem 0 0 -3rem; width: 130%; background: url("https://ec.europa.eu/digital-building-blocks/sites/download/attachments/645595199/illu-card-projectathon-02.jpg"); background-size: cover; border-radius: 100% 0% 38% 62% / 0% 88% 12% 100% ;}
.card-upcoming-col.p1 .card-upcoming-body a { margin:-1rem 0 0 -3rem; width: 130%; background: url("https://ec.europa.eu/digital-building-blocks/sites/download/attachments/645595199/illu-card-projectathon-01.png"); background-size: cover; background-position: top center; border-radius: 100% 0% 38% 62% / 0% 88% 12% 100% ;}

.card-upcoming-body h3 { margin-top:24px; font-size:20px; line-height:24px;}
.card-upcoming-body p:last-child { margin-bottom:0;}
.card-upcoming-date { font-size: 14px !important; color: #5E748E !important;}

.card-upcoming-footer { margin-top:24px;}
.card-upcoming-footer p:last-child { margin-bottom:0; text-align:right;}

@media screen and (min-width: 992px) {
  .card-upcoming-cols { flex-direction:row; margin-left:auto; margin-right: auto; width: 80%; gap:24px;}
  .card-upcoming-col:nth-child(1) { width: 50%;}
  .card-upcoming-col:nth-child(2) { width: 50%;}
  .card-upcoming-body { flex: 1 1 auto;}
  .card-upcoming-body a { height: 220px;}
}
<div class="cols">
<div class="col-10">

<p><a class="link-cta primary before" href="https://ec.europa.eu/digital-building-blocks/sites/display/OOTS/Projectathons"><span>Back to projectathons</span></a></p>
<h1>Projectathon #3</h1>
<p class="lead">A marathon of peer-to-peer interoperability and compliance tests in a structured environment.</p>
<p><span class="badge neutral">Past event</span></p>
<p class="information-illu"><img aria-hidden="true" alt="" src="https://ec.europa.eu/digital-building-blocks/sites/download/attachments/674506672/illu-introduction-projectathon-03-2024.jpg"></p>

</div>
</div>
<div class="cols">
<div class="col-10">
<h2>Once-Only Technical System Projectathon #3 Insights</h2>
<p>On 23 November 2023, the European Commission published the event report for the October 2023 Once-Only Technical System Projectathon, a third and final marathon of peer-to-peer testing helping implementation teams from EU Member States prepare their respective Once-Only Technical System implementations in 2023.</p>
<p>This October Projectathon welcomed 24 Member States, on-site or online and as active participants. Participants executed 478 peer-to-peer tests, compared to 59 tests in April 2023, and 149 in June. This event concluded with a success rate of 91% for tests between participating countries. Building on the work of April and June Projectathons, this event also contributed to building a community out of the teams implementing the Once-Only Technical System. One participant noted: “the value of these events go beyond the actual testing and its benefits. The possibility to exchange ideas and best practices, and discuss the challenges with colleagues from other Member States is important. Thank you for organising!”</p>
<p class="mb-0">On 11-12 December 2023, a Go-Live Accelerator will drive the transition from the testing phase of the project to the operational phase of the system. It will mark the point where the system is deemed established and the Common Services ready to be used by Member States.</p>

</div>
</div>
<div class="cols justify-content-center">

<div class="col-7">
<div class="projectathon-box">
<div class="projectathon-box-cols">

<div class="projectathon-box-col-illu">
<img aria-hidden="true" alt="" src="https://ec.europa.eu/digital-building-blocks/sites/download/attachments/645595199/illu-projectathon-report.png">  
</div>

<div class="projectathon-box-col-content">
<h3 class="h5">Projectathon #3 Report</h3>
<p class="p-opacity">This report summarises key results from the testing that took place from 18-20 October 2023.</p>
<!--<p><span class="badge warning">Coming soon</span></p>-->
<p><a class="btn primary-bis" href="https://ec.europa.eu/digital-building-blocks/sites/download/attachments/674506672/Once_Only_Technical_System_Projectathon_Event_Report_October_v1.00.pdf" onclick="_paq.push(['trackEvent','conversion','oots-projectathon-detail-page-03','oots-projectathon-report'])"><span>Download the Report</span><span class="ico-download"></span></a></p>
</div>

</div>
</div>
</div>

</div>
<h2>Gallery</h2>
<p class="gallery-p">Experience the event in its entirety and relive every moment with our gallery.</p>

<p class="gallery-cta"><a class="btn ghost" href="https://ec.europa.eu/digital-building-blocks/sites/display/OOTS/Projectathon3+gallery"><span>See all gallery images</span><span class="ico-cta-forward"></span></a></p>
<script>
$(document).ready(function(){

// Show the first tab and hide the rest
$('#tabs-video-nav li:first-child').addClass('active');
$('.tab-video-content').hide();
$('.tab-video-content:first').show();

// Click function
$('#tabs-video-nav li').click(function(){
  $('#tabs-video-nav li').removeClass('active');
  $(this).addClass('active');
  $('.tab-video-content').hide();
  
  var activeTab = $(this).find('a').attr('href');
  $(activeTab).fadeIn();
  return false;
});

});
</script>

<h2>Videos</h2>
<p class="gallery-p">Discover how this Projectathon helped Member States prepare for the OOTS launch.</p>

<div id="tabs-video-content">

<div id="tab4" class="tab-video-content">
<div class="tabs-video-content-iframe">
<iframe src="https://europa.eu/webtools/crs/iframe/?oriurl=https%3A%2F%2Fwww.youtube.com%2fembed%2fEBDA9SJS46M" allowfullscreen="" width="100%" height="315" frameborder="0"></iframe>
</div>
</div>

<div id="tab3" class="tab-video-content">
<div class="tabs-video-content-iframe">
<iframe src="https://europa.eu/webtools/crs/iframe/?oriurl=https%3A%2F%2Fwww.youtube.com%2fembed%2fOCAqdAzlYO4" allowfullscreen="" width="100%" height="315" frameborder="0"></iframe>
</div>
</div>

<div id="tab1" class="tab-video-content">
<div class="tabs-video-content-iframe">
<iframe src="https://europa.eu/webtools/crs/iframe/?oriurl=https%3A%2F%2Fwww.youtube.com%2fembed%2fFKwwm5PfPpI" allowfullscreen="" width="100%" height="315" frameborder="0"></iframe>
</div>
</div>

</div> 
<ul id="tabs-video-nav">
<li><a href="#tab4"><span class="cover-play"><img class="cover-img" src="https://ec.europa.eu/digital-building-blocks/sites/download/attachments/645595199/cover-video-projectathon-1-anne-gaelle-berge.png" alt="What is a Projectathon"></span><span class="cover-text">"What is a Projectathon"<br><span style="font-size:14px"><strong>Anne-Gaëlle Bergé</strong> - Expert in System Interoperability, Kereval</span></span></a></li>
<li><a href="#tab1"><span class="cover-play"><img class="cover-img" src="https://ec.europa.eu/digital-building-blocks/sites/download/attachments/645595199/cover-video-projectathon-2-aftermovie.png" alt="OOTS Projectathon"></span><span class="cover-text">"OOTS Projectathon"<br><span style="font-size:14px"><strong>14 - 16 June 2023, Brussels, Belgium</strong> - Aftermovie</span></span></a></li>
<li><a href="#tab3"><span class="cover-play"><img class="cover-img" src="https://ec.europa.eu/digital-building-blocks/sites/download/attachments/645595199/cover-video-projectathon-1-david-blanchard.png" alt="The Value of Once-Only"></span><span class="cover-text">"The Value of Once-Only" <br> <span style="font-size:14px"> <strong>David Blanchard</strong> - Deputy Head of Unit, DG GROW European Commission<br><strong>Joao Rodrigues Frade</strong> - Head of Sector Building Blocks, DIGIT European Commission</span></span></a></li>
</ul>

<script>
let listOfVideos = document.querySelector("#tabs-video-nav");
Array.from(listOfVideos.children).forEach((li, indexList) => { li.addEventListener("click", function(e) { $("iframe").each(function(index) { if(index != indexList) {
    var src = $(this).attr('src');
    $(this).attr('src', src);}});})})
</script>
<div class="cols">
<div class="col-10">

<h2>Other Past Projectathons</h2>
<p class="mb-0">Since 2023, the Commission has been organising Once-Only Technical System Projectathons. These are three-day events where national teams connect various systems and perform a marathon of peer-to-peer interoperability and compliance tests in a structured environment.</p>

</div>
</div>
<div class="card-upcoming-cols">

<!--CARD 01-->
<div class="card-upcoming-col p2">
<div class="card-upcoming">
<div class="card-upcoming-body">
<a href="#" style="pointer-events: none;"></a>
<h3>Projectathon #2</h3>   
<p>The June Projectathon provided a valuable moment for national implementation teams to perform interoperability tests prior to the summer recess.</p>

</div>
<div class="card-upcoming-footer">
<p class="card-upcoming-date">14 - 16 June 2023 | Brussels</p>
<p><a class="btn ghost" href="https://ec.europa.eu/digital-building-blocks/sites/display/OOTS/Projectathon2"><span>Read more</span><span class="ico-cta-forward"></span></a></p>
</div>
</div>
</div>
<!---->

<!--CARD 02-->
<div class="card-upcoming-col p1">
<div class="card-upcoming">
<div class="card-upcoming-body">
<a href="#" style="pointer-events: none;"></a>
<h3>Projectathon #1</h3>   
<p>The April Projectathon brought together participants and observers to perform key tests on their national Once-Only Technical System implementations, ahead of the June and October sessions.</p>

</div>
<div class="card-upcoming-footer">
<p class="card-upcoming-date">19 - 21 April 2023 | Brussels</p>
<p><a class="btn ghost" href="https://ec.europa.eu/digital-building-blocks/sites/display/OOTS/Projectathon1"><span>Read more</span><span class="ico-cta-forward"></span></a></p>
</div>
</div>
</div>
<!---->

</div>