Page History

...

Div

id	box-cta-projectathon
class	section

Div

class	container

Html-bobswift

<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/581239505/illu-projectathon playbook.png">  
</div>

<div class="projectathon-box-col-content">
<h3 class="h5">Projectathon Playbook</h3>
<p class="p-opacity">The Projectathon Playbook provides a detailed overview of the Projectathon events organized for teams across the Member States willing to test their system before the go-live of the    Once-Only Technical System.</p>
<p><a class="btn primary-bis" href="https://ec.europa.eu/digital-building-blocks/sites/download/attachments/645595199/Once_Only_Technical_System_Projectathon_Playbook_v2.00.pdf" onclick="_paq.push(['trackEvent','conversion','oots-projectathon-detail-page-01','oots-projectathon-playbook'])"><span>Download the Projectathon Playbook</span><span class="ico-download"></span></a></p>
</div>

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

</div>

Div

id	upcoming-projectatons
class	section

Div

class	container

Html-bobswift

<div class="cols">
<div>

<h2>Past & Upcoming Projectathons</h2>
<p 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-->
<div class="card-upcoming-col">
<div class="card-upcoming">
<div class="card-upcoming-body">
<a href="https://ec.europa.eu/digital-building-blocks/sites/display/OOTS/Projectathon1"></a>
<h3>Projectathon #1</h3>
<p>The first OOTS 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>The second OOTS Projectathon takes place in June, providing a valuable moment when national implementation teams can 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>The third OOTS Projectathon takes place in October, just two months before the legal deadline and so comes at a critical point in Europe’s Once-Only journey.</p>
<p class="card-upcoming-date">October 2023</p>
</div>
<div class="card-upcoming-footer">
<p class="label">Available soon</p> 
</div>
</div>
</div>
<!---->

</div>

CSS Stylesheet

/*------------------------------------------------*/
/*---OOH PROJECTATONS DETAIL PAGE - 13-03-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/647954663/illu-introduction-projectathon-01.jpg"); background-size: cover;} 
.introduction-box-content { 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: 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---*/
.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---*/
.agenda-list { margin: 0; padding: 0;}
.agenda-list > li { margin:2rem 0 0 0; padding-bottom:1rem; list-style-type: none; border-bottom: 1px solid #E3E6EB;}
.agenda-list > li:first-child { margin-top:0;}
.agenda-list > li:last-child { padding-bottom:0; border-bottom: none;}
.agenda-col:nth-child(1) p { font-size: 18px; color: #001832;}
.agenda-list > li:last-child .information-col:nth-child(2) p { margin-bottom:0;}
.agenda-list li:last-child .agenda-col:nth-child(2) p:last-child { margin-bottom:0;}

.agenda-hour { margin: 0; padding:0; }
.agenda-hour li { padding:1rem 0; list-style: none; border-bottom: 1px dashed #F2E5F7;}
.agenda-hour li:first-child { padding-top:0;}
.agenda-hour li:last-child { padding-bottom:0; border-bottom: none;}
.agenda-hour li .agenda-hour-cols { display: flex;}
.agenda-hour li .agenda-hour-col:nth-child(1) { width: 25%;  font-family: Source Sans Pro SB;}
.agenda-hour li .agenda-hour-col:nth-child(2) { width: 75%;}
.agenda-list .label

CSS Stylesheet

/*------------------------------------------------*/
/*---OOH PROJECTATONS DETAIL PAGE - 13-03-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/647954663/illu-introduction-projectathon-01.jpg"); background-size: cover;} 
.introduction-box-content { 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: 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---*/
.information-list
.agenda-list .label span { padding:4px 10px; font-size: 12px; line-height: 12px; background: #E3E6EB; border-radius: 40px;}
.agenda-list .label.plenary span { color: #842DB5; background: #F2E5F7;}
.agenda-list .label.ccab span { color: #995E00; background: #FFEECC;}
.agenda-list .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%}
}

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

.room-hour { margin: 0; padding: 0; }
.informationroom-listhour li { margin:2rem 0 0 0; padding-bottom:1rempadding:1rem 0; list-style-type: none; border-bottom: 1px soliddashed #E3E6EB#F2E5F7;}
.informationroom-listhour li:first-child { marginpadding-top:0;}
.informationroom-listhour 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) {
	.informationroom-hour li .room-hour-cols { display: flex; align-items: center;}
	.information}
.room-hour li .room-hour-col:nth-child(1) { width: 25%;  font-family: 30% Source Sans Pro SB;}
	.information.room-hour li .room-hour-col:nth-child(2) { width: 70%75%;}
}  

/*---AGENDA---*/
.agenda-list { margin: 0; padding: 0;}
.agenda-list > li { margin:2rem 0 0 0; padding-bottom:1rem; list-style-type: none; border-bottom: 1px solid #E3E6EB;}
.agenda-list > li:first-child { margin-top:0;}
.agenda-list > li:last-child { padding-bottom:0; border-bottom: none;}
.agenda-col:nth-child(1) p { font-size: 18px; color: #001832;}
.agenda-list > li:last-child .information.room-list .label {}
.room-list .label span { padding:4px 10px; font-size: 12px; line-height: 12px; background: #E3E6EB; border-radius: 40px;}
.room-list .label.room1 span { color: #842DB5; background: #F2E5F7;}
.room-list .label.room2 span { color: #995E00; background: #FFEECC;}

@media screen and (min-width: 769px) {
	.room-cols { display: flex;}
	.room-col:nth-child(21) p { margin-bottom:0width: 30%;}
.agenda-list li:last-child .agenda-	.room-col:nth-child(2) p:last-child { margin-bottom:0;width: 70%}
}

.agenda-hour/*---PERFORM---*/ 
#perform { margin: 0-top:-2.5rem; padding:0; }
.agenda-hour li { padding:1rem margin-bottom:1.5rem; padding-top:0; list-style: none; border-bottom: 1px dashed #F2E5F7padding-bottom:0;}
.agenda-hour li:first-child#perform .cols { paddingmargin-topbottom:0;} 
.agenda-hour li:last-child { padding-bottom:0; border-bottom#perform ul { margin:2.5rem 0 0 0; padding: 0; list-style: none;}
.agenda-hour#perform ul li .agenda-hour-cols > div { display: flex;}
.agenda-hour li .agenda-hour-col:nth-child(1) { width: 25%;  font-family: Source Sans Pro SB;}
.agenda-hour li .agenda-hour-col:nth-child(2) { width: 75%;}
.agenda-list .label { margin-bottom:0;}
.agenda-list .label span { padding:4px 10px; font-size: 12px; line-height: 12px; background: #E3E6EB; border-radius: 40px;}
.agenda-list .label.plenary span { color: #842DB5; background: #F2E5F7;}
.agenda-list .label.ccab span { color: #995E00; background: #FFEECC;}
.agenda-list .label.tbc span { background: #E3E6EB align-items: baseline; gap:10px;}
#perform 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;}
#perform ul li:last-child > div > p { margin-bottom:0;}
#perform h3 { margin-bottom:2.5rem;}
.perform-illu { margin-bottom:0; line-height:0 !important;} 
.perform-illu img { width: 180px;}

@media screen and (min-width: 769px) {
	.agenda-cols { display: flex;}
	.agenda-col:nth-child(1)perform-illu img { width: 30%;}
	.agenda-col:nth-child(2) { width: 70%100%; max-width: 270px; height: auto;}
}

/*---ROOMTIMELINE---*/
#timeline .cols { margin-bottom:0;}

.roomtimeline-list { margin: 00 !important; padding: 0;}
.roomtimeline-list > li { margin:2rem 0 0 0; padding-bottom:1rem; list-style-type: none; border-bottom: 1px solid #E3E6EB;}
.roomtimeline-list > li:first-child { margin-top:0;}
.roomtimeline-list > li:last-child { padding-bottom:0; border-bottom: none;}
.roomtimeline-col:nth-child(1) p { font-size: 18px; color: #001832;}
.timeline-col:nth-child(2) p:first-child { font-size: 18px; font-weight: bold; color: #001832;}
/*.roomtimeline-list > li:last-child .roomtimeline-col:nth-child(2) p:last-child { margin-bottom:0;}*/
.room-list li:last-child .room

@media screen and (min-width: 769px) {
	.timeline-cols { display: flex; align-items: center;}
	.timeline-col:nth-child(1) { width: 30%;}
	.timeline-col:nth-child(2) { p:last-child { margin-bottom:0;}

.room-hour { margin: 0; padding:0; }
.room-hour li { padding:1rem 0; list-style: none; border-bottom: 1px dashed #F2E5F7;}
.room-hour li:first-child { padding-top:0;}
.room-hour li:last-child { padding-bottom:0; border-bottom: none;}
.room-hour li .room-hour-cols { display: flex;}
.room-hour li .room-hour-col:nth-child(1)width: 70%}
}

/*---BOX CTA PROJECTATHON---*/
#box-cta-projectathon { padding-top:0; 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: 25%120px;  font-family: Source Sans Pro SB;}
.room-hour li .room-hour-col:nth-child(2) { width: 75%;}
.room-list .label {}
.room-list .label span { padding:4px 10px; font-size: 12px; line-height: 12px; background: #E3E6EB; border-radius: 40px;}
.room-list .label.room1 span { color: #842DB5; background: #F2E5F7;}
.room-list .label.room2 span { color: #995E00; background: #FFEECC;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) {
 #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: 769px) {
	.room-cols { display: flex;}
	.room-col:nth-child(1 (min-width: 1366px) { width: 30%;}
	.room-col:nth-child(2)
 #box-cta-projectathon .projectathon-box { widthpadding: 70%5rem;}
}

/*---PERFORMHOW TO REGISTER DISPLAY NONE FOR THE MOMENT---*/ 
#perform#how-to-register { margin-top:-2.5rem2rem; marginpadding-bottomtop:1.5rem; padding-top:0; padding-bottom:0;}
#perform .cols { margin-bottom:0;} 
#perform0;}
#how-to-register-box { padding:3rem 1rem; background: #F3F4F7; border-radius: 60px;}
#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;}
#perform ul li > div { display:flex; align-items: baseline; gap:10px;}
#perform #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;}
#perform ul li:last-child:flex; align-items: baseline; gap:10px;}
#how-to-register-box ul li > div > pspan { margin-bottom:0;}
#perform h3 { margin-bottom:2.5rem;}
.perform-illu { margin-bottom:0; line-height:0 !important;} 
.perform-illu img { width: 180px;}

@media screen and (display: flex; align-items: center; justify-content: center; background: #E3E6EB; width: 24px; height: 24px; min-width: 769px) {
  .perform-illu img { width: 100%; max-width: 270px; height: auto;}
}

/*---TIMELINE---*/
#timeline .cols24px; border-radius: 24px; color: #3D597A; font-size: 12px;}
#how-to-register-box ul li:last-child > div > p { margin-bottom:0;}

.timeline-list { margin: 0 !important; padding: 0;}
.timeline-list li#how-to-register-box h3 { margin:2rem 0 0 0; padding-bottom:1rem; list-style-type: none; border-bottom: 1px solid #E3E6EB;}
.timeline-list li:first-child { margin-top:0;}
.timeline-list li:last-child2.5rem;}

@media screen and (min-width: 1366px) {
	#how-to-register-box { padding:5rem;}
} 

/*---PAST INSIGHTS---*/
#past-insights { padding-bottom:0; border/*background-bottomcolor: none#F3F4F7;*/}
.timeline-col:nth-child(1) wiki-content .past-insights-p { fontmargin-sizebottom: 18px; color: #001832;2rem;}
.timelinepast-col:nth-child(2) p:first-child { font-size: 18px; font-weight: bold; color: #001832insights-illu { line-height:0 !important;}
.past-insights-illu img { width: 180px;}
.timelinewiki-list li:last-child .timeline-col:nth-child(2) p:last-child content .past-insights-cta { margin-bottom:0;}

@media screen and (min-width: 769px) {
	.timeline-cols { display: flex; align-items: center;}
	.timeline-col:nth-child(1).past-insights-illu img { width: 30%;}
	.timeline-col:nth-child(2) { width: 70%100%; max-width: 200px; height: auto;}
}

/*---BOX CTA PROJECTATHONREPORT---*/
#box-cta-projectathonreport { padding-topbottom:0; position:relative;}
#box-cta-projectathonreport .projectathon-box { padding:1.5rem; background-color: #00284A; border-radius:20px;}
#box-cta-projectathonreport .container .cols { margin-bottom:-1rem;}
#box-cta-projectathonreport .projectathon-box-col-illu { margin-bottom:1rem;}
#box-cta-projectathonreport .projectathon-box-col-illu img { width: 120px; height:auto;}
#box-cta-projectathonreport h3, #box-cta-projectathonreport p { color: white;}
#box-cta-projectathonreport p.p-opacity { opacity: 0.75}
#box-cta-projectathonreport p:last-of-type { margin-bottom:0;}
/*hack - remove empty p from confluence*/
#box-cta-projectathonreport .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-projectathonreport .projectathon-box { padding:2.5rem;}
 #box-cta-projectathonreport .projectathon-box-cols { display: flex; align-items: center;}
 #box-cta-projectathonreport .projectathon-box-col-illu { margin-bottom:0; padding:0 3rem 0 0}
}

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

/*---HOW TO REGISTER DISPLAY NONE FOR THE MOMENTUPCOMING PROJECTATONS---*/
#upcoming-projectatons {}
.card-upcoming-cols { margin-top: 1.5rem;}

/*---UPCOMING CARDS---*/
#how-to-register { margin-top:-2rem; padding-top:0;}
#how-to-register-box { padding:3rem 1rem; background: #F3F4F7; border-radius: 60px;}
#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.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.png"); background-size: cover; border-radius: 24px;100% color:0% #3D597A; font-size: 12px;}
#how-to-register-box ul li:last-child > div > p { margin-bottom:0;}
#how-to-register-box h3 { margin-bottom:2.5rem;}

@media screen and (min-width: 1366px) {
	#how-to-register-box { padding:5rem;}
} 

/*---PAST INSIGHTS---*/
#past-insights { padding-bottom:0; /*background-color: #F3F4F7;*/}
.wiki-content .past-insights-p { margin-bottom:2rem;}
.past-insights-illu { 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;}
}

/*---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 green47% 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 h3 { margin-top:24px; font-size:20px; line-height:24px;}
.card-upcoming-body p { position:relative;}
.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 .label { display: inline; padding: 8px 12px; font-size: 12px; line-height: 12px; color: #842DB5; background: #F2E5F7; border-radius: 40px;}

@media screen and (minmax-width: 769px991px) {
 #box-cta-report .projectathoncard-upcoming-boxcol { padding:2margin-bottom: 1.5rem;}
 #box-cta-report .projectathon-box}
}

@media screen and (min-width: 992px) {
  .card-upcoming-cols { display: flex; align-items: centerwidth: 100%; gap:20px;}
 #box-cta-report .projectathoncard-boxupcoming-col-illu:nth-child(1) { margin-bottom:0; padding:0 3rem 0 0}
}

@media screen and (min-width: 1366px) {
 #box-cta-report .projectathon-box { padding:5remwidth: 29%;}
  .card-upcoming-col:nth-child(2) { width: 42%;}
  .card-upcoming-col:nth-child(3) { width: 29%;}
  .card-upcoming-body { flex: 1 1 auto;}
}

Page tree

Versions Compared

Old Version 253

New Version 254

Key