Versions Compared

Key

  • This line was added.
  • This line was removed.
  • Formatting was changed.
CSS Stylesheet
/*--------------------------------------------------*/
/*---OOH PROJECTATONS OVERVIEW PAGE - 23-04-2024---*/
/*------------------------------------------------*/ 

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

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

#introduction h1 { margin-bottom:40px;}
#introduction h1 .heading-subtitle {display: block; font-size: 14px; line-height: 24px; letter-spacing: 5px; font-family: Source Sans Pro SB !important; text-transform: uppercase;}
#introduction p { margin-bottom:0;}
#introduction .introduction-illu { line-height:0 !important;}
#introduction .introduction-illu img { width: 180px;}

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

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

#introduction-p4 .col-5 p:first-child { display:none;}
#introduction-p4 .col-5 p.p-cta { margin-bottom:0;}

#introduction-p4 img { width: 180px;}

@media screen and (min-width: 769px) {
  #introduction-p4 .cols { display: flex; flex-flow: row-reverse; justify-content: center;}
  #introduction-p4 .introduction-illu { text-align:center;}
  #introduction-p4 img { width: 100%; max-width: 220px; height: auto;}
}

/*---PARTICIPATE---*/
#participate { background-color: #F3F4F7;}

#participate .container > p:first-child { display: none;}

/*reboot*/ 
#participate .container .cols { margin:0;}
#participate .container .cols .col-8,
#participate .container .cols .col-7,
#participate .container .cols .col-6,
#participate .container .cols .col-5 { padding:0;}

#participate h2 { margin-bottom:40px;}

#participate ul { display: flex; flex-direction: column; margin-bottom:0; padding:0; list-style:none;}
#participate ul li { position:relative; margin-top:12px; padding:0 1rem 0 1.75rem; }
#participate 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-repeat;}

#participate .cols-cta { margin-top:40px !important; padding-top:40px; border-top:1px solid #E3E6EB;}
#participate .cols-cta .p-cta { margin-bottom:0;}

.past-insights-illu { margin-bottom:0 !important; line-height:0;}
.past-insights-illu img { width: 100px;}

@media screen and (max-width: 768px) {
  .past-insights-illu { margin-top: 40px !important;}
}

@media screen and (min-width: 769px) {
  #participate .cols-cta .col-5 { display: flex; align-items: center; justify-content: center;}
  #participate .cols .col-6:nth-child(1) ul { padding-right:20px;}
  #participate .cols .col-6:nth-child(2) ul {padding-left:20px;}
}

/*---EXPECT---*/
#expect { padding-top:0; padding-bottom:0; background-color: #F3F4F7;}

#expect .container > p:first-child { display: none;}

/*reboot*/ 
#expect .container .cols { margin:0;}
#expect .container .cols .col-7 { padding:0;}
#expect .container .cols .col-6 { padding:0;}

#expect h2 { margin-bottom:40px;}
#expect h3 { margin-bottom: 0;}
#expect .p-ico { margin-bottom:12px;}
#expect .p-ico img { margin-left:-24px;}

#expect ul { display: flex; flex-direction: column; margin-bottom:0; padding:0; list-style:none;}
#expect ul li { position:relative; margin-top:12px; padding:0 1rem 0 1.75rem; }
#expect 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-repeat;}

@media screen and (max-width: 768px) {
  #expect .container .cols .col-6:nth-child(2) { padding-top: 24px;}
}

@media screen and (min-width: 769px) {
  #expect .container .cols .col-6:nth-child(1) { padding-right: 40px;}
  #expect .container .cols .col-6:nth-child(2) { padding-left: 40px; border-left:1px solid #E3E6EB;}
	#benefits { padding-bottom:15rem; background: #F3F4F7;}
	#benefits ul li { padding:0 3rem 0 1.75rem;}
}

/*---WORKING WITH---*/
#working-with { padding-bottom: 18rem; background-color: #F3F4F7;}

#working-with .container > p:first-child { display: none; border:1px solid red;}

/*reboot*/ 
#working-with .container .cols { margin:0;}
#working-with .container .cols .col-7 { padding:0;}
#working-with .container .cols .col-4 { padding:0;}

#working-with h2 { margin-bottom:40px;}
#working-with .p-ico { margin-bottom: 12px;}
#working-with .p-illu { margin-bottom: 0;}
#working-with .p-illu img { width: 100%; max-width: 220px; height: auto;}
#working-with .container .cols .col-4:nth-child(1) p:last-child, #working-with .container .cols .col-4:nth-child(2) p:last-child { width:80%;}

/*---BOX PLAYBOOK---*/
#box-cta-playbook { margin-top:-12rem; padding-top:0; position:relative;}

/*reboot*/ 
#box-cta-playbook .container .cols { margin:0;}
#box-cta-playbook .container .cols .col-8 { padding:0;}

.box-playbook { padding:1.5rem; background-color: #00284A; border-radius:20px;}

.box-playbook h4 span { display: block; font-size: 12px; letter-spacing: 5px; font-family: Source Sans Pro SB; text-transform: uppercase; color: rgba(251, 193, 29, 1);}
.box-playbook h4, #box-cta-playbook p { color: white;}
.box-playbook p.p-opacity { opacity: 0.75}
.box-playbook p:last-of-type { margin-bottom:0;}
.box-playbook ul { margin-bottom:0; padding:1rem 0 0 1rem; color: #EC8FFF;}
.box-playbook a.secondary-download { color: #EC8FFF;}
.box-playbook .box-playbook-illu img { width: 120px; height:auto;}

@media screen and (max-width: 768px) {
  .box-playbook .box-playbook-illu { margin-bottom:1rem;}
}

@media screen and (max-width: 900px) {
  #box-cta-playbook .container .cols .col-8 { width: 100%;}
}

@media screen and (min-width: 769px) {
  .box-playbook { padding:2.5rem;}
  .box-playbook-cols { display: flex; align-items: center; gap: 80px;}
}

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

/*---UPCOMING PROJECTATONS---*/
#upcoming-projectatons { padding-top: 0;}

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

#upcoming-projectatons h2 { margin-bottom:40px;}
#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.p4 .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-04.jpg"); background-size: cover; border-radius: 100% 0% 38% 62% / 0% 88% 12% 100% ;}
.card-upcoming-col.p5 .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-05.jpg"); 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;}
}

/*---PARTICIPANTS INSIGHTS---*/
#participants-insights { 
  background-image: url("https://ec.europa.eu/digital-building-blocks/sites/download/attachments/645595199/bg-illu-participants-insights.svg");
  background-position: top right;
  background-repeat: no-repeat;
  background-size: cover;
}

#participants-insights h2 { margin-bottom:40px;}

/*reboot*/ 
#participants-insights .container .cols { margin:0;}
#participants-insights .container .cols .col-12 { padding:0;}

/*---VIDEO---*/ 
.video-container-iframe { margin: 40px 0 0 0; position: relative; z-index: 1; width: 100%; overflow: hidden; padding-top: 56.25%; /* 16:9 Aspect Ratio */}
.video-container-iframe iframe { position: absolute; top: 0; left: 0; bottom: 0; right: 0; width: 100%; height: 100%; border: none; border-radius: 16px;}

/*---CARDS QUOTE---*/
.card-quote-cols { margin:80px auto 0 auto;}
.card-quote { position: relative; display: flex; flex-direction: column; min-width: 0; height: 100% !important; padding:2rem 2rem 2rem 2rem; background-color: white; box-shadow: 0px 2px 12px rgba(0, 24, 50, 0.12); border-radius: 12px; overflow: hidden;}

.card-quote-body .quote-sentence { position:relative; margin-bottom:0; padding-top:2rem;}
.card-quote-body .quote-sentence:before { content:''; position:absolute; top: 0; left: 0; width:24px; height:24px; background-image:url(https://ec.europa.eu/digital-building-blocks/sites/download/attachments/581239505/ico-quote-primary.svg)}

.card-quote-footer { margin-top:24px;} 
.card-quote-footer .quote-author { margin-bottom: 0; font-size: 14px; color:#5E748E;}

@media screen and (max-width: 768px) {
  .card-quote-col { margin-top:40px;}
}

@media screen and (min-width: 769px) {
  .card-quote-cols { display: flex; width: 100%; gap:20px;}
  .card-quote-col { width: 33%;}
  .card-quote-body { flex: 1 1 auto;}
}

@media screen and (min-width: 992px) {
  .card-quote-cols {width: 80%;}
}
Div
idintroduction
classsection
Div
classcontainer
Div
classcols justify-content-between align-items-center
Div
classcol-7
Html-bobswift
<h1><span class="heading-subtitle">what is a Projectathon</span>Accelerating the OOTS Implementation through Collaborative Testing</h1>
<p class="lead">A Projectathon is an event where different systems connect under one roof and perform a marathon of peer-to-peer interoperability and compliance tests in a structured environment for several days. The tests are supervised and verified by neutral experts acting as Monitors, with the goal being to develop the OOTS initiatives of Member States & Competent Authorities and prepare them for production.</p>
Div
classcol-4
Html-bobswift
<p class="introduction-illu"><img alt="" aria-hidden="true" src="https://ec.europa.eu/digital-building-blocks/sites/download/attachments/645595199/illu-introduction.png"></p>
Div
styledisplay:none;
idintroduction-p4
classsection
Div
classcontainer
Div
classcols align-items-center
Div
classcol-5
Html-bobswift
<h2>Introducing the first<br> thematic Projectathons</h2>
<p>Building on our past successes, in 2024 upcoming Projectathons, we're zooming in on key areas like education and population procedures (May Projectathon), and vehicles and business procedures (October Projectathon). By targeting specific themes and set of Competent Authorities, we're making these areas of Once-Only available to citizens and businesses as soon as possible.</p>
<p class="p-cta"><a class="btn primary" href="https://ec.europa.eu/digital-building-blocks/sites/display/OOTS/Projectathon4"><span>Go to Projectathon #4</span><span class="ico-cta-forward"></span></a></p>
Div
classcol-4
Html-bobswift
<p class="introduction-illu"><img alt="" aria-hidden="true" src="https://ec.europa.eu/digital-building-blocks/sites/download/attachments/645595199/illu-inttroduction-p4.png"></p>
Div
idparticipate
classsection
Div
classcontainer
Html-bobswift
<div class="cols">
<div class="col-8">
<h2>Why should you participate in a Projectathon?</h2>
<p>The Projectathon is a crucial step in the development, testing and deployment into production of the Once-Only Technical System components.</p>
</div>
</div>

<div class="cols">
<div class="col-6">
<ul>
<li>An excellent opportunity to <strong>verify</strong> that your systems or solutions <strong>effectively comply</strong> with the appropriate specifications.</li>
<li><strong>Perform peer testing</strong> with real systems using real-world scenarios and <strong>detect errors</strong> as soon as possible to reduce the cost of implementing and re-testing a fix.</li>
<li><strong>Meet relevant experts</strong> in the field to share and exchange views, experiences, and best practices.</li>
</ul>
</div>

<div class="col-6">
<ul>
<li>Your participation helps to <strong>improve and assess the proper functioning of the Technical Design Documents (TDDs)</strong> of the Once-Only Technical System.</li>
<li>You can also <strong>participate</strong> in a Projectathon <strong>as an observer</strong> and prepare yourself for the next Projectathon by getting in direct contact with active participants.</li>
</ul>
</div>
</div>


<div class="cols cols-cta">

<div class="col-7">
<p>Explore the valuable insights and reflections on Projectathon events and discover how Member States can benefit from participation before implementing the OOTS.</p>
<p class="p-cta"><a target="_blank" class="btn ghost" href="https://ec.europa.eu/digital-building-blocks/sites/display/OOTS/Projectathon4+gallery"><span>Go to Projectathon #4 highlights</span><span class="ico-cta-forward"></span></a></p>
</div>

<div class="col-5 justify-content-center">
<p class="past-insights-illu"><img alt="" aria-hidden="true" src="https://ec.europa.eu/digital-building-blocks/sites/download/attachments/645595199/illu-participate.png"></p>
</div>

</div>
Div
idexpect
classsection
Div
classcontainer
Html-bobswift
<div class="cols">
<div class="col-7">
<h2>What can you expect at the Projectathon?</h2>
<p>You will perform a marathon of tests in a structured environment using the "Gazelle" platform, as well as participate in some exploratory sessions.</p>
</div>
</div>

<div class="cols">

<div class="col-6">
<p class="p-ico"><img alt="" aria-hidden="true" src="https://ec.europa.eu/digital-building-blocks/sites/download/attachments/645595199/illu-testing.png"></p>
<h3 class="h5">Test</h3>
<ul>
<li><strong>Verify</strong> that your systems or solutions effectively comply with the <a target="_blank" href="https://ec.europa.eu/digital-building-blocks/sites/display/OOTS/Technical+Design+Documents">Technical Design Documents</a> of Once-Only, with the support teams from the European Commission.</li>
<li>Perform <strong>Peer-to-Peer</strong> testing with real or almost real systems using real-world scenarios end-to-end.</li>
</ul>
</div>

<div class="col-6">
<p class="p-ico"><img alt="" aria-hidden="true" src="https://ec.europa.eu/digital-building-blocks/sites/download/attachments/645595199/illu-ideas.png"></p>
<h3 class="h5">Explore</h3>
<ul>
<li>Participate on the <strong>Exploratory sessions</strong> to discuss and learn more about <strong>specific topics about Once-Only</strong> from evidence mapping to eIDAS.</li>
<li>Watch the <strong>Demos</strong> by Member States of their own Once-Only project in collaboration with neighbouring countries.</li>
</ul>
</div>

</div>
Div
idworking-with
classsection
Div
classcontainer
Html-bobswift
<div class="cols">
<div class="col-7">
<h2>Who will you be working with?</h2>
<p>The preparation of the Once-Only Technical System (OOTS) Projectathons requires the combined effort and input of a diverse and evolving set of contributors:</p>
</div>
</div>

<div class="cols">

<div class="col-4">
<p class="p-ico"><img alt="" aria-hidden="true" src="https://ec.europa.eu/digital-building-blocks/sites/download/attachments/645595199/ico-account-balance.svg"></p>
<h3 class="h5">European Commission and<br> Projectathon experts</h3>
<p>Organising team, Test session managers, Test module designer.</p>
</div>

<div class="col-4">
<p class="p-ico"><img alt="" aria-hidden="true" src="https://ec.europa.eu/digital-building-blocks/sites/download/attachments/645595199/ico-person.svg"></p>
<h3 class="h5">Participants</h3>
<p>Observers, Active participants including System under test operators and other participants.</p>
</div>

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

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

<div class="col-8">
<div class="box-playbook">
<div class="box-playbook-cols">

<div class="box-playbook-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="box-playbook-content">
<h4><span class="subtitle">Projectathon Playbook</span>Want to learn more?</h4>
<p class="p-opacity">Explore the Projectathon Playbook for a detailed overview of the Projectathon events organisation, teams and how to participate.</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_v4.00.pdf" onclick="_paq.push(['trackEvent','conversion','oots-projectathon-overview','oots-projectathon-playbook'])"><span>Download the Projectathon Playbook</span><span class="ico-download"></span></a></p>

<ul>
<li>
<a class="secondary-download " href="https://ec.europa.eu/digital-building-blocks/sites/download/attachments/645595199/Once-Only_Technical_System_Projectathon_Playbook_Appendix_Gazelle_SUT_capabilities_v4.00.pdf" onclick="_paq.push(['trackEvent','conversion','oots-projectathon-overview','oots-projectathon-playbook-appendix-gazelle'])"><span>Download Appendix: Gazelle SUT capabilities and associated concepts</span></a>
</li>
<li>
<a class="secondary-download" href="https://ec.europa.eu/digital-building-blocks/sites/download/attachments/645595199/Once-Only_Technical_System_Projectathon_Playbook_Annex2_How_to_do_pre-tests_in_Gazelle_V4.00.pdf" onclick="_paq.push(['trackEvent','conversion','oots-projectathon-overview','oots-projectathon-playbook-annex2-gazelle'])"><span>Annex 2: how to do pre-tests in Gazelle</span></a>
</li>
</ul>

</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">In 2024, the Commission is organising two thematic Projectathons with a focus on specific thematic areas, targeting a specific set of Competent Authorities.</p>

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

<!--CARD 01-->
<div class="card-upcoming-col p4">
<div class="card-upcoming">
<div class="card-upcoming-body">
<a href="#" style="pointer-events: none;"></a>
<h3>Projectathon #4</h3>   
<p>The May 2024 Projectathon is a thematic event with a focus on Education and Population data, targeting a set of Competent Authorities, and on linking the Once-Only Technical System with related systems such as EMREX.</p>

</div>
<div class="card-upcoming-footer">
<p class="card-upcoming-date">15 - 17 May, 2024 | Brussels</p>
<p><a class="btn ghost" href="https://ec.europa.eu/digital-building-blocks/sites/display/OOTS/Projectathon4"><span>Read more</span><span class="ico-cta-forward"></span></a></p>
</div>
</div>
</div>
<!---->

<!--CARD 02-->
<div class="card-upcoming-col p5">
<div class="card-upcoming">
<div class="card-upcoming-body">
<a href="#" style="pointer-events: none;"></a>
<h3>Projectathon #5</h3> 
<p>The November 2024 Projectathon will be a thematic event with a focus on Vehicle Registries and Business-related procedures, targeting this specific set of Competent Authorities.</p>
</div>
<div class="card-upcoming-footer">
<p class="card-upcoming-date">20 - 22 November, 2024 | Brussels</p>
<p style="display:flex; justify-content: end; align-items: end; height:48px;"><span class="badge warning"><img alt="" aria-hidden="true" src="https://ec.europa.eu/digital-building-blocks/sites/download/attachments/645595199/ico-coming-soon-warning.svg"><span>Coming soon</span></span></p>
</div>
</div>
</div>
<!---->

</div>
Div
idparticipants-insights
classsection
Div
classcontainer
Html-bobswift
<div class="cols">
<div class="col-12">

<h2>Participants insights</h2>
<p>Explore valuable insights and reflections on past Projectathon events.</p>

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

<div class="card-quote-cols">

<!--CARD 01-->
<div class="card-quote-col">
<div class="card-quote">
<div class="card-quote-body">
<p class="quote-sentence">“The value of this event is immeasurable. I already saw this value at the last Projectathon […] and it was a very difficult road to nationally make the office management aware of hiring a team for this Projectathon. But after we managed to come to the #2 Projectathon in larger numbers and successfully completed most of the tests, the transfer of information […] will be much easier to integrate into the management and I believe that we have opened new national perspectives"</p>
</div>
<div class="card-quote-footer">  
<p class="quote-author">Anonymous (Satisfaction survey)</p>   
</div>
</div>
</div>
<!---->

<!--CARD 02-->
<div class="card-quote-col">
<div class="card-quote">
<div class="card-quote-body">
<p class="quote-sentence">“Thank you for organising such a wonderful event! We were very happy to participate again and learned a lot. Heading home with lots of homework... :)"</p>
</div>
<div class="card-quote-footer">
<p class="quote-author">Finland (LinkedIn)</p>   
</div>
</div>
</div>
<!---->

<!--CARD 03-->
<div class="card-quote-col">
<div class="card-quote">
<div class="card-quote-body">
<p class="quote-sentence">“Paving the road for the European Interoperability! Another successful projectathon of the technical system for the cross-border data exchange. The Once Only Technical System (OOTS) will connect public authorities across the EU, so they can exchange official documents and data at the citizen's request. Great team Portugal!!!”</p>
</div>
<div class="card-quote-footer">
<p class="quote-author">Portugal (LinkedIn)</p> 
</div>
</div>
</div>
<!---->

</div>
Div
idintroduction
classsection
Div
classcontainer
Div
classcols justify-content-between align-items-center
Div
classcol-7
Html-bobswift
<h1><span class="heading-subtitle">Projectatons</span>What is a Projectathon</h1>
<p class="lead">A Projectathon is an event where different systems connect under one roof and perform a marathon of peer-to-peer interoperability and compliance tests in a structured environment for several days. The tests are supervised and verified by neutral experts acting as Monitors.</p>
Div
classcol-4
Html-bobswift
<p class="introduction-illu"><img alt="" aria-hidden="true" src="https://ec.europa.eu/digital-building-blocks/sites/download/attachments/645595199/illu-introduction.png"></p>
Div
idbox-cta-projectathon
classsection
Div
classcontainer
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" src="https://ec.europa.eu/digital-building-blocks/sites/download/attachments/581239505/illu-projectathon playbook.png" alt="">  
</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/592642240/Once-Only_Technical_System_Projectathon_Playbook_v1.00.pdf" onclick="_paq.push(['trackEvent','conversion','oots-event-overview','oots-projectathon-playbook'])"><span>Download the Projectathon Playbook</span><span class="ico-download"></span></a></p>
</div>

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

</div>
CSS Stylesheet
/*--------------------------------------------------*/ /*---OOH PROJECTATONS OVERVIEW PAGE - 16-02-2023---*/ /*------------------------------------------------*/ #main-content p:empty { display: none;} /*---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;} } /*---BOX CTA PROJECTATHON---*/ #box-cta-projectathon { position:relative; padding-top:0;} #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) { #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;} }