Versions Compared

Key

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

...

CSS Stylesheet
@media screen and ( max-width: 600px ) {

.close-button { display: flex!important; position: relative; }

.illu-popup .collapse-panel { max-width: unset!important; top: -93px!important;}

.illu-popup-title { font-size: 14px!important;}




#eco1-container { top: 32%; left: 0%; }
#eco2-container { top: 69%; left: 24%; }
#eco2-container .h4 { width: 80px; }
#eco3-container { top: 69%; left: 54%; }
#eco4-container { top: 30%; left: 70%; }
#eco5-container { top: 0%; left: 55%; }
#eco6-container { top: 64%; left: 21%; flex-direction: column; }
#eco6-container .h4 { width: 80px; text-align: center; }
#eco7-container { top: 6%; left: 20%; flex-direction: column;}
#eco7-container .h4 { width: 150px!important; text-align: center; margin-bottom: 1rem;}
#eco8-container { top: 52%; left: 41%; flex-direction: column-reverse; }
#eco9-container { top: 52%; left: 51%; right: 5%; flex-direction: column-reverse; }
#eco9-container .h4 { width: 70px; text-align: center;}
#eco10-container { top: 4%; left: 55%; flex-direction: column-reverse; text-align: center; }
#eco11-container { top: 32%; right: 53%; flex-direction: row; }
#eco11-container .h4 { width: 100px!important; text-align: center; }
#eco12-container { top: 17%; left: 57%; flex-direction: column-reverse;}
#eco12-container .h4 { text-align: center; }

#v-actors_content, #v-process_content, #v-credentials_content { margin-top: 7.5rem; margin-bottom: 7.5rem; }

.collapse-panel { box-shadow: 0 0 0 9999px rgb(0 0 0 / 50%); }

}

@media screen and (min-width: 601px) {

.illu-popup .collapse-panel { max-width: unset!important;}

.illu-popup-title { font-size: 16px!important; text-align: center; }


#eco1-container { top: 37%; left: 7%; bottom: 50%; }
#eco2-container { top: 72%; left: 29%; bottom: 20%; }
#eco3-container { top: 72%; left: 58%; bottom: 20%; }
#eco4-container { top: 69%; left: 75%; bottom: 20%; right: 3%; flex-direction: column; text-align: center; }
#eco5-container { top: 17%; left: 64%; }
#eco6-container { top: 72.5%; left: 26%; flex-direction: column; text-align: center;}

#eco7-container { top: 32%; right: 53%; bottom: 55%; left: unset; flex-direction: row; text-align: center;}
#eco7-container .h4 { width: 150px!important; text-align: center; margin-bottom: 1rem;}
#eco8-container { top: 56%; left: 43%; right: 50%; flex-direction: column-reverse; text-align: center;}
#eco9-container { top: 56%; left: 64%; right: 20%; flex-direction: column-reverse; text-align: center;}
#eco10-container { top: 30%; left: 70%; bottom: 55%; flex-direction: row; text-align: center;}
#eco11-container { top: 39%; right: 54%; flex-direction: row; }
#eco11-container .h4 { width: 100px!important; text-align: center; }
#eco12-container { top: 39%; left: 74%; flex-direction: row;}
#eco12-container .h4 { text-align: center; }

}


@media screen and (min-width: 1000px) {

#eco1-container { top: 42%; left: 7%; bottom: unset;}
#eco1-container .h4 { text-align: start!important; }
#eco2-container { top: 42%; left: 29%; bottom: unset;}
#eco3-container { top: 72%; left: 58%; bottom: unset;}
#eco4-container { top: 72%; left: 83%; right: 5%; bottom: unset; flex-direction: row; text-align: start; }
#eco4-container .h4 { width: auto!important; text-align: start;}
#eco5-container { top: 17%; left: 64%; }
#eco5-container .h4 { text-align: start; }
#eco6-container { top: 73%; left: 26%; right: unset; bottom: unset; flex-direction: column; }
#eco7-container .h4 { margin: 0px; }
#eco8-container { top: 55%; left: 43%; right: unset; flex-direction: column; }
#eco9-container { top: 55%; left: 66%; right: unset; flex-direction: column; }
#eco10-container { }
#eco11-container { top: 39%; right: 54%;}
#eco12-container { top: 39%; left: 74%; }

#ecosect1 { top: 47.5%; left: 8%; right: 50%;}
#ecosect2 { top: 47.5%; left: 31%; right: 24%; }
#ecosect3 { top: 29%; left: 60%; right: unset; }
#ecosect4 { top: 48.5%; left: 45%; right: 12%; }
#ecosect5 { top: 22%; left: 66%; right: unset; }
#ecosect6 { top: 56%; left: 29%; right: 30%; }
#ecosect7 { top: 18%; left: 44%; right: 10%; }
#ecosect8 { top: 65%; left: 45%; right: 14%; }
#ecosect9 { top: 65%; left: 30%; right: 28%; }
#ecosect10 { top: 20%; left: 14%; right: 27%; }
#ecosect11 { top: 9%; left: 43.5%; right: unset; }
#ecosect12 { top: 6%; left: 19%; right: 24%; }

}

@media screen and (min-width: 1920px) {

#eco8-container { top: 56%; }
#eco9-container { top: 56%; }

#ecosect3 { top: 37%; }
#ecosect4 { top: 50.5%; }
#ecosect6 { top: 58%; }
#ecosect7 { top: 20%; left: 45%; }
#ecosect8 { top: 66%; }
#ecosect9 { top: 66%; right: 29%; }
#ecosect10 { top: 22%; right: 28%; }
#ecosect11 { top: 12%; left: 44.5%; }
#ecosect12 { top: 12%; }
}

.close-button { cursor: pointer; display: flex; flex-direction: flow; justify-content: flex-end; align-items: center; display: none;}

.fadeBody { top:0px; left:0px; z-index: 99; background: black; }
.ebsi-works-container { display:flex; flex-direction: column; gap: 24px; }

.illu-user-log { margin-bottom: 0!important; }
.hierarchy-first { margin-bottom: -1.5rem; }
Div
idsharing-benefits
classsection
Div
classcontainer
Div
classcols
Div
classcol-12
HTML
<h3 class="heading-deco secondary">What are the benefits of information sharing based on Verifiable Credentials?</h3>
Div
classcols
Div
classcol-4
HTML
<div class="img-container"><img src="https://ec.europa.eu/digital-building-blocks/sites/download/attachments/600343491/checkmark-illu.png?api=v2" alt=""/></div>
<div><h5><strong>Cross-border format friendly</strong></h5></div>
<div><p>With our standardised Verifiable Credentials data model, information’s format and structure is unified across borders and domains – making it less costly for an ecosystem to form.</p></div>
Div
classcol-4
HTML
<div class="img-container"><img src="https://ec.europa.eu/digital-building-blocks/sites/download/attachments/600343491/checkmark-illu.png?api=v2" alt=""/></div>
<div><h5><strong>Self-sovereignty, privacy & usability.</strong></h5></div>
<div><p>Holders of data are in control of what data they share, and when, with verifiers, thanks to their digital wallets. They can also prove that the information they share belongs to them.</p></div>
Div
classcol-4
HTML
<div class="img-container"><img src="https://ec.europa.eu/digital-building-blocks/sites/download/attachments/600343491/checkmark-illu.png?api=v2" alt=""/></div>
<div><h5><strong>Easier & faster verification.</strong></h5></div>
<div><p>The Verifiable Credentials model allows verifiers to trust the data without needing to trust the source of it and to easily identify holders.</p></div>

...