@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; } } |
|
|
|
|
|
|
|
|
.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; } |