/*-----------------------------------------*/
/*---OOH ARCHITECTURE PAGE - 07-11-2022---*/
/*---------------------------------------*/

.no-mb { margin-bottom:0 !important;}

@media screen and (max-width: 769px) {
  .img-mobile { width: 180px;}
  .remove-on-mobile { display:none !important;}
}  

@media screen and (max-width: 1200px) {
  .not-d-block-mobile  { display:inline !important;}
}

/*---INTRODUCTION---*/
#introduction h1 { margin-bottom:2.5rem;}
#introduction p { margin-bottom:0;}
/*hack - remove empty p from confluence*/
#introduction p:first-child ,#introduction p:last-child { display:none; border:1px solid red;}

 /*---ARCHITECTURAL DESIGN---*/
#architectural-design { background: #F3F4F7;}
#architectural-design h2 { margin-bottom:2.5rem;}
.architectural-design-list { display: flex; margin: 0; padding: 0; list-style-type: none !important;}
.architectural-design-list li { margin-right:3.75rem;}
/*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%);}

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

/*---BUILDING BLOCK---*/
#building-block { position:relative; padding-top: 0; padding-bottom: 0; background: linear-gradient(to right, #00284A 0%, #00284A 50%, transparent 50%, transparent 100%);}
#building-block .container { padding: 6rem 3rem 5rem 0; background-color: #00284A; border-top-right-radius: 60px; border-bottom-right-radius: 60px;}
#building-block .col-separator-before:before, 
#building-block .col-separator-after:after { border-left:1px solid rgba(255, 255, 255, 0.12);}
#building-block .cols:nth-child(2) { margin-top:-4rem; margin-bottom:2rem;}
#building-block .cols:nth-child(2) img { margin-top:2rem;}
#building-block .opacity-75 { opacity: 0.75;}
#building-block h2, #building-block h3, #building-block p { color: white;} 

/*hack - remove empty p from confluence*/
#building-block > p:first-child,  #building-block > p:last-child { display:none; border:1px solid red;}

.diagram-edelivery-access-point-container { position:relative;}
.diagram-edelivery-access-point { position:absolute; top:0; left:0;}  

/*---INTERMEDIARY PLATFORMS---*/
.intermediary-platforms.first { padding-top:12rem; padding-bottom: 0;}
.intermediary-platforms.second { padding-top:0;}
.intermediary-platforms.first p:last-child, .intermediary-platforms.second p:last-child { margin-bottom: 0;}
.intermediary-platforms.second > p:first-child, .intermediary-platforms.second > p:last-child { display: none; border:1px solid red;}

.intermediary-platforms.first {
 background-image: url("https://ec.europa.eu/digital-building-blocks/sites/download/attachments/604504755/bg-illu-sigle-inter-platform-section-1.svg");
 background-position: top right;
 background-repeat: no-repeat;
 background-size: 100%;
}

@media screen and (max-width: 768px) {
.intermediary-platforms.first {
  background-position: top right;
  background-size: 240%;
 }
}

.intermediary-platforms h3 { margin-top:2.5rem;}
.intermediary-platforms ul { display: flex; flex-wrap: wrap; margin-bottom:2.5rem; padding:0; list-style:none;}
.intermediary-platforms ul li { flex-shrink: 2; position:relative; margin-top:1.5rem; padding:0 1rem 0 1.5rem; width: 50%;}
.intermediary-platforms ul li:before { content:''; display: block; position: absolute; top:0; left:0; height: 20px; width: 20px; background: url("https://ec.europa.eu/digital-building-blocks/sites/download/attachments/604504755/ico-check-primary.svg") no-repeat;}

.intermediary-platforms .link-download { margin-right: 32px !important;}

/*---BOX CTA EVENTS---*/
#box-cta-events { position:relative; padding-top:0;}
#box-cta-events .event-box { padding:1.5rem; background-color: #00284A; border-radius:20px;}
#box-cta-events .container .cols { margin-bottom:-1rem;}
#box-cta-events .event-box-col-illu { margin-bottom:1rem;}
#box-cta-events .event-box-col-illu img { width: 120px; height:auto;}

@media screen and (min-width: 769px) {
 #box-cta-events .event-box { padding:2.5rem;} 
 #box-cta-events .event-box-cols { display: flex; align-items: center;}
 #box-cta-events .event-box-col-illu { margin-bottom:0; padding:0 3rem 0 0}
}

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

#box-cta-events h3, #box-cta-events p { color: white;}
#box-cta-events p.p-opacity { opacity: 0.75}
#box-cta-events p:last-of-type { margin-bottom:0;}

/*hack - remove empty p from confluence*/
#box-cta-events .container > p:first-child, #box-cta-events .container > p:last-child { display: none; border:1px solid green;}