Versions Compared

Old Version 29

changes.mady.by.user Virginie MANGELINCK

Saved on

compared with

New Version 30

changes.mady.by.user Virginie MANGELINCK

Saved on

Key

  • This line was added.
  • This line was removed.
  • Formatting was changed.
Comment: Reverted from v. 28
Div
idintroduction
classsection
Div
classcontainer
Html-bobswift
<p><a class="link-cta primary before" href="https://ec.europa.eu/digital-building-blocks/sites/display/OOTS/Once-Only+Forum"><span>Back to Once-Only Forum</span></a></p>

<div class="introduction-box">

<div class="introduction-box-cover">
</div>

<div class="introduction-box-content">
<p class="h5">23 November 2023 | Brussels, Belgium</p>
<h1 class="h2"><span class="heading-subtitle">Once-Only Forum</span>for Citizens</h1>
<p>Already interested in participating in the OOTS Citizens’ Focus Group?</p><!--<p>Registration: <strong>01 - 12 September 2023</strong></p>-->
<!--<p>Registration: <strong>Closed</strong></p>-->
<p class="text-right"><a class="btn primary" href="#"><span>Register</span></a></p>
<!--<p>Registration: <strong>01 - 12 September 2023</strong></p>-->
<!--<p>Registration: <strong>Closed</strong></p>-->
</div>

</div>
Div
idinformation
classsection
Div
classcontainer
Div
classcols
Html-bobswift
<div class="col-8">

<!-- START PRACTICAL INFORMATION -->

<h2 class="h3">Practical information</h2>

<ul class="information-list">

<li>
<div class="information-cols">
<div class="information-col"><p>Location</p></div>
<div class="information-col"><p>Brussels, Belgium</p></div>
</div>
</li>  

<li>
<div class="information-cols">
<div class="information-col"><p>Date</p></div>
<div class="information-col"><p>23 November 2023</p></div>
</div>
</li>

<li>
<div class="information-cols">
<div class="information-col"><p>Target groups</p></div>
<div class="information-col">
<p>
<strong>Age:</strong> 18+<br>
<strong>Country of residency:</strong> All EU Member States<br>
<strong>Characteristics:</strong> Citizens who have had previous experiences with cross-border administrative procedures in either:<br>
- Application for a study financing for higher education, or<br>
- Initial application for admission to public higher education, or<br>
- Registration of a vehicle abroad.<br>
</p>
</div>
</div>
</li>

<li>
<div class="information-cols">
<div class="information-col"><p>Fees</p></div>
<div class="information-col"><p>No fees are charged to participate in the focus group</p></div>
</div>
</li>

</ul>

<!--END PRACTICAL INFORMATION -->

<!-- START DESCRIPTION -->

<h2 class="h3">Description</h2>

<p>The focus group for citizens will be an onsite event gathering a small group of up to 15 citizens who live in a different EU Member State than their country of origin, to understand their experience with the procedures that they undergo when moving or studying abroad. Furthermore, the focus group participants will test the Once-Only Technical System (OOTS) firsthand and provide insights and recommendations to improve the OOTS user experience.</p>

<p style="margin-top:2.5rem;"><a class="link-download primary" href="#"><span>Download the privacy statement</span></a></p>

<!-- END DESCRIPTION -->

</div>

...

Div
classsection agenda-box
Div
classcontainer
Div
idfaq-content
Div
classfaq-content-box custom-agenda
Html-bobswift
<h2 class="h3">Citizens’ Focus Group agenda</h2>
<p>The focus group will aim to understand the experiences with the procedures when moving or studying abroad (such as applying for studying or a scholarship abroad as well as registering their car abroad), introduce the OOTS and test it, and finally make suggestions to improve the OOTS in the future.</p>
<p class="illu-projectathon-agenda"><img alt="" aria-hidden="true" src="https://ec.europa.eu/digital-building-blocks/sites/download/attachments/645595199/illu-projectathon-agenda.png"></p>
Expand
titleSee full agenda
Html-bobswift
<ul class="agenda-hour">
<li>
<div class="agenda-hour-cols">
<div class="agenda-hour-col">08:00 - 09:00</div>
<div class="agenda-hour-col">Welcome coffee & registration
<p class="label ccab"><span>CCAB - room 0.A</span></p>
</div>
</div>
</li>

<li>
<div class="agenda-hour-cols">
<div class="agenda-hour-col">09:00 - 09:45</div>
<div class="agenda-hour-col">Introduction to the Once-Only Technical System Projectathon (day 1) 
<p class="label plenary 0.A"><span>Plenary</span></p>
</div>
</div>
</li>

<li>
<div class="agenda-hour-cols">
<div class="agenda-hour-col">09:45 - 10:15</div>
<div class="agenda-hour-col">Welcome to the Once-Only Technical System Projectathon
<p class="label plenary"><span>Plenary</span></p>
</div>
</div>
</li>

<li>
<div class="agenda-hour-cols">
<div class="agenda-hour-col">10:15 - 12:00</div>
<div class="agenda-hour-col">Technical set-up and initial tests
<p class="label plenary"><span>Plenary</span></p></div>
</div>
</li> 

<li>
<div class="agenda-hour-cols">
<div class="agenda-hour-col">12:00 - 13:00</div>
<div class="agenda-hour-col">Lunch
<p class="label ccab"><span>CCAB - room 0.A</span></p>
</div>
</div>
</li>  

<li>
<div class="agenda-hour-cols">
<div class="agenda-hour-col">13:00 - 15:00</div>
<div class="agenda-hour-col">Peer-to-peer testing - Part 1
<p class="label plenary"><span>Plenary</span></p>
</div>
</div>
</li>

<li>
<div class="agenda-hour-cols">
<div class="agenda-hour-col">15:00 - 15:30</div>
<div class="agenda-hour-col">Coffee break
<p class="label ccab"><span>CCAB - room 0.A</span></p>
</div>
</div>
</li>

<li>
<div class="agenda-hour-cols">
<div class="agenda-hour-col">15:00 - 17:00</div>
<div class="agenda-hour-col">Peer-to-peer testing - Part 2
<p class="label plenary"><span>Plenary</span></p>
</div>
</div>
</li>

<li>
<div class="agenda-hour-cols">
<div class="agenda-hour-col">17:00 - 17:20</div>
<div class="agenda-hour-col">Wrap-up of the day + intro to next day 
<p class="label plenary"><span>Plenary</span></p>
</div>
</div>
</li>

<li>
<div class="agenda-hour-cols">
<div class="agenda-hour-col">17:30 +</div>
<div class="agenda-hour-col">Social event
</div>
</div>
</li>

</ul>
Div
idboxupcoming-cta-projectathonprojectatons
classsection
Div
classcontainer
Html-bobswift
<div class="cols justify-content-center">

<div class="col-8">

<div class="projectathon-box">
<div<h2>Upcoming Forums</h2>
<p class="projectathonmb-box-cols">

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

0">The Commission is organising forums for Citizens and forums for SMEs, each comprising of an onsite focus group and online forums discussing various cross-border procedures.</p>

</div>
</div>
Html-bobswift
<div class="projectathoncard-boxupcoming-col-contentcols">
<h3 class="h5">Once-Only Forum for Citizens Playbook</h3>
<p class="p-opacity">The Once

<!--CARD 01-->
<div class="card-upcoming-col">
<div class="card-upcoming">
<div class="card-upcoming-body"> 
<a href="#" style="pointer-events: none;"></a> 
<h3>Once-Only Forum Playbookfor providesStudents completeand overview of the forums, including background information on the OOTS, what to expect during the forums, and other important logistics informationRecent Graduates</h3>
<p class="label upcoming">Upcoming</p> 
<p>This Citizens’ forum will focus on identifying the experiences of current cross-border procedures regarding studying abroad, and how the OOTS can improve these experiences.</p>
<p><a<p class="btn primary-bis" href="#" onclick="_paq.push(['trackEvent','conversion','oots-once-only-forum-for-citizens','oots-once-only-forum-for-citizens-playbook'])"><span>Download the Once-Only Forum Playbook for Citizens<card-upcoming-date">Multiple dates available</p> 
</div>
<div class="card-upcoming-footer">
<a class="btn primary" href="#"><span>Read more</span><span class="ico-downloadcta-forward"></span></a></p>a>

</div>

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

</div>
CSS Stylesheet
/*
!---->

<!--CARD 02-->
<div class="card-upcoming-col">
<div class="card-upcoming">
<div class="card-upcoming-body">
<a href="#" style="pointer-events: none;"></a>
<h3>Once-Only Forum for Expats</h3>
<p class="label upcoming">Upcoming</p>  
<p>This Citizens’ forum will focus on identifying experiences of cross-border procedures related to motor vehicle registration abroad, and how the OOTS can improve these experiences.</p>
<p class="card-upcoming-date">Multiple dates available</p>
</div>
<div class="card-upcoming-footer">  
<a class="btn primary" href="#"><span>Read more</span><span class="ico-cta-forward"></span></a> 
</div>
</div>
</div>
<!---->   

</div>
Div
idbox-cta-projectathon
classsection
Div
classcontainer
Html-bobswift
<div class="cols justify-content-center">

<div class="col-8">
<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/581239505/illu-projectathon playbook.pn">  
</div>

<div class="projectathon-box-col-content">
<h3 class="h5">Once-Only Forum for Citizens Playbook</h3>
<p class="p-opacity">The Once-Only Forum Playbook provides complete overview of the forums, including background information on the OOTS, what to expect during the forums, and other important logistics information.</p>
<p><a class="btn primary-bis" href="#" onclick="_paq.push(['trackEvent','conversion','oots-once-only-forum-for-citizens','oots-once-only-forum-for-citizens-playbook'])"><span>Download the Once-Only Forum Playbook for Citizens</span><span class="ico-download"></span></a></p>

</div>

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

</div>
CSS Stylesheet
/*-----------------------------------------*/
/*---OOH FORUM DETAIL PAGE - 22-09-2023---*/
/*---------------------------------------*/ 

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

/*---INTRODUCTION---*/
#introduction { padding-bottom:0;}
.introduction-box { display: flex; border-radius: 16px; overflow: hidden; }
.introduction-box-cover { width: 50%; background: url("https://ec.europa.eu/digital-building-blocks/sites/download/attachments/688493732/illu-introduction-forum-citizens.png"); background-size: cover;} 
.introduction-box------*/
/*---OOH FORUM DETAIL PAGE - 22-09-2023---*/
/*---------------------------------------*/ 

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

/*---INTRODUCTION---*/
#introduction { padding-bottom:0;}
.introduction-boxcontent { position:relative; padding: 3.5rem 7rem 2.5rem 0; width: 50%; background-color: #F3F4F7;}
.introduction-box-content * { position: relative;}
.introduction-box-content:before { position:absolute; top: -10%; left:-110px; display: inline-block; content:""; background-color: #F3F4F7; width: 200px; height: 120%; border-radius: 50% 50% 52% 48% / 50% 50% 50% 50% ;}   
.heading-subtitle { display: flexblock; borderfont-radiussize: 16px14px; overflowline-height: hidden24px; }
.introduction-box-cover { 
@media screen and (max-width: 50%; background: url("https://ec.europa.eu/digital-building-blocks/sites/download/attachments/688493732/illu-introduction-forum-citizens.png"); background-size: cover;} 
768px) {
    .introduction-box-content { positiondisplay:relative block;}
 padding: 3.5rem 7rem 2.5rem 0; width: 50%; background-color: #F3F4F7;}
.introduction-box-content * { position: relative;}
introduction-box-cover { height: 12rem; width: 100%;}
    .introduction-box-content:before { positionpadding:absolute 2rem; topwidth: -10%100%;}
 left:-110px; display: inline-block; content:""; background-color: #F3F4F7; .introduction-box-content:before { width: 200px; height: 120%; border-radius: 50% 50% 52% 48% / 50% 50% 50% 50% ;}   
.heading-subtitle { display: block; font-size: 14px; line-height: 24px;}

@media screen and (max-width: 768px) {
    .introduction-box { display: block;}
    .introduction-box-cover { height: 12rem; width: 100%;}
    .introduction-box-content { padding: 2rem; width: 100%;}
    .introduction-box-content:before { width: 0;}
}

/*---INFORMATION---*/
#information { padding-top:0;}
#information h2 { margin:7.5rem 0 2.5rem 0;}

.information-list { margin: 0; padding: 0;}
.information-list li { margin:2rem 0 0 0; padding-bottom:1rem; list-style-type: none; border-bottom: 1px solid #E3E6EB;}
.information-list li:first-child { margin-top:0;}
.information-list li:last-child { padding-bottom:0; border-bottom: none;}
.information-col:nth-child(1) p { font-size: 18px; color: #001832;}
.information-list li:last-child .information-col:nth-child(2) p0;}
}

/*---INFORMATION---*/
#information { padding-top:0;}
#information h2 { margin:7.5rem 0 2.5rem 0;}

.information-list { margin: 0; padding: 0;}
.information-list li { margin:2rem 0 0 0; padding-bottom:1rem; list-style-type: none; border-bottom: 1px solid #E3E6EB;}
.information-list li:first-child { margin-top:0;}
.information-list li:last-child { padding-bottom:0; border-bottom: none;}
.information-col:nth-child(1) p { font-size: 18px; color: #001832;}
.information-list li:last-child .information-col:nth-child(2) p { margin-bottom:0;}

@media screen and (min-width: 769px) {
	.information-cols { display: flex; align-items: center;}
	.information-col:nth-child(1) { width: 30%;}
	.information-col:nth-child(2) { width: 70%}
}

/*---AGENDA BOX---*/
.agenda-box { padding-top:0;}
 
.faq-content-box { margin-bottom:6rem; padding:80px 60px 60px 60px; background-color:#F3F4F7; border-radius:20px;}
.faq-content-box:last-child { margin-bottom:0;}
.faq-content-box h2 {}  

@media screen and (min-width: 769px) {
	.information-cols { display: flex; align-items: center;}
	.information-col:nth-child(1) { width: 30%;}
	.information-col:nth-child(2) { width: 70%}
}max-width: 768px) { 
  .faq-content-box { margin-bottom:3rem; padding:40px 20px 20px 20px;}
} 

/*---AGENDA MACRO EXPAND BOX---*/  
.agendafaq-content-box .expand-container:last-child { paddingborder-top:0bottom:1px solid transparent;}
 
.faqexpand-content-boxcontainer { margin-bottom:6rem0; padding:80px 60px 60px 60px; background-color:#F3F4F7; border-radius:20px;}
.faq-content-box:last-child {0; border-bottom:1px solid #E3E6EB;}
.expand-control { display: flex; flex-direction: row-reverse; align-items: center; margin-bottom:0; padding:1rem 0;}
.faqexpand-contentcontrol-box h2 {}  

@media screen and (max-width: 768px) { 
  .faq-content-box { margin-bottom:3rem; padding:40px 20px 20px 20px;}
} 

/*--- MACRO EXPAND ---*/  
.faq-content-box .expand-container:last-child { border-bottom:1px solid transparenttext { margin:0 0.5rem 0.5rem 0; width: 100%; font-size: 20px; color:#001832;}
.expand-content { margin:0; padding: 0; color: #5E748E;}
.expand-container [aria-expanded="true"] .aui-iconfont-chevron-down { transform: rotate(180deg);}
.expand-container [aria-expanded="false"] .aui-iconfont-chevron-right { transform: rotate(90deg);}
.expand-container .aui-icon::before { margin:0; padding:0; border-bottom:1px solid #E3E6EB;}
font-size: 20px !important;}

@media screen and (max-width: 768px) { 
  .expand-control-text { displayfont-size: flex; flex-direction: row-reverse; align-items: center; margin-bottom:16px;}
}

/*---AGENDA HOUR---*/
.agenda-hour { margin: 0; padding:1rem 0; }
.expand-control-textagenda-hour li { marginpadding:01rem 0.5rem 0.5rem 0; widthlist-style: 100%none; fontborder-sizebottom: 1px 20px; color:#001832dashed #E3E6EB;}
.expand-contentagenda-hour li:first-child { margin:0; padding-top: 0; color: #5E748E;}
.expandagenda-container [aria-expanded="true"] .aui-iconfont-chevron-down { transform: rotate(180deg)hour li:last-child { padding-bottom:0; border-bottom: none;}
.expandagenda-container [aria-expanded="false"] .aui-iconfont-chevron-righthour li .agenda-hour-cols { transformdisplay: rotate(90deg)flex;}
.expandagenda-containerhour li .auiagenda-hour-icon::beforecol:nth-child(1) { font-sizewidth: 20px !important;}

@media screen and (max-width: 768px) { 
  .expand-control-text { font-size: 16px;}
}

/*---AGENDA HOUR---*/25%;  font-family: Source Sans Pro SB;}
.agenda-hour li .agenda-hour-col:nth-child(2) { width: 75%;}
.agenda-hour .label { margin: 0; padding:-bottom:0; }
.agenda-hour li.label span { padding:1rem4px 010px; listfont-stylesize: none12px; borderline-bottomheight: 1px12px; dashedbackground: #E3E6EB; border-radius: 40px;}
.agenda-hour li:first-child { padding-top:0.label.plenary span { color: #842DB5; background: #F2E5F7;}
.agenda-hour li:last-child .label.ccab span { padding-bottom:0color: #995E00; border-bottombackground: none#FFEECC;}
.agenda-hour li  .label.tbc span { background: #E3E6EB;}

@media screen and (min-width: 769px) {
	.agenda-hour-cols { display: flex;}
	.agenda-hour li .agenda-hour-col:nth-child(1) { width: 25%;  font-family: Source Sans Pro SB 30%;}
	.agenda-hour li .agenda-hour-col:nth-child(2) { width: 75%;}
.agenda-hour 70%}
}

/*---LABEL---*/ 
.label span { margin-bottom:0 padding:4px 10px; font-size: 12px; line-height: 12px; background: #E3E6EB; border-radius: 40px;}
.agenda-hour .labellabel.room1 span { paddingcolor:4px 10px#842DB5; font-sizebackground: 12px; line-height: 12px; background: #E3E6EB; border-radius: 40px#F2E5F7;}
.label.room2 span { color: #995E00; background: #FFEECC;}
.agenda-hour .label.plenaryroom3 span { color: #842DB5#3D597A; background: #F2E5F7#E3E6EB;}
.agenda-hour .label.ccabroom4 span { color: #995E00#00786F; background: #FFEECC#D0F3F1;}

/*---CUSTOM AGENDA---*/
.faq-content-box.custom-agenda {background-hour .label.tbc span { background: #E3E6EB;}

@media screen and (min-width: 769px) {
	.agenda-cols { display: flex;}
	.agenda-col:nth-child(1) { width: 30%;}
	.agenda-col:nth-child(2) { width: 70%}
}

/*---LABEL---*/ 
.label span { padding:4px 10px; font-size: 12px; line-height: 12px; background: #E3E6EB; border-radius: 40px;}
.label.room1 span { color: #842DB5; background: #F2E5F7;}
.label.room2 span { color: #995E00; background: #FFEECC;}
.label.room3 span { color: #3D597A; background: #E3E6EB;}
.label.room4 span { color: #00786F; background: #D0F3F1color: #00284A;}
.faq-content-box.custom-agenda h2 {color: #FFF;}

.faq-content-box.custom-agenda .expand-container { border-bottom: 1px solid rgba(255, 255, 255, 0.50);}
.faq-content-box.custom-agenda .expand-container:last-child { border-bottom: 1px solid transparent;}
.faq-content-box.custom-agenda .expand-control-text {color: #FFF;}
.faq-content-box.custom-agenda .expand-container .aui-icon::before { color: #FFF;}

.faq-content-box.custom-agenda .agenda-hour li {border-bottom: 1px dashed rgba(255, 255, 255, 0.25);}
.faq-content-box.custom-agenda .agenda-hour li:last-child { border-bottom: 1px dashed transparent;}
.faq-content-box.custom-agenda .agenda-hour li .agenda-hour-col:nth-child(1) {color: #FFF;}
.faq-content-box.custom-agenda .agenda-hour li .agenda-hour-col:nth-child(2) {color: rgba(255, 255, 255, 0.75);}

/*---CUSTOM AGENDA ADD ILLU---*/
.faq-content-box.custom { position: relative;}
.illu-projectathon-agenda {background-color: #00284A position: absolute; bottom: -65px; right: 50px;}
.faqillu-contentprojectathon-box.custom-agenda h2img {colorwidth: #FFF90px;}

.faq-content-box.custom-agenda .expand-container { border-bottom: 1px solid rgba(255, 255, 255, 0.50);}
.faq-content-box.custom-agenda .expand-container:last-child { border-bottom: 1px solid transparent;}
.faq-content-box.custom-agenda .expand-control-text {color: #FFF;}
.faq-content-box.custom-agenda .expand-container .aui-icon::before { color: #FFF;}

.faq-content-box.custom-agenda .agenda-hour li {border-bottom: 1px dashed rgba(255, 255, 255, 0.25);}
.faq-content-box.custom-agenda .agenda-hour li:last-child { border-bottom: 1px dashed transparent;}
.faq-content-box.custom-agenda .agenda-hour li .agenda-hour-col:nth-child(1) {color: #FFF;}
.faq-content-box.custom-agenda .agenda-hour li .agenda-hour-col:nth-child(2) {color: rgba(255, 255, 255, 0.75);}

/*---CUSTOM AGENDA ADD ILLU---*/
.faq-content-box { position: relative;}
.illu-projectathon-agenda { position: absolute; bottom: -65px; right: 50px;}
.illu-projectathon-agenda img {width: 90px@media screen and (min-width: 769px) {
  .illu-projectathon-agenda { bottom: -110px; right: 100px;}
  .illu-projectathon-agenda img {width: 180px;}
}    

/*---HOW TO REGISTER DISPLAY NONE FOR THE MOMENT---*/
#how-to-register { margin-top:-2rem; padding-top:0;}
#how-to-register-box { padding:3rem 1rem; background: #F3F4F7; border-radius: 20px;}
#how-to-register-box .cols p:first-child { display: none;}
#how-to-register-box ul { margin:2.5rem 0 0 0; padding: 0; list-style: none;}
#how-to-register-box ul li > div { display:flex; align-items: baseline; gap:10px;}
#how-to-register-box 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-register-box ul li:last-child > div > p { margin-bottom:0;}

@media screen and (min-width: 769px1366px) {
  .illu-projectathon-agenda	#how-to-register-box { bottompadding: -110px; right: 100px;}
  .illu-projectathon-agenda img {width: 180px;}
}    5rem;}
}

/*---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) {
 #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;}
}

/*---UPCOMING PROJECTATONS---*/
#upcoming-projectatons { padding-top:0; padding-bottom:0;}
.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;}

.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.pn"); 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.jp"); background-size: cover; 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 { 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-footer { margin-top: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-col { margin-bottom: 1.5rem;}
}

@media screen and (min-width: 992px) {
  .card-upcoming-cols { display: flex; width: 100%; gap:20px;}
  .card-upcoming-col:nth-child(1) { width: 50%;}
  .card-upcoming-col:nth-child(2) { width: 50%;}
  /*.card-upcoming-col:nth-child(3) { width: 29%;}*/
  .card-upcoming-body { flex: 1 1 auto;}
}  

/*---BOX CTA PROJECTATHON---*/
#box-cta-projectathon { 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;} 
#box-cta-projectathon ul { margin-bottom:0; padding:1rem 0 0 1rem; color: white;}
#box-cta-projectathon a.secondary-download { color: #EC8FFF;} 
/*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 .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}
}

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