Page History

/*------------------------------------------------*/
/*---OOH PROJECTATONS DETAIL PAGE - 09-03-2023---*/
/*----------------------------------------------*/ 

#main-content p:empty { display: none;}

.mb-0 { margin-bottom:0;}  

/*---INTRODUCTION---*/
#introduction { padding-bottom:0;}
.introduction-box { display: flex; border-radius: 16px; overflow: hidden; }
.introduction-box-cover { width: 50%; background: url("https://ec.europa.eu/digital-building-blocks/sites/download/attachments/647954663/illu-introduction-projectathon-01.jpg"); background-size: cover;} 
.introduction-box-content { position:relative; padding: 3.5rem 7rem 2.5rem 0; width: 50%; background-color: #F3F4F7;}
.introduction-box-content * { position: relative;}
.introduction-box-content:before { position:absolute; top: -10%; left:-110px; display: inline-block; content:""; background-color: #F3F4F7; width: 200px; height: 120%; border-radius: 50% 50% 52% 48% / 50% 50% 50% 50% ;}   
.heading-subtitle { display: block; font-size: 14px; line-height: 24px;}   

/*---INFORMATION---*/
#information { padding-top:0;}
#information h2 { margin:7.5rem 0 2.5rem 0;}

.information-list { margin: 0; padding: 0;}
.information-list li { margin:2rem 0 0 0; padding-bottom:1rem; list-style-type: none; border-bottom: 1px solid #E3E6EB;}
.information-list li:first-child { margin-top:0;}
.information-list li:last-child { padding-bottom:0; border-bottom: none;}
.information-cols { display: flex;}
.information-col:nth-child(1) { width: 30%;}
.information-col:nth-child(1) p { font-size: 18px; color: #001832;}
.information-col:nth-child(2) { width: 70%}
.information-list li:last-child .information-col:nth-child(2) p { margin-bottom:0;}

.timeline-list { margin: 0; padding: 0;}
.timeline-list li { margin:2rem 0 0 0; padding-bottom:1rem; list-style-type: none; border-bottom: 1px solid #E3E6EB;}
.timeline-list li:first-child { margin-top:0;}
.timeline-list li:last-child { padding-bottom:0; border-bottom: none;}
.timeline-cols { display: flex; align-items: center;}
.timeline-col:nth-child(1) { width: 30%;}
.timeline-col:nth-child(1) p { font-size: 18px; color: #001832;}
.timeline-col:nth-child(2) { width: 70%}
.timeline-col:nth-child(2) p:first-child { font-size: 18px; font-weight: bold; color: #001832;}
.timeline-list li:last-child .timeline-col:nth-child(2) p:last-child { margin-bottom:0;}

.agenda-list { margin: 0; padding: 0;}
.agenda-list > li { margin:2rem 0 0 0; padding-bottom:1rem; list-style-type: none; border-bottom: 1px solid #E3E6EB;}
.agenda-list > li:first-child { margin-top:0;}
.agenda-list > li:last-child { padding-bottom:0; border-bottom: none;}
.agenda-cols { display: flex;}
.agenda-col:nth-child(1) { width: 30%;}
.agenda-col:nth-child(1) p { font-size: 18px; color: #001832;}
.agenda-col:nth-child(2) { width: 70%}
.agenda-list > li:last-child .information-col:nth-child(2) p { margin-bottom:0;}
.agenda-list .label { display: inline; padding: 8px 12px; font-size: 12px; line-height: 12px; color: #842DB5; background: #F2E5F7; border-radius: 40px;}
.agenda-list li:last-child .agenda-col:nth-child(2) p:last-child { margin-bottom:0;}

/*---HOW TO REGISTER---*/
#how-to-register {#perform { margin-top:-2rem; padding-top:0;} 
#how-to-register-box
#perform ul { padding:1remmargin:2.5rem 0 0 0; backgroundpadding: #F3F4F70; borderlist-radiusstyle: 60pxnone;}
#how-to-register-box .cols p:first-child { display: none;}
#how-to-register-box ul { margin:2.5rem 0 0 0; padding: 0; list-style: none;}
#how-to-register-box ul li > #perform ul li > div { display:flex; align-items: baseline; gap:10px;}
#how-to-register-box#perform ul 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;}
#how-to-register-box#perform ul li:last-child > div > p { margin-bottom:0;}
#how-to-register-box#perform h3 { margin-bottom:2.5rem;}
.perform-illu { margin-bottom:0; line-height:0 !important;} 
.perform-illu img { width: 180px;}

@media screen and (min-width: 1366px769px) {
	#how-to-register-box  .perform-illu img { paddingwidth:5rem 100%;}
}     max-width: 270px; height: auto;}
}

/*---BOXHOW CTATO PROJECTATHONREGISTER---*/
#box#how-ctato-projectathonregister { padding-top:0;} position:relative;}
#box#how-cta-projectathon .projectathonto-register-box { padding:1.5rem1rem; background-color: #00284A#F3F4F7; border-radius:20px 60px;}
#box#how-to-ctaregister-projectathonbox .container .colscols p:first-child { margin-bottom:-1remdisplay: none;}
#box#how-cta-projectathon .projectathon-box-col-illuto-register-box ul { margin-bottom:1rem:2.5rem 0 0 0; padding: 0; list-style: none;}
#box#how-cta-projectathon .projectathon-box-col-illu img { width: 120px; height:auto;}
#box-cta-projectathon h3, #box-cta-projectathon p { color: white;}
#box-cta-projectathon p.p-opacity { opacity: 0.75}
#box-cta-projectathon p:last-of-type { margin-bottom:0;}
/*hack - remove empty p from confluence*/
#box-cta-projectathon .container > p:first-child, #box-cta-events .container > p:last-child { display: none; border:1px solid greento-register-box ul li > div { display:flex; align-items: baseline; gap:10px;}
#how-to-register-box ul 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;}
#how-to-register-box ul li:last-child > div > p { margin-bottom:0;}
#how-to-register-box h3 { margin-bottom:2.5rem;}

@media screen and (min-width: 769px1366px) {
 #box	#how-cta-projectathon .projectathonto-register-box { padding:2.5rem;}
}    

/*---BOX CTA PROJECTATHON---*/
#box-cta-projectathon .projectathon-box-cols { display: flexpadding-top:0; align-items: centerposition:relative;}
 #box-cta-projectathon .projectathon-box-col-illu  { margin-bottom:0padding:1.5rem; paddingbackground-color:0 3rem 0 0}
}

@media screen and (min-width: 1366px) {
 #00284A; border-radius:20px;}
#box-cta-projectathon .container .cols { margin-bottom:-1rem;}
#box-cta-projectathon .projectathon-box-col-illu { paddingmargin-bottom:5rem1rem;}
}

#perform#box-cta-projectathon .projectathon-box-col-illu img { margin-top:-2remwidth: 120px; padding-topheight:0auto;}
#perform .container { }
#perform .cols#box-cta-projectathon h3, #box-cta-projectathon p { bordercolor:1px solid redwhite;} 
#perform ul#box-cta-projectathon p.p-opacity { marginopacity:2.5rem 0 0 0; padding: 0; list-style: none;}
#perform ul li > div { display:flex; align-items: baseline; gap:10px;}
#perform ul 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;}
#perform ul li:last-child > div > p { margin-bottom:0;}
#perform h3 { margin-bottom:2.5rem;}
.perform.75}
#box-cta-projectathon p:last-of-type { margin-bottom:0;}
/*hack - remove empty p from confluence*/
#box-cta-projectathon .container > p:first-child, #box-cta-events .container > p:last-child { display: none; border:1px solid green;}

@media screen and (min-width: 769px) {
 #box-cta-projectathon .projectathon-box { padding:2.5rem;}
 #box-cta-projectathon .projectathon-box-cols { display: flex; align-items: center;}
 #box-cta-projectathon .projectathon-box-col-illu { margin-bottom:0; line-height:padding:0 3rem 0 !important;0} 
.perform-illu img { width: 180px;}

@media screen and (min-width: 769px1366px) {
 #box-cta-projectathon .performprojectathon-illubox img { widthpadding: 100%; max-width: 270px; height: auto;5rem;}
}