/*---------------------------------*/
/*---OOH HOME PAGE - 03-11-2022---*/
/*-------------------------------*/
.mb-0 { margin-bottom: 0;}
@media screen and (max-width: 769px) {
.img-mobile { width: 180px;}
}
@media screen and (max-width: 1200px) {
.not-d-block-mobile { display:inline !important;}
}
/*---INTRODUCTION---*/
#introduction .introduction-text { z-index: 3; position: relative;}
#introduction h1 { margin-bottom:2.5rem;}
#introduction p.lead { margin-bottom:0;}
#introduction .introduction-illu { position: relative;}
.introduction-illu-img { z-index: 2; position: relative; width: 180px;}
.introduction-illu p { margin-bottom:0;}
@media screen and (max-width: 768px) {
#introduction { overflow:visible;}
.introduction-illu-bg { width: 100%; height: auto;}
.introduction-illu-bg { z-index: 1; position:absolute; top: 0; left:0;}
}
@media screen and (min-width: 769px) {
#introduction { overflow:hidden;}
#introduction { padding-bottom: 26rem; }
.introduction-illu-img { width: 100%; max-width: 390px; height: auto;}
.introduction-illu-bg { z-index: 1; position:absolute; top: -8%; left:-8%;}
}
/*---WHO HUB FOR---*/
#who-hub-for { z-index: 3; position: relative; padding-top: 0;}
.who-hub-for-illu { text-align: center;}
.who-hub-for-illu img { width: 100%; max-width: 200px; height: auto;}
#who-hub-for p { margin-bottom: 0;}
@media screen and (max-width: 768px) {
#who-hub-for .cols { display: flex;}
#who-hub-for .cols {flex-basis: auto;}
.who-hub-for-text { width:60%;}
.who-hub-for-illu { order: 1; width:40%}
}
@media screen and (min-width: 769px) {
#who-hub-for { margin-top:-20rem; }
}
/*---ARCHITECTURAL DESIGN---*/
#architectural-design { padding-bottom:16rem; background: #F3F4F7;}
#architectural-design h2 { margin-bottom:2.5rem;}
#architectural-design h3 { margin-bottom:2.5rem;}
#architectural-design .cols:last-child p:last-child { margin-bottom:0;}
/*hack - remove empty p from confluence*/
#architectural-design > p:first-child, #architectural-design > p:last-child { display: none; border:1px solid red;}
#architectural-design .technical-system_steps { list-style: none; margin:0; padding: 0;}
#architectural-design .technical-system_steps li > div { display:flex; align-items: baseline; gap:10px;}
#architectural-design .technical-system_steps 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;}
#architectural-design .ico-download {filter: invert(99%) sepia(100%) saturate(2%) hue-rotate(141deg) brightness(110%) contrast(100%);}
#architectural-design .diagram { margin-top:2.5rem;}
/*
@media screen and (max-width: 768px) {
#architectural-design .technical-system_steps.mobile { margin-top:-2rem;}
}
*/
@media screen and (min-width: 769px) {
#architectural-design h3 { margin-top:3rem;}
}
/*---LATEST NEWS---*/
#latest-news { padding-top:0;}
#latest-news .container .cols > div > h2 { margin-bottom: 2.5rem;}
/*hack margin top 1rem + 1.5rem natural space from the newsteaser = 2.5rem spacing*/
.news-teaser-deprecated ~ p { margin-top:1rem; margin-bottom: 0; text-align:center;}
/*hack - remove empty p from confluence*/
#latest-news .container > p:first-child, #latest-news .container > p:last-child { border:1px solid red;}
#latest-news .news-teaser-root > div > div > div {display: inline-block; margin-top:1rem; background: #FFFFFF; border-radius: 12px; box-shadow: 0px 2px 12px rgba(0, 24, 50, 0.12);}
#latest-news .news-teaser-root a img { border-radius:0% 100% 0% 100% / 24% 0% 100% 76%; border-top-left-radius: 12px; border-top-right-radius: 12px;}
#latest-news .news-teaser-root > div > div > div > div > div > div:last-child { padding:0 2rem 0.25rem 2rem;}
#latest-news .news-teaser-root a h2 {font-size: 1.2rem; line-height: 1.4; text-transform: initial; text-decoration:none;}
#latest-news .news-teaser-root a, #latest-news .news-teaser-root a:link { display: inline-block; margin-bottom:0; color: #001832; text-decoration: none;}
#latest-news .news-teaser-root a:hover { text-decoration: underline;}
#latest-news .news-teaser-root .aui-group span { font-size: initial; color: #001832; }
#latest-news .news-teaser-root > div > div:last-child button { margin-top:1rem; color: #001832 !important; background-color: transparent; border: 1px solid #B7C2CF; border-radius: 6px;}
#latest-news .news-teaser-root > div > div:last-child button:hover { text-decoration: underline;}
@media screen and (max-width: 768px) {
#latest-news .news-teaser-root > div > div > div { position:relative !important; width: auto !important; left: auto !important; top: auto !important;}
#latest-news .news-teaser-root .aui-group { min-height: auto !important;}
}
/*---GUIDANCE BOX---*/
#guidance-box { position:relative; margin-top:-13rem; padding-top:0; padding-bottom:0;}
/*hack - remove empty p from confluence*/
#guidance-box .container > p:first-child, #guidance-box .container > p:last-child { display: none; border:1px solid green;}
#guidance-box .guidance-box { padding:21.5rem; background-color: #00284A; border-radius:20px;}
#guidance-box .container .cols { margin-bottom:-1rem;}
#guidance-box .guidance-box-col-colsillu { margin-bottom:1rem;}
#guidance-box .guidance-box-col-illu img { margin-bottom:2.5rem;}
#guidance-box .guidance-box-col-content {}width: 82px; height:auto;}
@media screen and (min-width: 769px) {
#guidance-box { margin-top:-10rem12rem;}
#guidance-box .guidance-box { padding:2.5rem;}
#guidance-box .guidance-box-cols { display: flex; align-items: center;}
#guidance-box .guidance-box-col-illu { margin-bottom:0; padding:0 3rem 0 0}
}
@media screen and (min-width: 1366px) {
#guidance-box .guidance-box { padding:5rem;}
}
#guidance-box h3, #guidance-box p { color: white;}
#guidance-box p.p-opacity { opacity: 0.75}
#guidance-box p:last-of-type { margin-bottom:0;}
/*hack - remove empty p from confluence*/
#guidance-box .container > p:first-child, #guidance-box .container > p:last-child { display: none; border:1px solid green;}
/*---DOCUMENTATION AND SERVICES---*/
#documentation-services { background: url("https://ec.europa.eu/digital-building-blocks/sites/download/attachments/565379323/bg-illu-sigle-documentation-services.svg") no-repeat 100% 10%
}
#documentation-services .common-supporting-services { }
#documentation-services .technical-design-documentation { padding-top: 2.5rem; margin-bottom:-1rem;}
#documentation-services .cols p:last-child { margin-bottom:0;}
/*hack - remove empty p from confluence*/
#documentation-services .container > p:first-child, #documentation-services .container > p:last-child { display: none; border:1px solid green;}
@media screen and (min-width: 769px) {
#documentation-services .technical-design-documentation div:first-child { padding: 1.5rem;}
}
/*---COLLABORATE WITH US---*/
#collaborate-with-us { position:relative; padding-top: 0; padding-bottom: 0; background: linear-gradient(to right, #00284A 0%, #00284A 50%, transparent 50%, transparent 100%);}
#collaborate-with-us .container { position: relative; padding: 3rem 3rem 9rem 0; background-color: #00284A; border-top-right-radius: 60px; border-bottom-right-radius: 60px;
}
@media screen and (min-width: 769px) {
#collaborate-with-us .container { padding: 6rem 3rem 6rem 0;}
}
.collaborate-with-us-img { position: absolute; bottom: 0; right: 1.5rem; width: 100%; max-width: 200px; height: auto;}
@media screen and (min-width: 769px) {
.collaborate-with-us-img { max-width: 320px;}
}
#collaborate-with-us h2 { margin-bottom:2.5rem;}
#collaborate-with-us .col-separator-before:before,
#collaborate-with-us .col-separator-after:after { border-left:1px solid rgba(255, 255, 255, 0.12);}
#collaborate-with-us .opacity-75 { color: rgba(255, 255, 255, 0.75);}
#collaborate-with-us h2, #collaborate-with-us h3, #collaborate-with-us p { color: white;}
#collaborate-with-us .p-badge {}
#collaborate-with-us .badge { margin-bottom:0; color: #995E00; background: #FFEECC;}
#collaborate-with-us a, #collaborate-with-us .restricted-space-link { color: #EC8FFF;}
.collaborate-with-us-list-link { margin:0; padding: 0;}
.collaborate-with-us-list-link li { margin-bottom: 1rem;}
.collaborate-with-us-list-link li:last-child { margin-bottom: 0;}
/*hack - remove empty p from confluence*/
#collaborate-with-us > p:first-child, #collaborate-with-us > p:last-child { display:none;}
/*---SERVICE DESK---*/
#service-desk { position:relative;}
#service-desk .service-desk-cta { margin-top: 2.5rem; margin-bottom:0;}
.service-desk-p-img { margin-bottom:0;}
.service-desk-p-img img { width: 100%; max-width: 200px; height: auto;}
/*---LATEST NEWS DEPRECATED BACKUP---*/
/*hack - remove empty p from confluence*/
.news-teaser-deprecated > p:first-child, .news-teaser-deprecated > p:last-child { display:none; border:1px solid green;}
.news-teaser-deprecated { padding-top:0; padding-bottom:0;}
.news-teaser-deprecated .newsteaser-entry { display: inline-block; margin-top:0.5rem; box-shadow:none;}
.news-teaser-deprecated .newsteaser-entry .aui-group { display: inline-block; margin-top:1rem; background: #FFFFFF; border-radius: 12px; box-shadow: 0px 2px 12px rgba(0, 24, 50, 0.12);}
/*LINK*/
.news-teaser-deprecated .newsteaser-entry a,
.news-teaser-deprecated .newsteaser-entry a:link { display:inline-block; background-color: transparent !important; border:none !important; }
.news-teaser-deprecated .newsteaser-entry .news-image a img { border-radius:0% 100% 0% 100% / 24% 0% 100% 76%; border-top-left-radius: 12px; border-top-right-radius: 12px;}
.news-teaser-deprecated .newsteaser-entry .news-metadata { font-size:1rem !important; color: #5E748E !important;}
.news-teaser-deprecated .newsteaser-entry h2 a { font-size: 1.2rem; line-height: 1.4; text-transform: initial; text-decoration:none; color: #001832 !important;}
.news-teaser-deprecated .newsteaser-entry h2 a:hover { text-decoration: underline !important;}
.news-teaser-deprecated .newsteaser-entry p a { font-weight: normal; color: inherit !important;}
.news-teaser-deprecated .newsteaser-entry p a:hover { text-decoration: underline !important;}
/*CONTENT*/
.news-teaser-deprecated .newsteaser-entry .aui-group > div:first-child { padding: 0;}
.news-teaser-deprecated .newsteaser-entry .aui-group > div:last-child { padding: 1rem 1rem 1rem;}
.news-teaser-deprecated .newsteaser-entry .aui-group > div:first-child a,
.news-teaser-deprecated .newsteaser-entry .aui-group > div:last-child a,
.news-teaser-deprecated .newsteaser-entry .aui-group > div:last-child p { margin-bottom: 0;}
@media screen and (max-width: 768px) {
.news-teaser-deprecated .newsteaser-entry { position:relative !important; top: 0 !important; left: 0 !important; float: none !important;; display: block !important; width: 100% !important;}
} | 