@media screen and (max-width: 500px) {
	.esspass-intro-content h1 { font-size: 28px; }
	.esspass-intro-content { text-align: left!important; }
}
@media screen and (min-width: 768px) { 
  .esspass-intro-content h1 { font-size: 40px;}
}

@media screen and (min-width: 1360px) { 
  .esspass-intro-content h1 { font-size: 48px;}
  .esspass-intro-content p { font-size:1.2rem;}
}

.esspass-intro { position: relative; min-height:65vh; }
.esspass-intro-wrapper {  display: flex; align-content: center; align-items: center; min-height:65vh;}
.esspass-intro-content { position: relative; margin:0 auto; width:90%; text-align: center;}
.esspass-intro-content h1 { margin-top:1rem; margin-bottom:2rem; font-size:40px; line-height: 1}
.esspass-intro-content p.lead { margin:0.5rem 0 0 0; font-size:18px;}
.esspass-intro-content h1, .esspass-intro-content p { color: white;} 
.esspass-header-im { position: absolute; object-fit: cover; height: 100%;}


@media screen and ( max-width: 1500px ) {
	.esspass-header-im { opacity: 0.4; }
 	.esspass-intro-wrapper {  display: flex; align-content: center; align-items: center; min-height:65vh; background: linear-gradient(104.77deg, #390990 100.97%, rgba(81, 13, 205, 0.2) 87.22%);}
}

@media screen and ( min-width: 1000px ) {
	.esspass-header-im { width: 100%;}
}


/* */

@media screen and (max-width: 768px) {
 .what-is-esspass .img-fluid { max-width: 100%!important; }
}

.what-is-esspass .img-fluid { max-width: 120%; }
.deco-esspass:after { margin-top: 1rem; content: ''; display: block; height: 3px; width: 60px; background-color: #510DCD!important; }
.deco-esspass-white:after { margin-top: 1rem; content: ''; display: block; height: 3px; width: 60px; background-color: white!important; }  .deco-esspass-purple:after { margin-top: 1rem; content: ''; display: block; height: 3px; width: 60px; background-color: #510DCD!important; }
    

/* Visit & Try */

.visit-try { background: #390990; border-radius: 40px 40px 0px 0px;}
.visit-try h2 { color: white; }
.visit-try p, .visit-try span { color: white; }
.visit-try ul { color: white; margin: 0;}
.visit-try .no-margin { margin-bottom: 0px; }
.visit-try .img-container { margin: 3rem 0; }
.esspass-outline { color: black!important; background: white; border: 1px solid black!important; margin-top: 2rem; margin-bottom: 2rem;}
.esspass-outline-white { color: white!important; background: #1D0D34; border: 1px solid white!important; margin-top: 2rem; margin-bottom: 2rem; position: relative; z-index: 10;}


.step-numbering { display: flex; gap: 1rem; align-items: center; } 
.step-numbering span { display: flex; align-items: center; justify-content: center; background: transparent; width: 53px; height: 53px; min-width: 53px; border-radius: 53px; color: white; font-size: 24px; border: 2px solid white; margin-bottom: 1.1rem;}
.step-numbering span strong { width: 15px; height: 23px; }
.step-numbering > p { font-size: 18px; line-height: 23px;}


.esspass-interested {background-color: #1D0D34; border-radius: 0 0 40px 40px; padding: 0 1.5rem;}
.esspass-interested p { color: white; }
.esspass-interested .esspass-dotted-line { position: absolute; bottom: 5px; left: 11px;}
.esspass-interested .esspass-outline { background: #1D0D34; position: relative; z-index: 10; }



/* remove margin/padding */

#main-content > p:nth-child(1) { display: none; }
#main-content > p:nth-child(2) { display: none; }

@media screen and ( max-width: 768px ) {
	.what-is-esspass-f-block { padding-left: 0px!important; padding-right: 0px!important; }
	.what-is-esspass-f-block h2, .what-is-esspass-f-block p{ padding-left: 16px; padding-right: 16px; }
	.visit-try .col-8 { padding-left: 0; padding-right: 0; }
	.visit-try .col-8 div:not(.img-container) { padding-left: 16px; padding-right: 16px; }
}
<img class="esspass-header-im" src="https://ec.europa.eu/digital-building-blocks/sites/download/attachments/647954453/esspass-background-intro.png" alt=""/>
<h1 class="center">Welcome to the ESSPASS booth</h1>
<p><span>Your EBSI Experience at the Digitalisation in social security coordination (ESSPASS) and ‘Labour Cards' conference</span><span class="d-block not-d-block-mobile"> 1 March 2023</span></p>
<p>Discover how verifiable digital credentials work and how they can improve cross-border verification of social security entitlements.</p>
<h2 class="deco-esspass heading-deco">What is ESSPASS?</h2>
<img class="img-fluid mobile-view" src="https://ec.europa.eu/digital-building-blocks/sites/download/attachments/647954453/esspass-illu-intro.png" alt="">
<p>The European Social Security Pass (ESSPASS) is exploring ways to facilitate the exercise of citizens’ social security rights across borders by simplifying the interactions with competent institutions and other actors. It focuses on digitalising the processes for the request and issuance of Portable Documents and the European Health Insurance Card (EHIC), introducing <strong>real-time mechanisms for the cross-border verification</strong> of the social security entitlements of mobile citizens and workers.  
It uses the EBSI’s framework for Verifiable Credentials including the EBSI ledger to make available information about trusted issuers of entitlement documents.</p>
<p>In addition to EBSI, ESSPASS leverages on existing EU and national digital initiatives, among others, the proposed European Digital Identity (EUDI) framework and on the EU ‘Single Digital Gateway’ Regulation. This Regulation requires that by the end of 2023, in the field of social security coordination, citizens are able to request and obtain electronically : the Portable Document A1 (PDA1), the EHIC, and a summary of pension decisions (PDP1). 
The first phase of ESSPASS  focused on the cross-border digital verification of the PDA1.</p>
<img class="img-fluid desktop-view" src="https://ec.europa.eu/digital-building-blocks/sites/download/attachments/647954453/esspass-illu-intro.png" alt="">
<h2 class="deco-esspass-white heading-deco">Visit our booth and try it yourself</h2>
<p>Experience the journey as a posted worker at our ESSPASS booth. We will guide you through the following steps:</p>
<div class="step-numbering"><span><strong>1.</strong></span><p><strong>Issuance of a PDA 1 Verifiable Credential</strong></p></div>
<div>
<p>Acting as self-employed person in country A, who wishes to work in country B, you can submit your request for a  PDA 1 to your National Social Security office.</p>
<p>After your request is approved, you will be issued a PDA 1 Verifiable Credential.</p>
<p><a class="btn esspass-outline" href="https://ec.europa.eu/digital-building-blocks/sites/display/EBSI/EBSI+Verifiable+Credentials" onclick="_paq.push(['trackEvent', 'conversion','esspass','ebsi-verifiable credentials explained'])"><strong>EBSI Verifiable Credentials Explained</strong></a></p>
</div>
<div class="img-container">
<img class="img-fluid" src="https://ec.europa.eu/digital-building-blocks/sites/download/attachments/647954453/clerk.svg" alt="">
</div>
<div class="step-numbering"><span><strong>2.</strong></span><p><strong>Download of a PDA 1 Verifiable Credential</strong></p></div>
<div>
<p>You will be able to download your PDA1 Verifiable Credential to a demo digital Wallet app. 
3 new Wallets will be soon ready to be used with ESSPASS</p>
</div>
<div class="img-container">
<img class="img-fluid" src="https://ec.europa.eu/digital-building-blocks/sites/download/attachments/647954453/posted%20worker.svg" alt="">
</div>
<div class="step-numbering"><span><strong>3.</strong></span><p><strong>Verification of a PDA 1 Verifiable Credential</strong></p></div>
<div>
<p class="no-margin">Finally, once you are in country B, an Inspector will ask you for your PDA1. You can accept the request with your Wallet app and share your PDA1 Verifiable Credential with the Inspector.
The Inspector will see the result of the automatic verification of the credential, which includes:</p>
<ul><li>The authenticity of the Issuer and Wallet holder</li>
<li>That the credential has not been tampered with</li>
<li>That the credential is not revoked or expired</li></ul>
<p>The Inspector can also see the contents of the PDA1 credential.</p>
</div>
<div class="img-container">
<img class="img-fluid" src="https://ec.europa.eu/digital-building-blocks/sites/download/attachments/647954453/inspector.svg" alt="">
</div>
<p>Are you interested to discover more about  the European Blockchain Services Infrastructure?</p>
<p><a class="btn esspass-outline-white" href="https://ec.europa.eu/digital-building-blocks/sites/display/ebsi/" onclick="_paq.push(['trackEvent', 'conversion','esspass','visit ebsi.eu'])"><strong>Visit ebsi.eu</strong></a></p>
<img class="esspass-dotted-line" src="https://ec.europa.eu/digital-building-blocks/sites/download/attachments/647954453/esspass-dotted-line.svg?api=v2" alt="">
<h2 class="deco-esspass-purple heading-deco">What are the benefits?</h2>
<p><span style="color:#510DCD"><strong>1.Easier exercise of social security rights</strong></span><span> thanks to a more efficient proof and verification of citizen’s entitlements.</span></p>
<p><span style="color:#510DCD"><strong>2.Facilitation of the verification process</strong></span><span> to all actors involved without the need to call upon a central entity to verify the validity and authenticity.</span></p>
<p><span style="color:#510DCD"><strong>3.The early identification and prevention of fraudulent activities</strong></span><span> and reduced risk of fraud and errors, e.g. clerical errors, falsification of documents.</span></p>
<h2 class="deco-esspass heading-deco">3 new Wallets will be soon ready to be used with ESSPASS</h2> <p>Three new digital wallets will soon be conformant to EBSI's specifications and will allow you to store, verify and share Social Security credentials, such as PDA1, across Europe.</p>
<p class="center"><img src="https://ec.europa.eu/digital-building-blocks/sites/download/attachments/647954453/esspass-icon-wallet_CorpoSign.svg" alt=""/></p>
<div class="box-content"><h3 class="secondary h4">CorpoSign DID</h3>
<p>CorpoSign DID is a wallet application that uses blockchain and cryptographic technology to easily identify and connect people with government, businesses, data, and services. It is fully conformant with EBSI and W3C interoperability standards for decentralised identifiers and verifiable credentials.
Our application is a novel and unique method for users to authenticate themselves and use the verifiable credentials framework. CorpoSign DID is a wallet that lets users store verifiable credentials and generate verifiable authorisation presentations. All verified credentials may be stored in a single mobile app. This includes verifiable credentials like the PDA1.</p></div>
<div class="card-footer">  <a class="link-cta text-secondary-esspass" onclick="_paq.push(['trackEvent', 'conversion','esspass','CorpoSign DID'])" href="https://www.corposign.net" target="_blank" ><span>Read more</span></a> </div>
<p class="center"><img src="https://ec.europa.eu/digital-building-blocks/sites/download/attachments/647954453/esspass-icon-wallet_iGrantio.svg?api=v2" alt=""/></p>
<div class="box-content"><h3 class="secondary h4">Data Wallet by iGrant.io</h3>
<p>Data Wallet by iGrant.io puts you, the individual, in control of your personal data. Your data is stored securely, and you decide what to share and with whom. Data exchange transactions are based on signed, auditable data agreements, ensuring high end-user control and privacy. The supported usecases include applying for jobs (e.g., mobile driver's license), social security (e.g. ESSPASS) and labour cards.
Based out of Sweden, iGrant.io supports European Blockchain Service Infrastructure (EBSI) as a trust anchor for its data intermediation service, helping organisations access the right data - lawful, scalable and verifiable, while protecting individuals' digital rights.</p></div>
<div class="card-footer">  <a class="link-cta text-secondary-esspass" onclick="_paq.push(['trackEvent', 'conversion','esspass','Data Wallet by iGrant.io'])" href="https://igrant.io/datawallet.html" target="_blank"><span>Read more</span></a> </div>
<p class="center"><img src="https://ec.europa.eu/digital-building-blocks/sites/download/attachments/647954453/esspass-icon-wallet_WalliD.svg?api=v2" alt=""/></p>
<div class="box-content"<h3 class="secondary h4">WalliD</h3>
<p>WalliD is the SSI wallet of the future, offering seamless storage, management, and proof of digital credentials and IDs both online and offline, in compliance with EBSI and other ID protocols. Its recent integration with PDA1 credentials takes its capabilities to new heights, making it the perfect tool for handling European Social Security Passes and all their use cases. With WalliD, you can experience the most innovative and secure way to manage your digital identity, enabling you to streamline your day-to-day activities with unparalleled ease and convenience.</p></div>
<div class="card-footer">  <a class="link-cta text-secondary-esspass" onclick="_paq.push(['trackEvent', 'conversion','esspass','WalliD'])" href="https://wallid.io" target="_blank"><span>Read more</span></a> </div>
<img class="" src="https://ec.europa.eu/digital-building-blocks/sites/download/attachments/647954453/bg-curve-esspass.png?api=v2" alt="">
<h2>For more information about ESSPASS</h2>
<p><a class="link-cta text-secondary-esspass-white" onclick="_paq.push(['trackEvent', 'conversion','esspass','ESSPASS Overview and main concepts (PDF)'])" target="_blank" href="https://ec.europa.eu/social/BlobServlet?docId=26166&langId=en"><span>ESSPASS Overview and main concepts (PDF)</span></a></p>
<p><a class="link-cta text-secondary-esspass-white" onclick="_paq.push(['trackEvent', 'conversion','esspass','ESSPASS on DG EMPL’s website'])" target="_blank" href="https://ec.europa.eu/social/main.jsp?catId=1545&langId=en"><span>ESSPASS on DG EMPL’s website</span></a></p>
.section-esspass-box { position:relative; padding:1.5rem; box-shadow: 0px 4px 20px rgba(0, 55, 100, 0.1); border-radius: 16px; background-color: white; display: flex; flex-direction: column; justify-content: space-between; height: 100%;}
.section-esspass-box .center { text-align: center; }
.section-esspass-box .link-cta span:after{ background: url(https://ec.europa.eu/digital-building-blocks/sites/download/attachments/647954453/esspass-icon-arrow_right.svg) left no-repeat!important; }
.section-esspass-box .text-secondary-esspass { color: #450FA2!important;}
.section-esspass-box .text-secondary-esspass span:after { background: url(https://ec.europa.eu/digital-building-blocks/sites/download/attachments/647954453/esspass-icon-ext.svg) left no-repeat!important; } .section-esspass-box .text-secondary-esspass:hover { text-decoration: underline; }
.section-esspass-box .card-footer { display: flex; justify-content: end; }
.section-esspass-box .box-content { height: 100%; }
.esspass-info { position: relative; z-index: 100; margin-bottom: 3rem;}
.esspass-info h2, .esspass-info a { color: white!important; }
.bg-curve-esspass { position: relative; }
.bg-curve-esspass img { position: absolute; top: -234px; left: 0; width: 100%;}
.wallets-esspass { position: relative; z-index: 100; padding-top: 0;}
.wallets-esspass .col-4 { padding:12px 8px; }

.mobile-view { display: none; margin: 2rem 0;}
@media screen and ( max-width: 768px ) {
	.esspass-info { background: #450FA2; }
	.mobile-view { display: block; }
	.desktop-view { display: none; }
	
}

.esspass-info .text-secondary-esspass-white { color: white!important;}
.esspass-info .text-secondary-esspass-white span:after { background: url(https://ec.europa.eu/digital-building-blocks/sites/download/attachments/647954453/esspass-icon-ext_white.svg) left no-repeat!important; }
.esspass-info .text-secondary-esspass-white:hover { text-decoration: underline; }

.img-container .img-fluid { width: 100%!important; }