Versions Compared

Old Version 260

changes.mady.by.user Virginie MANGELINCK

Saved on

compared with

New Version 261

changes.mady.by.user Virginie MANGELINCK

Saved on

Key

  • This line was added.
  • This line was removed.
  • Formatting was changed.

...

Div
idprojectathon-highlight
classsection
Div
classcontainer
Div
classcols
Div
classcol-8
Html-bobswift
<h2>Projectathon highlights</h2>
<p class="past-insights-p">Discover how the first Projectathon helped Member States prepare for the Once-Only Technical System launch and gain valuable insights from participants and support teams.</p>
Html-bobswift
<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>
Div
classcols cols-video justify-content-center
Div
classcol-8
Html-bobswift
<div id="tabs-video-content">

<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%2fkLjEdWG1MbY" allowfullscreen="" width="100%" height="315" frameborder="0"></iframe>
</div>
</div>

<div id="tab2" 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="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%2fEBDA9SJS46M" allowfullscreen="" width="100%" height="315" frameborder="0"></iframe>
</div>
</div>

<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%2fzMOmcE3FVm4" allowfullscreen="" width="100%" height="315" frameborder="0"></iframe>
</div>
</div>

</div>
Div
classcols cols-video
Div
Html-bobswift
<ul id="tabs-video-nav">
<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-1-aftermovie.png" alt="OOTS Projectathon"></span><span class="cover-text">"OOTS Projectathon"<br><span style="font-size:14px"><strong>19 - 21 April 2023, Brussels, Belgium</strong> - Aftermovie</span></span></a></li>
<li><a href="#tab2"><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>
<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-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="#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-flora-kardos.png" alt="Once-Only technical support"></span><span class="cover-text">"Once-Only technical support"<br><span style="font-size:14px"><strong>Flora Kardos</strong> - Service Lead, 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
classprojectathon-highlight-past cols justify-content-between align-items-center
Div
classcol-7
Html-bobswift
<p class="past-insights-p">Get more insightful information from each Projectarthon reflection and participants' perspectives.</p>
<p class="past-insights-cta"><a target="_blank" class="btn ghost" href="https://ec.europa.eu/digital-building-blocks/sites/display/OOTS/EU+Member+States+note+success+of+first+Once-Only+Technical+System+Projectathon"><span>Go to Projectathon #1 highlights</span><span class="ico-cta-forward"></span></a></p>
Div
classcol-4
Html-bobswift
<p class="past-insights-illu"><img alt="" aria-hidden="true" src="https://ec.europa.eu/digital-building-blocks/sites/download/attachments/645595199/illu-past-insights.png"></p>
Div
idupcomingbox-cta-projectatonsreport
classsection
Div
classcontainer
Html-bobswift
<div class="cols justify-content-center">

<div class="col-87">

<h2>Past & Upcoming Projectathons</h2>
<p<div class="projectathon-box">
<div class="projectathon-box-cols">

<div class="mb-0">The Commission is organising three Once-Only Technical System Projectathons in 2023. These are three-day events where national teams will connect various systems and perform a marathon of peer-to-peer interoperability and compliance tests in a structured environment.</p>

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

<!--CARD 01-->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="cardprojectathon-upcomingbox-col-content">
<div<h3 class="card-upcoming">
<div class="card-upcoming-body">
<a"h5">Projectathon #1 Report</h3>
<p class="p-opacity">This report summarises key results from the testing that took place from 19-21 April 2023. It also provides a useful overview of lessons learned recommendations for the June and October Projectathons.</p>
<p><a class="btn primary-bis" href="https://ec.europa.eu/digital-building-blocks/sites/displaydownload/OOTSattachments/Projectathon1"></a>
<h3>Projectathon #1</h3>
<p class="label past">Past</p>
<p>The April Projectathon brought together participants and observers to perform key tests on their national647954663/Once_Only_Technical_System_Projectathon_Event_Report_April_v1.00.pdf" onclick="_paq.push(['trackEvent','conversion','oots-projectathon-detail-page-01','oots-projectathon-report'])"><span>Download the Report</span><span class="ico-download"></span></a></p>
</div>

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

</div>
Div
idupcoming-projectatons
classsection
Div
classcontainer
Html-bobswift
<div class="cols">
<div class="col-8">

<h2>Past & Upcoming Projectathons</h2>
<p class="mb-0">The Commission is organising three Once-Only Technical System implementations,Projectathons aheadin of2023. theThese Juneare andthree-day events where national teams will connect various systems and perform a marathon of peer-to-peer interoperability and compliance tests in a structured environment.</p>

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

<!--CARD 01-->
October sessions.</p>
<p class="card-upcoming-date">19 - 21 April 2023</p>
</div>
<div class="card-upcoming-footercol">
<a<div class="btn primary""card-upcoming">
<div class="card-upcoming-body">
<a href="https://ec.europa.eu/digital-building-blocks/sites/display/OOTS/Projectathon1"><span>Read more</span><span></a>
<h3>Projectathon #1</h3>
<p class="ico-cta-forward"></span></a>
</div>
</div>label past">Past</p>
<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>
<p class="card-upcoming-date">19 - 21 April 2023</p>
</div>
<!----<div class="card-upcoming-footer">
<a class="btn primary" href="https://ec.europa.eu/digital-building-blocks/sites/display/OOTS/Projectathon1"><span>Read more</span><span class="ico-cta-forward"></span></a>
</div>
</div>
</div>
<!---->

<!--CARD 02-->
<div class="card-upcoming-col">
<div class="card-upcoming">
<div class="card-upcoming-body">
<a href="#" style="pointer-events: none;"></a>
<h3>Projectathon #2</h3> 
<p class="label past">Past</p> 
<p>The June Projectathon provided a valuable moment for national implementation teams to perform interoperability tests prior to the summer recess.</p>
<p class="card-upcoming-date">14 - 16 June 2023</p>
</div>
<div class="card-upcoming-footer">  
<a class="btn primary" href="https://ec.europa.eu/digital-building-blocks/sites/display/OOTS/Projectathon2"><span>Read more</span><span class="ico-cta-forward"></span></a> 
</div>
</div>
</div>
<!---->

<!--CARD 03-->
<div class="card-upcoming-col">
<div class="card-upcoming">
<div class="card-upcoming-body">
<a href="#" style="pointer-events: none;"></a>
<h3>Projectathon #3</h3>
<p class="label upcoming">Upcoming</p> 
<p>The October Projectathon is the final such event in 2023, just ahead of the legal deadline for EU Member States to implement the Once-Only Technical System. It builds on the work and experiences of the April and June Projectathons.</p>
<p class="card-upcoming-date">18 - 20 October 2023</p>
</div>
<div class="card-upcoming-footer">
<p class="label available-soon">Available soon</p> 
</div>
</div>
</div>
<!---->

</div>

...

Div
styledisplay:none;
idprojectathon-detail
Div
classcontainer
Html-bobswift
<div class="cols justify-content-center">

<div id="box-cta-projectathon-detail" class="col-7">
<img alt="" aria-hidden="true" src="https://ec.europa.eu/digital-building-blocks/sites/download/attachments/645595199/illu-box-cta-projectathon-detail.png">
<p>18 - 20 October 2023 | Brussels, Belgium</p>
<h3>Projectathon #3</h3>
<p>The October Projectathon is the final such event in 2023, just ahead of the legal deadline for EU Member States to implement the Once-Only Technical System. It builds on the work and experiences of the April and June Projectathons.</p>
<p>Registration: 01 - 12 September 2023</p>
<p style="opacity:1 !important;"><span class="badge primary">Available soon</span></p> 
<!--<a class="btn primary-bis" href="https://ec.europa.eu/digital-building-blocks/sites/display/OOTS/Projectathon2"><span>Go to Projectathon #2</span><span class="ico-cta-forward"></span></a>-->
</div>

</div>
CSS Stylesheet
/*--------------------------------------------------*/
/*---OOH PROJECTATONS OVERVIEW PAGE - 16-02-2023---*/
/*------------------------------------------------*/ 

#main-content p:empty { display: none;}
/*#main-content p span:empty { display: none;}*/

.mb-0 { margin-bottom:0;}

/*---INTRODUCTION---*/
#introduction {}
#introduction h1 { margin-bottom:2.5rem;} 
#introduction p { margin-bottom:0;} 
.introduction-illu { line-height:0 !important;} 
.introduction-illu img { width: 180px;}

@media screen and (min-width: 769px) {
  .introduction-illu img { width: 100%; max-width: 320px; height: auto;}
}  

/*---BENEFITS---*/ 
#benefits { padding-bottom:10rem; background: #F3F4F7;} 
 
#benefits ul { display: flex; flex-wrap: wrap; margin-bottom:0; padding:0; list-style:none;}
#benefits ul li { flex-shrink: 2; position:relative; margin-top:1.5rem; padding:0 1rem 0 1.75rem; width: 50%;}
#benefits ul li:before { content:''; display: block; position: absolute; top:2px; left:0; height: 20px; width: 20px; background: url("https://ec.europa.eu/digital------*/
/*---OOH PROJECTATONS OVERVIEW PAGE - 16-02-2023---*/
/*------------------------------------------------*/ 

#main-content p:empty { display: none;}
/*#main-content p span:empty { display: none;}*/

.mb-0 { margin-bottom:0;}

/*---INTRODUCTION---*/
#introduction {}
#introduction h1 { margin-bottom:2.5rem;} 
#introduction p { margin-bottom:0;} 
.introduction-illu { line-height:0 !important;} 
.introduction-illu img { width: 180px;}

@media screen and (min-width: 769px) {
  .introduction-illu img { width: 100%; max-width: 320px; height: auto;}
}  

/*---BENEFITS---*/ 
#benefits { padding-bottom:10rem; background: #F3F4F7;} 
 
#benefits ul { display: flex; flex-wrap: wrap; margin-bottom:0; padding:0; list-style:none;}
#benefits ul li { flex-shrink: 2; position:relative; margin-top:1.5rem; padding:0 1rem 0 1.75rem; width: 50%;}
#benefits ul li:before { content:''; display: block; position: absolute; top:2px; left:0; height: 20px; width: 20px; background: url("https://ec.europa.eu/digital-building-blocks/sites/download/attachments/645595199/ico-check-primary.svg") no-repeatbuilding-blocks/sites/download/attachments/645595199/ico-check-primary.svg") no-repeat;}

@media screen and (min-width: 769px) {
	#benefits { padding-bottom:15rem; background: #F3F4F7;}
	#benefits ul li { padding:0 3rem 0 1.75rem;}
}

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

@media screen and (min-width: 769px) {
	#benefits#box-cta-projectathon { margin-top:-12rem;}  
	#box-cta-projectathon .projectathon-box { padding-bottom:15rem; background: #F3F4F7:2.5rem;}
	#box-cta-projectathon .projectathon-box-cols { display: flex; align-items: center;}
	#benefits ul li {#box-cta-projectathon .projectathon-box-col-illu { margin-bottom:0; padding:0 3rem 0 1.75rem;0}
}

/*---BOX CTA PROJECTATHON---*/
@media screen and (min-width: 1366px) {
 #box-cta-projectathon { margin-top:-8rem; padding-left:1.5rem; padding-right:1.5rem; position:relative;}
#box-cta-projectathon .projectathon-box { padding:1.5rem; background-color: #00284A; border-radius:20px;}
#box-cta-projectathon .container .cols { margin-bottom:-1rem;}
#box-cta-projectathon .projectathon-box-col-illu { margin-bottom:1rem;}
#box-cta-projectathon .projectathon-box-col-illu img { width: 120px; height:auto;}
#box-cta-projectathon h3, #box-cta-projectathon p { color: white;}
#box-cta-projectathon p.p-opacity { opacity: 0.75}
#box-cta-projectathon p:last-of-type.projectathon-box { padding:5rem;}
}

/*---TEAMS AND ACTORS---*/
#teams-actors { padding-top:0;}
#teams > p { display: none; border:1px solid red;}
#teams ul { margin:2.5rem 0 0 0; padding:0; list-style:none; }
#teams ul li { margin-top:24px;}
#teams ul li h4 { margin-bottom:12px; color:#3D597A !important;} 
#teams ul li p { margin-bottom:0;}
/*hack - remove empty p from confluence*/
#box-cta-projectathon .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-projectathon { margin-top:-12rem;}  
	#box-cta-projectathon .projectathon-box { padding:2.5rem;}
	#box-cta-projectathon .projectathon-box-cols { display: flex; align-items: center;}
	#box-cta-projectathon .projectathon-box-col-illu { margin-bottom:0; padding:0 3rem 0 0
#teams .teams-text { z-index: 3; position: relative;} 

#teams .teams-illu { position: relative;}
.teams-illu-img { z-index: 2; position: relative; width: 180px;}
.teams-illu p { margin-bottom:0;}  

@media screen and (max-width: 768px) {   
  .teams-illu-bg { width: 100%; height: auto;}
  .teams-illu-bg { z-index: 1; position:absolute; top: 0; left:0;}
}

@media screen and (min-width: 1366px) {
 #box-cta-projectathon .projectathon-box { padding:5rem and (min-width: 769px) {   
	#teams-actors { overflow:hidden;}   
	.teams-illu-img { width: 100%; max-width: 250px; height: auto;}
	.teams-illu-bg { z-index: 1; position:absolute; top: -80px; left:-80px;}
}

/*---TEAMS AND ACTORS---*/
#teams-actors#actors { padding-topposition:0relative;}
#teams > p { display: none; border:1px solid red;}
#teams z-index:3; margin-top:2.5rem;}
#actors ul { margin-top:2.5rem 0 0 0!important; margin-bottom:2.5rem; padding:0; list-style:none; }
#teams#actors ul li:last-child { marginborder-topbottom:24px none;}
#teams#actors ul li h4 { margin-bottom:12px; color:#3D597A !important;}

@media 
#teamsscreen ul li p { margin-bottom:0;}

#teams .teams-text { z-index: 3; position: relative;} 

#teams .teams-illu { position: relative;}
.teams-illu-img { z-indexand (min-width: 1366px) {
  #actors ul { display: flex; flex-wrap: wrap;}
  #actors ul li { flex-shrink: 2; positionpadding:0 relative30px; width: 180px;}
.teams-illu p { margin50%; border-left:1px solid #E3E6EB; border-bottom:0 none;}
  

@media#actors screen and (max-width: 768px) {   
  .teams-illu-bg { width: 100%; height: auto;}
  .teams-illu-bg { z-index: 1; position:absolute; top: 0; left:0;}
}

@media screen and (min-width: 769px) {   
	#teams-actors { overflow:hidden;}   
	.teams-illu-img { width: 100%; max-width: 250px; height: auto;}
	.teams-illu-bg { z-index: 1; position:absolute; top: -80px; left:-80px;}
}

/*---ACTORS---*/
#actors { position:relative; z-index:3; margin-top:2.5rem;}
#actors ul { margin-top:2.5rem !important; margin-bottom:2.5rem; padding:0; list-style:none; }
#actors ul li:last-child { border-bottom: none;}
#actors ul li h4 { margin-bottom:12px; color:#3D597A !important;}

@media screen and (min-width: 1366px) {
  #actors ul { display: flex; flex-wrap: wrap;}
  #actors ul li { flex-shrink: 2; padding:0 30px; width: 50%; border-left:1px solid #E3E6EB; border-bottom: none;}
  #actors ul li:first-child { padding-left:0; border-left:none;}
}

/*---HOW TO PARTICIPATE---*/
#how-to-participate { padding-top:0; background-image: url("https://ec.europa.eu/digital-building-blocks/sites/download/attachments/645595199/bg-illu-sigle-how-to-participate.svg");
 background-repeat: no-repeat;
 background-position: 100% 60%;}
#how-to-participate .cols p:first-child { display: none;}
#how-to-participate ul { margin:2.5rem 0 0 0; padding: 0; list-style: none;}
#how-to-participate ul li > div { display:flex; align-items: baseline; gap:10px;}
#how-to-participate ul li > div > span { display: flex; align-items: center; justify-content: center; background: #E3E6EB; width: 24px; height: 24px; min-width: 24px; border-radius: 24px; color: #3D597A; font-size: 12px;}
#how-to-participate h3 { margin-bottom:2ul li:first-child { padding-left:0; border-left:none;}
}

/*---HOW TO PARTICIPATE---*/
#how-to-participate { padding-top:0; background-image: url("https://ec.europa.eu/digital-building-blocks/sites/download/attachments/645595199/bg-illu-sigle-how-to-participate.svg");
 background-repeat: no-repeat;
 background-position: 100% 60%;}
#how-to-participate .cols p:first-child { display: none;}
#how-to-participate ul { margin:2.5rem 0 0 0; padding: 0; list-style: none;}
#how-to-participate ul li > div { display:flex; align-items: baseline; gap:10px;}
#how-to-participate ul li > div > span { display: flex; align-items: center; justify-content: center; background: #E3E6EB; width: 24px; height: 24px; min-width: 24px; border-radius: 24px; color: #3D597A; font-size: 12px;}
#how-to-participate h3 { margin-bottom:2.5rem;}

/*---PROJECTATHON DETAIL---*/
#projectathon-detail {margin-top:-8rem; padding-left:1.5rem; padding-right:1.5rem; padding-bottom:6rem; position:relative;}
#projectathon-detail .cols { margin-bottom:0;}

@media screen and (min-width: 769px) {
  #projectathon-detail { padding-bottom:9rem;}
}  

/*---BOX CTA PROJECTATHON DETAIL---*/
#box-cta-projectathon-detail { position:relative;}
#box-cta-projectathon-detail { padding:1.5rem; background-color: #00284A; border-radius:20px;}
#box-cta-projectathon-detail h3 { color: #FBC11D;}
#box-cta-projectathon-detail p { color: white; opacity: 0.75}

#box-cta-projectathon-detail img { position:absolute; bottom:-40px; right:20px; width: 100px;}

@media screen and (min-width: 769px) {
	#projectathon-detail {margin-top:-12rem;}   
	#box-cta-projectathon-detail { padding:2.5rem;}
	#box-cta-projectathon-detail img { bottom:-55px; right:40px; width: 150px;}
}

@media screen and (min-width: 1366px) {
	#box-cta-projectathon-detail { padding:5rem;}
	#box-cta-projectathon-detail img { bottom:-80px; right:80px; width: 180px;} 
}  

/*---UPCOMING PROJECTATONS---*/
#upcoming-projectatons {}
.card-upcoming-cols { margin-top: 1.5rem;}

/*---PROJECTATHONUPCOMING DETAILCARDS---*/
#projectathon.card-detailupcoming {margin-top:-8rem; padding-left:1.5rem; padding-right:1.5rem; padding-bottom:6rem; position:relative;}
#projectathon-detail .cols { margin-bottom:0;}

@media screen and (min-width: 769px) {
  #projectathon-detail { padding-bottom:9rem;}
}  

/*---BOX CTA PROJECTATHON DETAIL---*/
#box-cta-projectathon-detail { position:relative;}
#box-cta-projectathon-detail { padding:1.5rem; background-color: #00284A; border-radius:20px;}
#box-cta-projectathon-detail h3 { color: #FBC11D;}
#box-cta-projectathon-detail p { color: white; opacity: 0.75}

#box-cta-projectathon-detail img { position:absolute; bottom:-40px; right:20px; width: 100px;}

@media screen and (min-width: 769px) {
	#projectathon-detail {margin-top:-12rem;}   
	#box-cta-projectathon-detail { padding:2.5rem;}
	#box-cta-projectathon-detail img { bottom:-55px; right:40px; width: 150px;}
}

@media screen and (min-width: 1366px) {
	#box-cta-projectathon-detail { padding:5rem;}
	#box-cta-projectathon-detail img { bottom:-80px; right:80px; width: 180px;} 
}  

/*---UPCOMING PROJECTATONS---*/
#upcoming-projectatons {}
.card-upcoming-cols { margin-top: 1.5rem;}

/*---UPCOMING CARDS---*/
.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 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: 170px; border-top-right-radius: 12px; border-top-left-radius: 12px; overflow: hidden;}
.card-upcoming-col:nth-child(1) .card-upcoming-body a { margin:-1rem 0 0 0; width: 115%; background: url("https://ec.europa.eu/digital-building-blocks/sites/download/attachments/645595199/illu-card-projectathon-01.png"); background-size: cover; border-radius: 100% 0% 47% 53% / 0% 76% 24% 100% ;}
.card-upcoming-col:nth-child(2) .card-upcoming-body a { margin:-1rem 0 0 0; width: 115%; 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:nth-child(3) .card-upcoming-body a { margin:-1rem 0 0 -3rem; width: 140%; background: url("https://ec.europa.eu/digital-building-blocks/sites/download/attachments/645595199/illu-card-projectathon-03.png"); background-size: cover; border-radius: 100% 0% 38% 62% / 0% 88% 12% 100% ;}

.card-upcoming-body ah3 { displaymargin-top: block24px; font-size:20px; line-height:0; text-align: right; height: 170px; border-top-right-radius: 12px; border-top-left-radius: 12px; overflow: hidden;}24px;}
.card-upcoming-body p { position:relative;}
.card-upcoming-body p.label { margin-bottom:12px; display: inline-block;}
.card-upcoming-body p:last-child { margin-bottom:0;}
.card-upcoming-date { font-size: 14px !important; color: #5E748E !important;}

.card-upcoming-col:nth-child(1) footer { margin-top:24px; text-align: right;}
.card-upcoming-bodyfooter a.label { margindisplay:-1rem 0 0 0; width: 115%; background: url("https://ec.europa.eu/digital-building-blocks/sites/download/attachments/645595199/illu-card-projectathon-01.png"); background-size: cover inline;} 

.card-upcoming .label { padding: 8px 12px; font-size: 12px; line-height: 12px; border-radius: 100% 0% 47% 53% / 0% 76% 24% 100% 40px;}
.card-upcoming .label.available-soon { color: #842DB5; background: #F2E5F7;}
.card-upcoming .label.past { color: #3D597A; background: #E3E6EB;}
.card-upcoming-col:nth-child(2)  .label.upcoming { color: #995E00; background: #FFEECC;}  

@media screen and (max-width: 991px) {
  .card-upcoming-body acol { margin-bottom:-1rem 0 0 0; width: 115%; 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% ;}
 1.5rem;}
}

@media screen and (min-width: 992px) {
  .card-upcoming-cols { display: flex; width: 100%; gap:20px;}
  .card-upcoming-col:nth-child(3) .card-upcoming-body a1) { margin:-1rem 0 0 -3rem; width: 140%31%;}
 background: url("https://ec.europa.eu/digital-building-blocks/sites/download/attachments/645595199/illu-card-projectathon-03.png"); background-size: cover; border-radius: 100% 0% 38% 62% / 0% 88% 12% 100% ;}

.card-upcoming-col:nth-child(2) { width: 31%;}
  .card-upcoming-col:nth-child(3) { width: 38%;}
  .card-upcoming-body h3 { margin-top:24px; font-size:20px; line-height:24px;}
.card-upcoming-body p { position:relative;}
.card-upcoming-body p.label { margin-bottom:12px; display: inline-block;}
.card-upcoming-body p:last-childflex: 1 1 auto;}
}  

/*---PAST INSIGHTS---*/
.past-insights { padding-top:4rem;}
.past-insights .col-7, .past-insights .col-4 { padding-top: 0; padding-bottom: 0;}
.wiki-content .past-insights-p { margin-bottom:02rem;}
.card-upcoming-datewiki-content .past-insights-illu { fontmargin-sizebottom: 14px0; line-height:0 !important; color: #5E748E !important;}

.card-upcoming-footer}
.past-insights-illu img { width: 180px;}
.wiki-content .past-insights-cta { margin-topbottom:24px; text-align: right;}
.card-upcoming-footer .label { display: inline;} 

.card-upcoming .label { padding: 8px 12px; font-size: 12px; line-height: 12px; border-radius: 40px;}
.card-upcoming .label.available-soon { color: #842DB5; background: #F2E5F7;}
.card-upcoming .label.past { color: #3D597A; background: #E3E6EB;}
.card-upcoming .label.upcoming { color: #995E00; background: #FFEECC;}  

@media screen and (max-width: 991px) {
  .card-upcoming-col0;}

@media screen and (min-width: 769px) {
  .past-insights-illu img { width: 100%; max-width: 200px; height: auto;}
}  

/*---PROJECTATHON HIGHLIGHT---*/
#projectathon-highlight { padding-bottom: 0;}
#projectathon-highlight .cols {}

.projectathon-highlight-past .col-7,
.projectathon-highlight-past .col-4 { padding-top: 0; padding-bottom: 0;}

.wiki-content #projectathon-highlight .past-insights-p { margin-bottom: 1.5rem2rem;}
}

@media screen and (min-width: 992px) {
  .card-upcoming-cols { display: flex; width: 100%; gap:20px;}
  .card-upcoming-col:nth-child(1).wiki-content #projectathon-highlight .past-insights-illu { margin-bottom:0; line-height:0 !important;}
.projectathon-highlight-past img { width: 31%180px;}
.wiki-content .projectathon-highlight-past .cardpast-upcoming-col:nth-child(2)insights-cta { width: 31%margin-bottom:0;}

@media screen and .card-upcoming-col:nth-child(3(min-width: 769px) { width: 38%;}
  .cardprojectathon-upcominghighlight-bodypast img { flexwidth: 100%; max-width: 1200px; 1height: auto;}
}  

/*---PAST INSIGHTS---cols video*/
.pastcols-insightsvideo {div padding-top:4rem;}
.past-insights .col-7, .past-insights .col-4 { padding-top: 0; padding-bottom: 0;}
.wiki-content .past-insights-p { margin-bottom:2rem;}
.wiki-content .past-insights-illu { margin-bottom:0; line-height:0 !important;}
.past-insights-illu img { width: 180px;}
.wiki-content .past-insights-cta { margin-bottom:0;}

@media screen and (min-width: 769px) {
  .past-insights-illu img { width: 100%; max-width: 200px; height: auto;}
}  

/*---PROJECTATHON HIGHLIGHT---*/
#projectathon-highlight { padding-bottom: 0;}
#projectathon-highlight .cols {}

.projectathon-highlight-past .col-7,
.projectathon-highlight-past .col-4 { padding-top: 0; padding-bottom: 0;}

.wiki-content #projectathon-highlight .past-insights-p { margin-bottom:2rem;}
.wiki-content #projectathon-highlight .past-insights-illu { margin-bottom:0; line-height:0 !important;}
.projectathon-highlight-past img { width: 180px;}
.wiki-content .projectathon-highlight-past .past-insights-cta { margin-bottom:0;}

@media screen and (min-width: 769px) {
  .projectathon-highlight-past img { width: 100%; max-width: 200px; height: auto;}
}

/*cols video*/
.cols-video div p:first-child { display: none; border:1px solid yellow;}

/*tabs video*/
#tabs-video-nav { list-style: none; margin: 0; padding: 0; overflow: auto;p:first-child { display: none; border:1px solid yellow;}

/*tabs video*/
#tabs-video-nav { list-style: none; margin: 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 { text-decoration: none; color:#842DB5;}

.tabs-video-content { background-color: #001832#FFF;}
#tabs.tabs-video-nav li a .cover-playcontent-iframe { position: relative; width: 100%; display:inline-blockoverflow: hidden; linepadding-heighttop: 0;}
#tabs56.25%; /* 16:9 Aspect Ratio */}    
.tabs-video-navcontent-iframe liiframe 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);}
{ 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%; margin: 0; padding: 0; overflow: auto;}
  #tabs-video-nav li { width: 20%; cursor: pointer;}
  #tabs-video-nav li:hover a .cover-play img { opacitywidth: 100%; max-width: 1300px; filterheight: noneauto;}
#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} 

/*---BOX CTA REPORT---*/
#box-cta-report { padding-bottom: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) {
  #tabs-video-nav { list-style: none; display:flex; justify-content:center; gap: 2%; margin: #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; overflow: auto; 0}
}

@media screen #tabs-video-nav li { and (min-width: 20%; cursor: pointer;}
  #tabs-video-nav li a .cover-play img { width: 100%; max-width: 300px; height: auto;}
} 1366px) {
 #box-cta-report .projectathon-box { padding:5rem;}
}