Page History

/*--------------------------------------------------*/
/*---OOH PROJECTATONS OVERVIEW PAGE - 23-04-2024---*/
/*------------------------------------------------*/ 

#main-content p:empty { display: none;}
.mb-0 { margin-bottom:0;}

/*---INTRODUCTION---*/
#introduction {}

#introduction h1 { margin-bottom:40px;}
#introduction h1 .heading-subtitle {display: block; font-size: 14px; line-height: 24px; letter-spacing: 5px; font-family: Source Sans Pro SB !important; text-transform: uppercase;}
#introduction p { margin-bottom:0;}
#introduction .introduction-illu { line-height:0 !important;}
#introduction .introduction-illu img { width: 180px;}

@media screen and (min-width: 769px) {
  #introduction .introduction-illu img { width: 100%; max-width: 320px; height: auto;}
}

/*---INTRODUCTION P4---*/
#introduction-p4 {}

#introduction-p4 .col-5 p:first-child { display:none;}
#introduction-p4 .col-5 p.p-cta { margin-bottom:0;}

#introduction-p4 img { width: 180px;}

@media screen and (min-width: 769px) {
  #introduction-p4 .cols { display: flex; flex-flow: row-reverse; justify-content: center;}
  #introduction-p4 .introduction-illu { text-align:center;}
  #introduction-p4 img { width: 100%; max-width: 220px; height: auto;}
}

/*---PARTICIPATE---*/
#participate { background-color: #F3F4F7;}

#participate .container > p:first-child { display: none;}

/*reboot*/ 
#participate .container .cols { margin:0;}
#participate .container .cols .col-8,
#participate .container .cols .col-7,
#participate .container .cols .col-6,
#participate .container .cols .col-5 { padding:0;}

#participate h2 { margin-bottom:40px;}

#participate ul { display: flex; flex-direction: column; margin-bottom:0; padding:0; list-style:none;}
#participate ul li { position:relative; margin-top:12px; padding:0 1rem 0 1.75rem; }
#participate ul li:before { content:''; display: block; position: absolute; top:2px; left:0; height: 20px; width: 20px; background: url("https://ec.europa.eu/digital-building-blocks/sites/download/attachments/645595199/ico-check-primary.svg") no-repeat;}

#participate .cols-cta { margin-top:40px !important; padding-top:40px; border-top:1px solid #E3E6EB;}
#participate .cols-cta .p-cta { margin-bottom:0;}

.past-insights-illu { margin-bottom:0 !important; line-height:0;}
.past-insights-illu img { width: 100px;}

@media screen and (max-width: 768px) {
  .past-insights-illu { margin-top: 40px !important;}
}

@media screen and (min-width: 769px) {
  #participate .cols-cta .col-5 { display: flex; align-items: center; justify-content: center;}
  #participate .cols .col-6:nth-child(1) ul { padding-right:20px;}
  #participate .cols .col-6:nth-child(2) ul {padding-left:20px;}
}

/*---EXPECT---*/
#expect { padding-top:0; padding-bottom:0; background-color: #F3F4F7;}

#expect .container > p:first-child { display: none;}

/*reboot*/ 
#expect .container .cols { margin:0;}
#expect .container .cols .col-7 { padding:0;}
#expect .container .cols .col-6 { padding:0;}

#expect h2 { margin-bottom:40px;}
#expect h3 { margin-bottom: 0;}
#expect .p-ico { margin-bottom:12px;}
#expect .p-ico img { margin-left:-24px;}

#expect ul { display: flex; flex-direction: column; margin-bottom:0; padding:0; list-style:none;}
#expect ul li { position:relative; margin-top:12px; padding:0 1rem 0 1.75rem; }
#expect ul li:before { content:''; display: block; position: absolute; top:2px; left:0; height: 20px; width: 20px; background: url("https://ec.europa.eu/digital-building-blocks/sites/download/attachments/645595199/ico-check-primary.svg") no-repeat;}

@media screen and (max-width: 768px) {
  #expect .container .cols .col-6:nth-child(2) { padding-top: 24px;}
}

@media screen and (min-width: 769px) {
  #expect .container .cols .col-6:nth-child(1) { padding-right: 40px;}
  #expect .container .cols .col-6:nth-child(2) { padding-left: 40px; border-left:1px solid #E3E6EB;}
	#benefits { padding-bottom:15rem; background: #F3F4F7;}
	#benefits ul li { padding:0 3rem 0 1.75rem;}
}

/*---WORKING WITH---*/
#working-with { padding-bottom: 18rem; background-color: #F3F4F7;}

#working-with .container > p:first-child { display: none; border:1px solid red;}

/*reboot*/ 
#working-with .container .cols { margin:0;}
#working-with .container .cols .col-7 { padding:0;}
#working-with .container .cols .col-4 { padding:0;}

#working-with h2 { margin-bottom:40px;}
#working-with .p-ico { margin-bottom: 12px;}
#working-with .p-illu { margin-bottom: 0;}
#working-with .p-illu img { width: 100%; max-width: 220px; height: auto;}
#working-with .container .cols .col-4:nth-child(1) p:last-child, #working-with .container .cols .col-4:nth-child(2) p:last-child { width:80%;}

/*---BOX PLAYBOOK---*/
#box-cta-playbook { margin-top:-12rem; padding-top:0; position:relative;}

/*reboot*/ 
#box-cta-playbook .container .cols { margin:0;}
#box-cta-playbook .container .cols .col-8 { padding:0;}

.box-playbook { padding:1.5rem; background-color: #00284A; border-radius:20px;}

.box-playbook h4 span { display: block; font-size: 12px; letter-spacing: 5px; font-family: Source Sans Pro SB; text-transform: uppercase; color: rgba(251, 193, 29, 1);}
.box-playbook h4, #box-cta-playbook p { color: white;}
.box-playbook p.p-opacity { opacity: 0.75}
.box-playbook p:last-of-type { margin-bottom:0;}
.box-playbook ul { margin-bottom:0; padding:1rem 0 0 1rem; color: #EC8FFF;}
.box-playbook a.secondary-download { color: #EC8FFF;}
.box-playbook .box-playbook-illu img { width: 120px; height:auto;}

@media screen and (max-width: 768px) {
  .box-playbook .box-playbook-illu { margin-bottom:1rem;}
}

@media screen and (max-width: 900px) {
  #box-cta-playbook .container .cols .col-8 { width: 100%;}
}

@media screen and (min-width: 769px) {
  .box-playbook { padding:2.5rem;}
  .box-playbook-cols { display: flex; align-items: center; gap: 80px;}
}

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

/*---UPCOMING PROJECTATONS---*/
#upcoming-projectatons { padding-top: 0;}

/*reboot*/ 
#upcoming-projectatons .container .cols { margin:0;}
#upcoming-projectatons .container .cols .col-8 { padding:0;}

#upcoming-projectatons h2 { margin-bottom:40px;}
#upcoming-projectatons .badge { display:flex; align-items:center; gap:4px; border-radius:4px;}

.card-upcoming-cols { display: flex; flex-direction: column; margin-top:40px; width: 100%; gap:24px;}
.card-upcoming { position: relative; display: flex; flex-direction: column; min-width: 0; height: 100% !important; padding:1rem 2rem 2rem 2rem; background-color: white; box-shadow: 0px 2px 12px rgba(0, 24, 50, 0.12); border-radius: 12px; overflow: hidden;}

.card-upcoming-body a { display: block; line-height:0; text-align: right; height: 300px; border-top-right-radius: 12px; border-top-left-radius: 12px; overflow: hidden;}
.card-upcoming-col.p4 .card-upcoming-body a { margin:-1rem 0 0 -3rem; width: 120%; background: url("https://ec.europa.eu/digital-building-blocks/sites/download/attachments/645595199/illu-card-projectathon-04.jpg"); background-size: cover; border-radius: 100% 0% 38% 62% / 0% 88% 12% 100% ;}
.card-upcoming-col.p5 .card-upcoming-body a { margin:-1rem 0 0 -3rem; width: 120%; background: url("https://ec.europa.eu/digital-building-blocks/sites/download/attachments/645595199/illu-card-projectathon-05.jpg"); background-size: cover; background-position: top center; border-radius: 100% 0% 38% 62% / 0% 88% 12% 100% ;}

.card-upcoming-body h3 { margin-top:24px; font-size:20px; line-height:24px;}
.card-upcoming-body p:last-child { margin-bottom:0;}
.card-upcoming-date { font-size: 14px !important; color: #5E748E !important;}

.card-upcoming-footer { margin-top:24px;}
.card-upcoming-footer p:last-child { margin-bottom:0; text-align:right;}


@media screen and (min-width: 992px) {
  .card-upcoming-cols { flex-direction:row; margin-left:auto; margin-right: auto; width: 80%; gap:24px;}
  .card-upcoming-col:nth-child(1) { width: 50%;}
  .card-upcoming-col:nth-child(2) { width: 50%;}
  .card-upcoming-body { flex: 1 1 auto;}
  .card-upcoming-body a { height: 220px;}
}

/*---PARTICIPANTS INSIGHTS---*/
#participants-insights { 
  background-image: url("https://ec.europa.eu/digital-building-blocks/sites/download/attachments/645595199/bg-illu-participants-insights.svg");
  background-position: top right;
  background-repeat: no-repeat;
  background-size: cover;
}

#participants-insights h2 { margin-bottom:40px;}

/*reboot*/ 
#participants-insights .container .cols { margin:0;}
#participants-insights .container .cols .col-12 { padding:0;}

/*---VIDEO---*/ 
.video-container-iframe { margin: 40px 0 0 0; position: relative; z-index: 1; width: 100%; overflow: hidden; padding-top: 56.25%; /* 16:9 Aspect Ratio */}
.video-container-iframe iframe { position: absolute; top: 0; left: 0; bottom: 0; right: 0; width: 100%; height: 100%; border: none; border-radius: 16px;}

/*---CARDS QUOTE---*/
.card-quote-cols { margin:80px auto 0 auto;}
.card-quote { position: relative; display: flex; flex-direction: column; min-width: 0; height: 100% !important; padding:2rem 2rem 2rem 2rem; background-color: white; box-shadow: 0px 2px 12px rgba(0, 24, 50, 0.12); border-radius: 12px; overflow: hidden;}

.card-quote-body .quote-sentence { position:relative; margin-bottom:0; padding-top:2rem;}
.card-quote-body .quote-sentence:before { content:''; position:absolute; top: 0; left: 0; width:24px; height:24px; background-image:url(https://ec.europa.eu/digital-building-blocks/sites/download/attachments/581239505/ico-quote-primary.svg)}

.card-quote-footer { margin-top:24px;} 
.card-quote-footer .quote-author { margin-bottom: 0; font-size: 14px; color:#5E748E;}

@media screen and (max-width: 768px) {
  .card-quote-col { margin-top:40px;}
}

@media screen and (min-width: 769px) {
  .card-quote-cols { display: flex; width: 100%; gap:20px;}
  .card-quote-col { width: 33%;}
  .card-quote-body { flex: 1 1 auto;}
}

@media screen and (min-width: 992px) {
  .card-quote-cols {width: 80%;}
}