/* CSS STYLES MANAGING THE PROMOTIONAL BANNER ON THE EUROPEAN PARLEMENT's PORTAL */ /* Composant "PROMOTIONAL ZONE" | template "DEMOCRACY IN ACTION campaign" */ /* Copyright : European Parliament */ /* ============================================================================================================================================================================== */ /* == BANNER "DEMOCRACY IN ACTION" ============================================================================================================================================== */ /* ============================================================================================================================================================================== */ /* ========================================================================================================================================================================== */ /* == GENERIC STYLES FOR ALL VERSIONS ======================================================================================================================================= */ /* - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */ /* GENERAL : Main containers */ /* GENERAL : Reset all tags */ #website #democracyinaction.eppz_promotional a, #website #democracyinaction.eppz_promotional h2, #website #democracyinaction.eppz_promotional div, #website #democracyinaction.eppz_promotional ul, #website #democracyinaction.eppz_promotional li, #website #democracyinaction.eppz_promotional span, #website #democracyinaction.eppz_promotional time, #website #democracyinaction.eppz_promotional strong, #website #democracyinaction.eppz_promotional em{ position: static; display: inline-block; margin: 0; padding: 0; border: none; outline: none; font-size: 1em; font-weight: normal; text-decoration: none; letter-spacing: normal; line-height: normal; white-space: normal; cursor: default; color: inherit; } #website #democracyinaction.eppz_promotional a, #website #democracyinaction.eppz_promotional a *{ cursor: pointer !important; } /* GENERAL : Hidden elements */ #website #democracyinaction.eppz_promotional .eppz_hidden:not(:last-child){ position: absolute !important; display: block !important; overflow: hidden !important; width: 0 !important; height: 0 !important; opacity: 0 !important; } /* GENERAL : Main containers */ #website #democracyinaction.eppz_promotional{ position: relative; display: block; overflow: hidden; z-index: 2; margin: 0; padding: 0; background-color: #fff; border: none; outline: none; font-family: Helvetica, Arial, sans-serif; font-size: 0.8em; font-weight: normal; text-decoration: none; text-align: center; white-space: nowrap; color: #000; } #website #democracyinaction.eppz_promotional .eppz_banner{ position: relative; display: flex; display: -webkit-flex; overflow: hidden; max-width: 1200px; margin: 0 auto; padding: 0; flex-direction: row; -webkit-flex-direction: row; align-items: stretch; -webkit-align-items: stretch; justify-content: flex-start; -webkit-justify-content: flex-start; background-color: #fff; text-align: left; } #website #democracyinaction.eppz_promotional .eppz_banner .eppz_link, #website #democracyinaction.eppz_promotional .eppz_banner .eppz_themes{ position: static; display: inline-flex; display: -webkit-inline-flex; overflow: hidden; width: 100%; margin: 0; padding: 0; } #website #democracyinaction.eppz_promotional .eppz_banner .eppz_link + .eppz_themes, #website #democracyinaction.eppz_promotional .eppz_banner .eppz_themes + .eppz_link{ margin-left: -100%; } /* - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */ /* GENERAL : Link */ #website #democracyinaction.eppz_promotional .eppz_banner .eppz_link:before{ position: absolute; display: block; overflow: hidden; z-index: 10; top: 0; bottom: 0; left: 0; right: 0; background-color: rgba(255,255,255,0); box-shadow: 0 0 7px rgba(0,0,0,0.3) inset; content: ''; } #website #democracyinaction.eppz_promotional .eppz_banner .eppz_link strong span{ position: absolute; display: block; overflow: hidden; width: 0; height: 0; opacity: 0; } /* - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */ /* GENERAL : List of themes */ /* THEMES :: Variables */ #website #democracyinaction.eppz_promotional .eppz_banner{ --democracyinaction_size: 35em; --democracyinaction_logo: 7em; --democracyinaction_height: calc(var(--democracyinaction_size) + var(--democracyinaction_logo) + 40px); } /* THEMES :: Visual */ #website #democracyinaction.eppz_promotional .eppz_themes, #website #democracyinaction.eppz_promotional .eppz_themes ul{ min-height: var(--democracyinaction_height); flex-direction: row; -webkit-flex-direction: row; align-items: stretch; -webkit-align-items: stretch; justify-content: flex-start; -webkit-justify-content: flex-start; flex-wrap: nowrap; -webkit-flex-wrap: nowrap; } #website #democracyinaction.eppz_promotional .eppz_themes ul{ position: static; display: flex; display: -webkit-flex; width: 100%; overflow: hidden; } #website #democracyinaction.eppz_promotional .eppz_themes li{ position: static; display: inline-flex; display: -webkit-inline-flex; overflow: hidden; width: 100%; margin: 0; padding: 0; flex: 0 0 auto; -webkit-flex: 0 0 auto; align-items: stretch; -webkit-align-items: stretch; justify-content: flex-start; -webkit-justify-content: flex-start; } #website #democracyinaction.eppz_promotional .eppz_themes li + li{ margin-left: -100%; } #website #democracyinaction.eppz_promotional .eppz_themes li:nth-child(even){ flex-direction: row; -webkit-flex-direction: row; } #website #democracyinaction.eppz_promotional .eppz_themes li:nth-child(odd){ flex-direction: row-reverse;-webkit-flex-direction: row-reverse;} #website #democracyinaction.eppz_promotional .eppz_themes li .eppz_image, #website #democracyinaction.eppz_promotional .eppz_themes li .eppz_text{ position: relative; display: inline-block; width: 50%; margin: 0; padding: 0; box-sizing: border-box; } #website #democracyinaction.eppz_promotional .eppz_themes li .eppz_image{ z-index: 1; overflow: visible; } #website #democracyinaction.eppz_promotional .eppz_themes li .eppz_text{ z-index: 4; overflow: hidden; padding: 20px; } /* THEMES :: Logo size */ #website #democracyinaction.eppz_promotional .eppz_themes li .eppz_text{ padding-bottom: calc(20px + var(--democracyinaction_logo) + 20px); } /* THEMES :: Text background and logo */ #website #democracyinaction.eppz_promotional .eppz_themes .eppz_background{ position: absolute; display: block; overflow: hidden; z-index: 2; top: 0; bottom: 0; width: 50%; margin: 0; padding: 0; background-color: #fff; content: ''; } #website #democracyinaction.eppz_promotional .eppz_themes .eppz_background:before{ position: absolute; display: block; overflow: hidden; z-index: 8; bottom: 20px; left: 20px; width: 100%; height: var(--democracyinaction_logo); background-image: url(../svg/democracyinaction_en.svg); background-position: left bottom; background-size: contain; background-repeat: no-repeat; content: ''; } #website #democracyinaction.eppz_promotional[lang="bg"] .eppz_themes .eppz_background:before{ background-image: url(../svg/democracyinaction_bg.svg); } #website #democracyinaction.eppz_promotional[lang="cs"] .eppz_themes .eppz_background:before{ background-image: url(../svg/democracyinaction_cs.svg); } #website #democracyinaction.eppz_promotional[lang="da"] .eppz_themes .eppz_background:before{ background-image: url(../svg/democracyinaction_da.svg); } #website #democracyinaction.eppz_promotional[lang="de"] .eppz_themes .eppz_background:before{ background-image: url(../svg/democracyinaction_de.svg); } #website #democracyinaction.eppz_promotional[lang="el"] .eppz_themes .eppz_background:before{ background-image: url(../svg/democracyinaction_el.svg); } #website #democracyinaction.eppz_promotional[lang="en"] .eppz_themes .eppz_background:before{ background-image: url(../svg/democracyinaction_en.svg); } #website #democracyinaction.eppz_promotional[lang="es"] .eppz_themes .eppz_background:before{ background-image: url(../svg/democracyinaction_es.svg); } #website #democracyinaction.eppz_promotional[lang="et"] .eppz_themes .eppz_background:before{ background-image: url(../svg/democracyinaction_et.svg); } #website #democracyinaction.eppz_promotional[lang="fi"] .eppz_themes .eppz_background:before{ background-image: url(../svg/democracyinaction_fi.svg); } #website #democracyinaction.eppz_promotional[lang="fr"] .eppz_themes .eppz_background:before{ background-image: url(../svg/democracyinaction_fr.svg); } #website #democracyinaction.eppz_promotional[lang="ga"] .eppz_themes .eppz_background:before{ background-image: url(../svg/democracyinaction_ga.svg); } #website #democracyinaction.eppz_promotional[lang="hr"] .eppz_themes .eppz_background:before{ background-image: url(../svg/democracyinaction_hr.svg); } #website #democracyinaction.eppz_promotional[lang="hu"] .eppz_themes .eppz_background:before{ background-image: url(../svg/democracyinaction_hu.svg); } #website #democracyinaction.eppz_promotional[lang="it"] .eppz_themes .eppz_background:before{ background-image: url(../svg/democracyinaction_it.svg); } #website #democracyinaction.eppz_promotional[lang="lt"] .eppz_themes .eppz_background:before{ background-image: url(../svg/democracyinaction_lt.svg); } #website #democracyinaction.eppz_promotional[lang="lv"] .eppz_themes .eppz_background:before{ background-image: url(../svg/democracyinaction_lv.svg); } #website #democracyinaction.eppz_promotional[lang="mt"] .eppz_themes .eppz_background:before{ background-image: url(../svg/democracyinaction_mt.svg); } #website #democracyinaction.eppz_promotional[lang="nl"] .eppz_themes .eppz_background:before{ background-image: url(../svg/democracyinaction_nl.svg); } #website #democracyinaction.eppz_promotional[lang="pl"] .eppz_themes .eppz_background:before{ background-image: url(../svg/democracyinaction_pl.svg); } #website #democracyinaction.eppz_promotional[lang="pt"] .eppz_themes .eppz_background:before{ background-image: url(../svg/democracyinaction_pt.svg); } #website #democracyinaction.eppz_promotional[lang="ro"] .eppz_themes .eppz_background:before{ background-image: url(../svg/democracyinaction_ro.svg); } #website #democracyinaction.eppz_promotional[lang="sk"] .eppz_themes .eppz_background:before{ background-image: url(../svg/democracyinaction_sk.svg); } #website #democracyinaction.eppz_promotional[lang="sl"] .eppz_themes .eppz_background:before{ background-image: url(../svg/democracyinaction_sl.svg); } #website #democracyinaction.eppz_promotional[lang="sv"] .eppz_themes .eppz_background:before{ background-image: url(../svg/democracyinaction_sv.svg); } /* THEMES :: Images */ #website #democracyinaction.eppz_promotional .eppz_themes .eppz_pictures{ position: absolute; display: flex; display: -webkit-flex; display: none; overflow: hidden; z-index: 2; top: 0; bottom: 0; width: 100%; margin: 0; padding: 0; background-color: #fff; flex-direction: row; -webkit-flex-direction: row; align-items: stretch; -webkit-align-items: stretch; justify-content: flex-start; -webkit-justify-content: flex-start; flex-wrap: nowrap; -webkit-flex-wrap: nowrap; letter-spacing: -0.32em; white-space: nowrap; content: ''; } #website #democracyinaction.eppz_promotional .eppz_themes .eppz_pictures span{ position: static; display: block; overflow: hidden; z-index: 2; width: 50%; margin: 0; padding: 0; flex: 0 0 auto; -webkit-flex: 0 0 auto; background-color: #fff; content: ''; } #website #democracyinaction.eppz_promotional .eppz_themes .eppz_pictures span:nth-child(1){ order: 1; -webkit-order: 2; } #website #democracyinaction.eppz_promotional .eppz_themes .eppz_pictures span:nth-child(2){ order: 1; -webkit-order: 1; } #website #democracyinaction.eppz_promotional .eppz_themes .eppz_pictures span:nth-child(3){ order: 1; -webkit-order: 4; } #website #democracyinaction.eppz_promotional .eppz_themes .eppz_pictures span:nth-child(4){ order: 1; -webkit-order: 3; } #website #democracyinaction.eppz_promotional .eppz_themes .eppz_pictures span:nth-child(5){ order: 1; -webkit-order: 6; } #website #democracyinaction.eppz_promotional .eppz_themes .eppz_pictures span:nth-child(6){ order: 1; -webkit-order: 5; } #website #democracyinaction.eppz_promotional .eppz_themes .eppz_pictures span:nth-child(7){ order: 1; -webkit-order: 8; } #website #democracyinaction.eppz_promotional .eppz_themes .eppz_pictures span:nth-child(8){ order: 1; -webkit-order: 7; } #website #democracyinaction.eppz_promotional .eppz_themes li .eppz_image > span{ position: static; overflow: visible; width: 0; height: 0; } #website #democracyinaction.eppz_promotional .eppz_themes li .eppz_image:before, #website #democracyinaction.eppz_promotional .eppz_themes li .eppz_image:after{ position: absolute; display: block; z-index: 2; top: 0; bottom: 0; width: 100%; background-position: center; background-size: cover; background-repeat: no-repeat; content: ''; } #website #democracyinaction.eppz_promotional .eppz_themes li .eppz_image:before{ left: 0; } #website #democracyinaction.eppz_promotional .eppz_pictures span[data-theme="climate"], #website #democracyinaction.eppz_promotional .eppz_themes li[data-theme="climate"] .eppz_image:before{ background-image: url(../jpg/democracyinaction-climate.jpg); } #website #democracyinaction.eppz_promotional .eppz_themes li[data-theme="climate"] .eppz_image:after{ background-image: url(../png/democracyinaction-climate.png); } #website #democracyinaction.eppz_promotional .eppz_pictures span[data-theme="digital"], #website #democracyinaction.eppz_promotional .eppz_themes li[data-theme="digital"] .eppz_image:before{ background-image: url(../jpg/democracyinaction-digital.jpg); } #website #democracyinaction.eppz_promotional .eppz_themes li[data-theme="digital"] .eppz_image:after{ background-image: url(../png/democracyinaction-digital.png); } #website #democracyinaction.eppz_promotional .eppz_pictures span[data-theme="energy"], #website #democracyinaction.eppz_promotional .eppz_themes li[data-theme="energy"] .eppz_image:before{ background-image: url(../jpg/democracyinaction-energy.jpg); } #website #democracyinaction.eppz_promotional .eppz_themes li[data-theme="energy"] .eppz_image:after{ background-image: url(../png/democracyinaction-energy.png); } #website #democracyinaction.eppz_promotional .eppz_pictures span[data-theme="equality"], #website #democracyinaction.eppz_promotional .eppz_themes li[data-theme="equality"] .eppz_image:before{ background-image: url(../jpg/democracyinaction-equality.jpg); } #website #democracyinaction.eppz_promotional .eppz_themes li[data-theme="equality"] .eppz_image:after{ background-image: url(../png/democracyinaction-equality.png); } #website #democracyinaction.eppz_promotional .eppz_pictures span[data-theme="health"], #website #democracyinaction.eppz_promotional .eppz_themes li[data-theme="health"] .eppz_image:before{ background-image: url(../jpg/democracyinaction-health.jpg); } #website #democracyinaction.eppz_promotional .eppz_themes li[data-theme="health"] .eppz_image:after{ background-image: url(../png/democracyinaction-health.png); } #website #democracyinaction.eppz_promotional .eppz_pictures span[data-theme="workers"], #website #democracyinaction.eppz_promotional .eppz_themes li[data-theme="workers"] .eppz_image:before{ background-image: url(../jpg/democracyinaction-workers.jpg); } #website #democracyinaction.eppz_promotional .eppz_themes li[data-theme="workers"] .eppz_image:after{ background-image: url(../png/democracyinaction-workers.png); } #website #democracyinaction.eppz_promotional .eppz_pictures span[data-theme="security"], #website #democracyinaction.eppz_promotional .eppz_themes li[data-theme="security"] .eppz_image:before{ background-image: url(../jpg/democracyinaction-security.jpg); } #website #democracyinaction.eppz_promotional .eppz_themes li[data-theme="security"] .eppz_image:after{ background-image: url(../png/democracyinaction-security.png); } #website #democracyinaction.eppz_promotional .eppz_pictures span[data-theme="ukraine"], #website #democracyinaction.eppz_promotional .eppz_themes li[data-theme="ukraine"] .eppz_image:before{ background-image: url(../jpg/democracyinaction-ukraine.jpg); } #website #democracyinaction.eppz_promotional .eppz_themes li[data-theme="ukraine"] .eppz_image:after{ background-image: url(../png/democracyinaction-ukraine.png); } /* THEMES :: Texts */ #website #democracyinaction.eppz_promotional:not([lang="el"]):not([lang="ga"]) .eppz_themes li .eppz_text{ text-transform: uppercase; } #website #democracyinaction.eppz_promotional .eppz_themes li .eppz_text .eppz_title, #website #democracyinaction.eppz_promotional .eppz_themes li .eppz_text .eppz_description{ position: static; display: block; } #website #democracyinaction.eppz_promotional .eppz_themes li .eppz_text .eppz_title{ padding-bottom: 5px; font-size: 4.5em; font-weight: bold; line-height: 1.1em; } #website #democracyinaction.eppz_promotional .eppz_themes li .eppz_text .eppz_description{ font-size: 2.4em; line-height: 1.4em; } /* - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */ /* GENERAL : Focus effect */ /* FOCUS :: Text effect */ #website #democracyinaction.eppz_promotional .eppz_link:hover + .eppz_themes .eppz_text .eppz_title, #website #democracyinaction.eppz_promotional .eppz_link:focus + .eppz_themes .eppz_text .eppz_title, #website #democracyinaction.eppz_promotional .eppz_link:active + .eppz_themes .eppz_text .eppz_title{ text-decoration: underline; } /* FOCUS :: Color effect */ #website #democracyinaction.eppz_promotional .eppz_link + .eppz_themes .eppz_background{ transition: background-color 0.4s ease-out 0s; -webkit-transition: background-color 0.4s ease-out 0s; } #website #democracyinaction.eppz_promotional .eppz_link:hover + .eppz_themes .eppz_background, #website #democracyinaction.eppz_promotional .eppz_link:focus + .eppz_themes .eppz_background, #website #democracyinaction.eppz_promotional .eppz_link:active + .eppz_themes .eppz_background{ background-color: #efefef; } /* FOCUS :: Image effect */ #website #democracyinaction.eppz_promotional .eppz_link + .eppz_themes .eppz_image:before, #website #democracyinaction.eppz_promotional .eppz_link + .eppz_themes .eppz_image:after{ filter: none; transition: filter 0.4s ease-out 0s; -webkit-transition: filter 0.4s ease-out 0s; } #website #democracyinaction.eppz_promotional .eppz_link:hover + .eppz_themes li[data-theme="climate"] .eppz_image:before, #website #democracyinaction.eppz_promotional .eppz_link:focus + .eppz_themes li[data-theme="climate"] .eppz_image:before, #website #democracyinaction.eppz_promotional .eppz_link:active + .eppz_themes li[data-theme="climate"] .eppz_image:before{ filter: saturate(130%) brightness(1.6); } #website #democracyinaction.eppz_promotional .eppz_link:hover + .eppz_themes li[data-theme="climate"] .eppz_image:after, #website #democracyinaction.eppz_promotional .eppz_link:focus + .eppz_themes li[data-theme="climate"] .eppz_image:after, #website #democracyinaction.eppz_promotional .eppz_link:active + .eppz_themes li[data-theme="climate"] .eppz_image:after{ filter: brightness(1.5) blur(1px); } #website #democracyinaction.eppz_promotional .eppz_link:hover + .eppz_themes li[data-theme="digital"] .eppz_image:before, #website #democracyinaction.eppz_promotional .eppz_link:focus + .eppz_themes li[data-theme="digital"] .eppz_image:before, #website #democracyinaction.eppz_promotional .eppz_link:active + .eppz_themes li[data-theme="digital"] .eppz_image:before, #website #democracyinaction.eppz_promotional .eppz_link:hover + .eppz_themes li[data-theme="energy"] .eppz_image:before, #website #democracyinaction.eppz_promotional .eppz_link:focus + .eppz_themes li[data-theme="energy"] .eppz_image:before, #website #democracyinaction.eppz_promotional .eppz_link:active + .eppz_themes li[data-theme="energy"] .eppz_image:before, #website #democracyinaction.eppz_promotional .eppz_link:hover + .eppz_themes li[data-theme="equality"] .eppz_image:before, #website #democracyinaction.eppz_promotional .eppz_link:focus + .eppz_themes li[data-theme="equality"] .eppz_image:before, #website #democracyinaction.eppz_promotional .eppz_link:active + .eppz_themes li[data-theme="equality"] .eppz_image:before, #website #democracyinaction.eppz_promotional .eppz_link:hover + .eppz_themes li[data-theme="health"] .eppz_image:before, #website #democracyinaction.eppz_promotional .eppz_link:focus + .eppz_themes li[data-theme="health"] .eppz_image:before, #website #democracyinaction.eppz_promotional .eppz_link:active + .eppz_themes li[data-theme="health"] .eppz_image:before, #website #democracyinaction.eppz_promotional .eppz_link:hover + .eppz_themes li[data-theme="workers"] .eppz_image:before, #website #democracyinaction.eppz_promotional .eppz_link:focus + .eppz_themes li[data-theme="workers"] .eppz_image:before, #website #democracyinaction.eppz_promotional .eppz_link:active + .eppz_themes li[data-theme="workers"] .eppz_image:before, #website #democracyinaction.eppz_promotional .eppz_link:hover + .eppz_themes li[data-theme="ukraine"] .eppz_image:before, #website #democracyinaction.eppz_promotional .eppz_link:focus + .eppz_themes li[data-theme="ukraine"] .eppz_image:before, #website #democracyinaction.eppz_promotional .eppz_link:active + .eppz_themes li[data-theme="ukraine"] .eppz_image:before{ filter: blur(2px); } #website #democracyinaction.eppz_promotional .eppz_link:hover + .eppz_themes li[data-theme="security"] .eppz_image:before, #website #democracyinaction.eppz_promotional .eppz_link:focus + .eppz_themes li[data-theme="security"] .eppz_image:before, #website #democracyinaction.eppz_promotional .eppz_link:active + .eppz_themes li[data-theme="security"] .eppz_image:before{ filter: blur(1px); } #website #democracyinaction.eppz_promotional .eppz_link:hover + .eppz_themes li[data-theme="digital"] .eppz_image:after, #website #democracyinaction.eppz_promotional .eppz_link:focus + .eppz_themes li[data-theme="digital"] .eppz_image:after, #website #democracyinaction.eppz_promotional .eppz_link:active + .eppz_themes li[data-theme="digital"] .eppz_image:after, #website #democracyinaction.eppz_promotional .eppz_link:hover + .eppz_themes li[data-theme="health"] .eppz_image:after, #website #democracyinaction.eppz_promotional .eppz_link:focus + .eppz_themes li[data-theme="health"] .eppz_image:after, #website #democracyinaction.eppz_promotional .eppz_link:active + .eppz_themes li[data-theme="health"] .eppz_image:after, #website #democracyinaction.eppz_promotional .eppz_link:hover + .eppz_themes li[data-theme="security"] .eppz_image:after, #website #democracyinaction.eppz_promotional .eppz_link:focus + .eppz_themes li[data-theme="security"] .eppz_image:after, #website #democracyinaction.eppz_promotional .eppz_link:active + .eppz_themes li[data-theme="security"] .eppz_image:after{ filter: brightness(1.2); } #website #democracyinaction.eppz_promotional .eppz_link:hover + .eppz_themes li[data-theme="energy"] .eppz_image:after, #website #democracyinaction.eppz_promotional .eppz_link:focus + .eppz_themes li[data-theme="energy"] .eppz_image:after, #website #democracyinaction.eppz_promotional .eppz_link:active + .eppz_themes li[data-theme="energy"] .eppz_image:after, #website #democracyinaction.eppz_promotional .eppz_link:hover + .eppz_themes li[data-theme="equality"] .eppz_image:after, #website #democracyinaction.eppz_promotional .eppz_link:focus + .eppz_themes li[data-theme="equality"] .eppz_image:after, #website #democracyinaction.eppz_promotional .eppz_link:active + .eppz_themes li[data-theme="equality"] .eppz_image:after, #website #democracyinaction.eppz_promotional .eppz_link:hover + .eppz_themes li[data-theme="workers"] .eppz_image:after, #website #democracyinaction.eppz_promotional .eppz_link:focus + .eppz_themes li[data-theme="workers"] .eppz_image:after, #website #democracyinaction.eppz_promotional .eppz_link:active + .eppz_themes li[data-theme="workers"] .eppz_image:after, #website #democracyinaction.eppz_promotional .eppz_link:hover + .eppz_themes li[data-theme="ukraine"] .eppz_image:after, #website #democracyinaction.eppz_promotional .eppz_link:focus + .eppz_themes li[data-theme="ukraine"] .eppz_image:after, #website #democracyinaction.eppz_promotional .eppz_link:active + .eppz_themes li[data-theme="ukraine"] .eppz_image:after{ filter: brightness(1.1); } /* - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */ /* GENERAL : Animation */ /* ANIMATIONS :: Definition of movements */ @keyframes democracyinaction_logo{ 0%{ opacity: 0; transform: translate( 0, 0); -webkit-transform: translate( 0, 0); } 5%, 35%{ opacity: 1; transform: translate( 0, 0); -webkit-transform: translate( 0, 0); } 40%{ opacity: 0; transform: translate( 0, 0); -webkit-transform: translate( 0, 0); } 50%{ opacity: 0; transform: translate(100%, 0); -webkit-transform: translate(100%, 0); } 55%, 85%{ opacity: 1; transform: translate(100%, 0); -webkit-transform: translate(100%, 0); } 90%, 100%{ opacity: 0; transform: translate(100%, 0); -webkit-transform: translate(100%, 0); } } @keyframes democracyinaction_text{ 0%{ opacity: 0; } 1.25%, 8.625%{ opacity: 1; } 9.825%,100%{ opacity: 0; } } @keyframes democracyinaction_image{ 0%{ opacity: 1; } 2.5%, 16%{ opacity: 1; } 16.1%, 100%{ opacity: 0; } } /* ANIMATIONS :: Definition of movements (horizontal) */ @keyframes democracyinaction_dirx_background{ 0%, 40%{ transform: translate( 0, 0); -webkit-transform: translate( 0, 0); } 50%, 90%{ transform: translate(100%, 0); -webkit-transform: translate(100%, 0); } 100%{ transform: translate( 0, 0); -webkit-transform: translate( 0, 0); } } /* ANIMATIONS :: Definition of movements (vertical) */ @keyframes democracyinaction_diry_background{ 0%, 40%{ transform: translate(0, 0); -webkit-transform: translate(0, 0); } 50%, 90%{ transform: translate(0, 100%); -webkit-transform: translate(0, 100%);} 100%{ transform: translate(0, 0); -webkit-transform: translate(0, 0); } } /* ANIMATIONS :: Lock the animation during the flightover effect */ #website #democracyinaction.eppz_promotional .eppz_link:hover + .eppz_themes .eppz_background, #website #democracyinaction.eppz_promotional .eppz_link:focus + .eppz_themes .eppz_background, #website #democracyinaction.eppz_promotional .eppz_link:active + .eppz_themes .eppz_background, #website #democracyinaction.eppz_promotional .eppz_link:hover + .eppz_themes li .eppz_text, #website #democracyinaction.eppz_promotional .eppz_link:focus + .eppz_themes li .eppz_text, #website #democracyinaction.eppz_promotional .eppz_link:active + .eppz_themes li .eppz_text, #website #democracyinaction.eppz_promotional .eppz_link:hover + .eppz_themes .eppz_image, #website #democracyinaction.eppz_promotional .eppz_link:focus + .eppz_themes .eppz_image, #website #democracyinaction.eppz_promotional .eppz_link:active + .eppz_themes .eppz_image{ animation-play-state: paused; -webkit-animation-play-state: paused; } /* ANIMATIONS :: Definition of the rules */ #website #democracyinaction.eppz_promotional .eppz_themes .eppz_background, #website #democracyinaction.eppz_promotional .eppz_themes li .eppz_text, #website #democracyinaction.eppz_promotional .eppz_themes li .eppz_image{ animation-timing-function: linear; -webkit-animation-timing-function: linear; animation-fill-mode: forwards; -webkit-animation-fill-mode: forwards; animation-delay: 0s; -webkit-animation-delay: 0s; animation-iteration-count: infinite; -webkit-animation-iteration-count: infinite; } #website #democracyinaction.eppz_promotional .eppz_banner{ --democracyinaction_time: 6s; /* = display time for 1 panel */ } #website #democracyinaction.eppz_promotional .eppz_themes .eppz_background{ animation-duration: calc(var(--democracyinaction_time) * 2); -webkit-animation-duration: calc(var(--democracyinaction_time) * 2); /* -> Animation switching between 2 panels and go back (left -> right -> left) */ } #website #democracyinaction.eppz_promotional .eppz_themes .eppz_background{ transform: translate(0, 0); -webkit-transform: translate(0, 0); animation-name: democracyinaction_dirx_background; -webkit-animation-name: democracyinaction_dirx_background; } #website #democracyinaction.eppz_promotional .eppz_themes li .eppz_text{ opacity: 0; animation-name: democracyinaction_text; -webkit-animation-name: democracyinaction_text; animation-duration: calc(var(--democracyinaction_time) * 8); -webkit-animation-duration: calc(var(--democracyinaction_time) * 8); } #website #democracyinaction.eppz_promotional .eppz_themes li .eppz_image{ opacity: 0; animation-name: democracyinaction_image; -webkit-animation-name: democracyinaction_image; animation-duration: calc(var(--democracyinaction_time) * 8); -webkit-animation-duration: calc(var(--democracyinaction_time) * 8); } #website #democracyinaction.eppz_promotional .eppz_themes li:first-child .eppz_image{ opacity: 1; } #website #democracyinaction.eppz_promotional .eppz_themes li:nth-child(1) .eppz_text{ animation-delay: calc(var(--democracyinaction_time) * 0); -webkit-animation-delay: calc(var(--democracyinaction_time) * 0);} #website #democracyinaction.eppz_promotional .eppz_themes li:nth-child(1) .eppz_image{ animation-delay: calc(var(--democracyinaction_time) * 0 - var(--democracyinaction_time) / 4); -webkit-animation-delay: calc(var(--democracyinaction_time) * 0 - var(--democracyinaction_time) / 4);} #website #democracyinaction.eppz_promotional .eppz_themes li:nth-child(2) .eppz_text{ animation-delay: calc(var(--democracyinaction_time) * 1); -webkit-animation-delay: calc(var(--democracyinaction_time) * 1);} #website #democracyinaction.eppz_promotional .eppz_themes li:nth-child(2) .eppz_image{ animation-delay: calc(var(--democracyinaction_time) * 1 - var(--democracyinaction_time) / 4); -webkit-animation-delay: calc(var(--democracyinaction_time) * 1 - var(--democracyinaction_time) / 4);} #website #democracyinaction.eppz_promotional .eppz_themes li:nth-child(3) .eppz_text{ animation-delay: calc(var(--democracyinaction_time) * 2); -webkit-animation-delay: calc(var(--democracyinaction_time) * 2);} #website #democracyinaction.eppz_promotional .eppz_themes li:nth-child(3) .eppz_image{ animation-delay: calc(var(--democracyinaction_time) * 2 - var(--democracyinaction_time) / 4); -webkit-animation-delay: calc(var(--democracyinaction_time) * 2 - var(--democracyinaction_time) / 4);} #website #democracyinaction.eppz_promotional .eppz_themes li:nth-child(4) .eppz_text{ animation-delay: calc(var(--democracyinaction_time) * 3); -webkit-animation-delay: calc(var(--democracyinaction_time) * 3);} #website #democracyinaction.eppz_promotional .eppz_themes li:nth-child(4) .eppz_image{ animation-delay: calc(var(--democracyinaction_time) * 3 - var(--democracyinaction_time) / 4); -webkit-animation-delay: calc(var(--democracyinaction_time) * 3 - var(--democracyinaction_time) / 4);} #website #democracyinaction.eppz_promotional .eppz_themes li:nth-child(5) .eppz_text{ animation-delay: calc(var(--democracyinaction_time) * 4); -webkit-animation-delay: calc(var(--democracyinaction_time) * 4);} #website #democracyinaction.eppz_promotional .eppz_themes li:nth-child(5) .eppz_image{ animation-delay: calc(var(--democracyinaction_time) * 4 - var(--democracyinaction_time) / 4); -webkit-animation-delay: calc(var(--democracyinaction_time) * 4 - var(--democracyinaction_time) / 4);} #website #democracyinaction.eppz_promotional .eppz_themes li:nth-child(6) .eppz_text{ animation-delay: calc(var(--democracyinaction_time) * 5); -webkit-animation-delay: calc(var(--democracyinaction_time) * 5);} #website #democracyinaction.eppz_promotional .eppz_themes li:nth-child(6) .eppz_image{ animation-delay: calc(var(--democracyinaction_time) * 5 - var(--democracyinaction_time) / 4); -webkit-animation-delay: calc(var(--democracyinaction_time) * 5 - var(--democracyinaction_time) / 4);} #website #democracyinaction.eppz_promotional .eppz_themes li:nth-child(7) .eppz_text{ animation-delay: calc(var(--democracyinaction_time) * 6); -webkit-animation-delay: calc(var(--democracyinaction_time) * 6);} #website #democracyinaction.eppz_promotional .eppz_themes li:nth-child(7) .eppz_image{ animation-delay: calc(var(--democracyinaction_time) * 6 - var(--democracyinaction_time) / 4); -webkit-animation-delay: calc(var(--democracyinaction_time) * 6 - var(--democracyinaction_time) / 4);} #website #democracyinaction.eppz_promotional .eppz_themes li:nth-child(8) .eppz_text{ animation-delay: calc(var(--democracyinaction_time) * 7); -webkit-animation-delay: calc(var(--democracyinaction_time) * 7);} #website #democracyinaction.eppz_promotional .eppz_themes li:nth-child(8) .eppz_image{ animation-delay: calc(var(--democracyinaction_time) * 7 - var(--democracyinaction_time) / 4); -webkit-animation-delay: calc(var(--democracyinaction_time) * 7 - var(--democracyinaction_time) / 4);} /* - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */ /* GENERAL : Linguistic correction */ #website #democracyinaction.eppz_promotional[lang="da"] .eppz_banner .eppz_themes li .eppz_text .eppz_title, #website #democracyinaction.eppz_promotional[lang="de"] .eppz_banner .eppz_themes li .eppz_text .eppz_title, #website #democracyinaction.eppz_promotional[lang="et"] .eppz_banner .eppz_themes li .eppz_text .eppz_title, #website #democracyinaction.eppz_promotional[lang="fi"] .eppz_banner .eppz_themes li .eppz_text .eppz_title, #website #democracyinaction.eppz_promotional[lang="hu"] .eppz_banner .eppz_themes li .eppz_text .eppz_title{ font-size: 4em; } #website #democracyinaction.eppz_promotional[lang="da"] .eppz_banner .eppz_themes li .eppz_text .eppz_description, #website #democracyinaction.eppz_promotional[lang="de"] .eppz_banner .eppz_themes li .eppz_text .eppz_description, #website #democracyinaction.eppz_promotional[lang="et"] .eppz_banner .eppz_themes li .eppz_text .eppz_description, #website #democracyinaction.eppz_promotional[lang="fi"] .eppz_banner .eppz_themes li .eppz_text .eppz_description, #website #democracyinaction.eppz_promotional[lang="hu"] .eppz_banner .eppz_themes li .eppz_text .eppz_description{ font-size: 2em; } /* ========================================================================================================================================================================== */ /* == DEBUG VERSION ========================================================================================================================================================= */ #website #democracyinaction.eppz_promotional + .eppz_promotional{ margin-top: 20px; } #website #democracyinaction.eppz_promotional + .eppz_promotional .eppz_link, #website #democracyinaction.eppz_promotional + .eppz_promotional .eppz_background{ display: none !important; } #website #democracyinaction.eppz_promotional + .eppz_promotional .eppz_link + .eppz_themes{ margin-left: 0; flex-direction: column; -webkit-flex-direction: column; } #website #democracyinaction.eppz_promotional + .eppz_promotional .eppz_link + .eppz_themes, #website #democracyinaction.eppz_promotional + .eppz_promotional .eppz_link + .eppz_themes ul{ height: auto; } #website #democracyinaction.eppz_promotional + .eppz_promotional .eppz_link + .eppz_themes ul{ flex-direction: column; -webkit-flex-direction: column; } #website #democracyinaction.eppz_promotional + .eppz_promotional .eppz_link + .eppz_themes ul li{ min-height: var(--democracyinaction_height); margin-left: 0; border-top: 2px solid #f0f; } #website #democracyinaction.eppz_promotional + .eppz_promotional .eppz_banner .eppz_themes .eppz_background, #website #democracyinaction.eppz_promotional + .eppz_promotional .eppz_banner .eppz_themes li .eppz_text, #website #democracyinaction.eppz_promotional + .eppz_promotional .eppz_banner .eppz_themes li .eppz_image{ opacity: 1 !important; animation-name: none !important; -webkit-animation-name: none !important; } /* ========================================================================================================================================================================== */ /* == STYLES BY BREAKPOINTS ================================================================================================================================================= */ @media screen and (max-width: 1200px){ /* - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */ /* Resize fonts */ #website #democracyinaction.eppz_promotional .eppz_themes li .eppz_text .eppz_title{ font-size: 4em; } #website #democracyinaction.eppz_promotional .eppz_themes li .eppz_text .eppz_description{ font-size: 2em; } #website #democracyinaction.eppz_promotional .eppz_banner{ --democracyinaction_logo: 6em; } /* - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */ /* Linguistic correction */ #website #democracyinaction.eppz_promotional[lang="da"] .eppz_banner .eppz_themes li .eppz_text .eppz_title, #website #democracyinaction.eppz_promotional[lang="de"] .eppz_banner .eppz_themes li .eppz_text .eppz_title, #website #democracyinaction.eppz_promotional[lang="et"] .eppz_banner .eppz_themes li .eppz_text .eppz_title, #website #democracyinaction.eppz_promotional[lang="fi"] .eppz_banner .eppz_themes li .eppz_text .eppz_title, #website #democracyinaction.eppz_promotional[lang="hu"] .eppz_banner .eppz_themes li .eppz_text .eppz_title{ font-size: 3.2em; } #website #democracyinaction.eppz_promotional[lang="da"] .eppz_banner .eppz_themes li .eppz_text .eppz_description, #website #democracyinaction.eppz_promotional[lang="de"] .eppz_banner .eppz_themes li .eppz_text .eppz_description, #website #democracyinaction.eppz_promotional[lang="et"] .eppz_banner .eppz_themes li .eppz_text .eppz_description, #website #democracyinaction.eppz_promotional[lang="fi"] .eppz_banner .eppz_themes li .eppz_text .eppz_description, #website #democracyinaction.eppz_promotional[lang="hu"] .eppz_banner .eppz_themes li .eppz_text .eppz_description{ font-size: 1.8em; } } @media screen and (max-width: 1020px){ /* - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */ /* Resize fonts */ #website #democracyinaction.eppz_promotional .eppz_themes li .eppz_text .eppz_title{ font-size: 3.4em; } #website #democracyinaction.eppz_promotional .eppz_themes li .eppz_text .eppz_description{ font-size: 1.6em; } #website #democracyinaction.eppz_promotional .eppz_banner{ --democracyinaction_logo: 5em; } /* - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */ /* Linguistic correction */ #website #democracyinaction.eppz_promotional[lang="da"] .eppz_banner .eppz_themes li .eppz_text .eppz_title, #website #democracyinaction.eppz_promotional[lang="de"] .eppz_banner .eppz_themes li .eppz_text .eppz_title, #website #democracyinaction.eppz_promotional[lang="et"] .eppz_banner .eppz_themes li .eppz_text .eppz_title, #website #democracyinaction.eppz_promotional[lang="fi"] .eppz_banner .eppz_themes li .eppz_text .eppz_title, #website #democracyinaction.eppz_promotional[lang="hu"] .eppz_banner .eppz_themes li .eppz_text .eppz_title{ font-size: 2.5em; } #website #democracyinaction.eppz_promotional[lang="da"] .eppz_banner .eppz_themes li .eppz_text .eppz_description, #website #democracyinaction.eppz_promotional[lang="de"] .eppz_banner .eppz_themes li .eppz_text .eppz_description, #website #democracyinaction.eppz_promotional[lang="et"] .eppz_banner .eppz_themes li .eppz_text .eppz_description, #website #democracyinaction.eppz_promotional[lang="fi"] .eppz_banner .eppz_themes li .eppz_text .eppz_description, #website #democracyinaction.eppz_promotional[lang="hu"] .eppz_banner .eppz_themes li .eppz_text .eppz_description{ font-size: 1.4em; } } @media screen and (max-width: 750px){ /* - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */ /* Resize fonts */ #website #democracyinaction.eppz_promotional[lang] .eppz_banner .eppz_themes li .eppz_text .eppz_title{ font-size: 3em; } #website #democracyinaction.eppz_promotional[lang] .eppz_banner .eppz_themes li .eppz_text .eppz_description{ font-size: 1.4em; } #website #democracyinaction.eppz_promotional .eppz_banner{ --democracyinaction_logo: 4.5em; } /* - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */ /* Reverse banner (position of element) */ #website #democracyinaction.eppz_promotional .eppz_banner{ --democracyinaction_size: 17em; } #website #democracyinaction.eppz_promotional .eppz_themes, #website #democracyinaction.eppz_promotional .eppz_themes ul{ height: calc(var(--democracyinaction_height) * 2); min-height: 10px; } #website #democracyinaction.eppz_promotional .eppz_themes .eppz_background{ bottom: var(--democracyinaction_height); left: 0; right: 0; width: auto; } #website #democracyinaction.eppz_promotional .eppz_themes li .eppz_image, #website #democracyinaction.eppz_promotional .eppz_themes li .eppz_text{ width: 100%; height: var(--democracyinaction_height); box-sizing: border-box; } #website #democracyinaction.eppz_promotional .eppz_themes .eppz_pictures span{ width: 100%; height: 50%; } #website #democracyinaction.eppz_promotional .eppz_themes li:nth-child(odd){ flex-direction: column-reverse; -webkit-flex-direction: column-reverse; } #website #democracyinaction.eppz_promotional .eppz_themes li:nth-child(even){ flex-direction: column; -webkit-flex-direction: column; } /* Reverse banner (define point of interest) */ #website #democracyinaction.eppz_promotional .eppz_pictures span[data-theme="climate"], #website #democracyinaction.eppz_promotional .eppz_themes li[data-theme="climate"] .eppz_image:before{ background-position: center top -80px; } #website #democracyinaction.eppz_promotional .eppz_themes li[data-theme="climate"] .eppz_image:after{ background-position: center top -80px; } #website #democracyinaction.eppz_promotional .eppz_pictures span[data-theme="digital"], #website #democracyinaction.eppz_promotional .eppz_themes li[data-theme="digital"] .eppz_image:before{ background-position: center bottom -10px; } #website #democracyinaction.eppz_promotional .eppz_themes li[data-theme="digital"] .eppz_image:after{ background-position: center bottom -10px; } #website #democracyinaction.eppz_promotional .eppz_pictures span[data-theme="energy"], #website #democracyinaction.eppz_promotional .eppz_themes li[data-theme="energy"] .eppz_image:before{ background-position: left top -20px; } #website #democracyinaction.eppz_promotional .eppz_themes li[data-theme="energy"] .eppz_image:after{ background-position: left top -20px; } #website #democracyinaction.eppz_promotional .eppz_pictures span[data-theme="equality"], #website #democracyinaction.eppz_promotional .eppz_themes li[data-theme="equality"] .eppz_image:before{ background-position: center top; } #website #democracyinaction.eppz_promotional .eppz_themes li[data-theme="equality"] .eppz_image:after{ background-position: center top; } #website #democracyinaction.eppz_promotional .eppz_pictures span[data-theme="health"], #website #democracyinaction.eppz_promotional .eppz_themes li[data-theme="health"] .eppz_image:before{ background-position: center top -20px; } #website #democracyinaction.eppz_promotional .eppz_themes li[data-theme="health"] .eppz_image:after{ background-position: center top -20px; } #website #democracyinaction.eppz_promotional .eppz_pictures span[data-theme="workers"], #website #democracyinaction.eppz_promotional .eppz_themes li[data-theme="workers"] .eppz_image:before{ background-position: center; } #website #democracyinaction.eppz_promotional .eppz_themes li[data-theme="workers"] .eppz_image:after{ background-position: center; } #website #democracyinaction.eppz_promotional .eppz_pictures span[data-theme="security"], #website #democracyinaction.eppz_promotional .eppz_themes li[data-theme="security"] .eppz_image:before{ background-position: center bottom -20px; } #website #democracyinaction.eppz_promotional .eppz_themes li[data-theme="security"] .eppz_image:after{ background-position: center bottom -20px; } #website #democracyinaction.eppz_promotional .eppz_pictures span[data-theme="ukraine"], #website #democracyinaction.eppz_promotional .eppz_themes li[data-theme="ukraine"] .eppz_image:before{ background-position: center top +15%; } #website #democracyinaction.eppz_promotional .eppz_themes li[data-theme="ukraine"] .eppz_image:after{ background-position: center top +15%; } /* Reverse banner (adapt animation) */ #website #democracyinaction.eppz_promotional .eppz_banner .eppz_themes .eppz_background, #website #democracyinaction.eppz_promotional .eppz_banner .eppz_themes li .eppz_text, #website #democracyinaction.eppz_promotional .eppz_banner .eppz_themes li .eppz_image{ animation-name: none; -webkit-animation-name: none; } #website #democracyinaction.eppz_promotional .eppz_banner .eppz_themes .eppz_background{ animation-name: democracyinaction_diry_background; -webkit-animation-name: democracyinaction_diry_background; } #website #democracyinaction.eppz_promotional .eppz_banner .eppz_themes li .eppz_text{ animation-name: democracyinaction_text; -webkit-animation-name: democracyinaction_text; } #website #democracyinaction.eppz_promotional .eppz_banner .eppz_themes li .eppz_image{ animation-name: democracyinaction_image; -webkit-animation-name: democracyinaction_image; } } @media screen and (max-width: 640px){ /* - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */ /* Resize fonts */ #website #democracyinaction.eppz_promotional[lang] .eppz_banner .eppz_themes li .eppz_text .eppz_title{ font-size: 2.4em; } #website #democracyinaction.eppz_promotional[lang] .eppz_banner .eppz_themes li .eppz_text .eppz_description{ font-size: 1.4em; } #website #democracyinaction.eppz_promotional[lang] .eppz_banner{ --democracyinaction_logo: 4em; } /* - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */ /* Adapt size of the banner */ #website #democracyinaction.eppz_promotional .eppz_banner{ --democracyinaction_size: 12em; } } @media screen and (max-width: 480px){ /* - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */ /* Resize fonts */ #website #democracyinaction.eppz_promotional[lang] .eppz_banner .eppz_themes li .eppz_text .eppz_title{ font-size: 2.2em; } #website #democracyinaction.eppz_promotional[lang] .eppz_banner .eppz_themes li .eppz_text .eppz_description{ font-size: 1.2em; } #website #democracyinaction.eppz_promotional[lang] .eppz_banner{ --democracyinaction_logo: 3.4em; } /* - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */ /* Adapt point of interest */ #website #democracyinaction.eppz_promotional .eppz_pictures span[data-theme="climate"], #website #democracyinaction.eppz_promotional .eppz_themes li[data-theme="climate"] .eppz_image:before{ background-position: center; } #website #democracyinaction.eppz_promotional .eppz_themes li[data-theme="climate"] .eppz_image:after{ background-position: center; } #website #democracyinaction.eppz_promotional .eppz_pictures span[data-theme="digital"], #website #democracyinaction.eppz_promotional .eppz_themes li[data-theme="digital"] .eppz_image:before{ background-position: center bottom; } #website #democracyinaction.eppz_promotional .eppz_themes li[data-theme="digital"] .eppz_image:after{ background-position: center bottom; } #website #democracyinaction.eppz_promotional .eppz_pictures span[data-theme="energy"], #website #democracyinaction.eppz_promotional .eppz_themes li[data-theme="energy"] .eppz_image:before{ background-position: left top; } #website #democracyinaction.eppz_promotional .eppz_themes li[data-theme="energy"] .eppz_image:after{ background-position: left top; } #website #democracyinaction.eppz_promotional .eppz_pictures span[data-theme="equality"], #website #democracyinaction.eppz_promotional .eppz_themes li[data-theme="equality"] .eppz_image:before{ background-position: center top; } #website #democracyinaction.eppz_promotional .eppz_themes li[data-theme="equality"] .eppz_image:after{ background-position: center top; } #website #democracyinaction.eppz_promotional .eppz_pictures span[data-theme="health"], #website #democracyinaction.eppz_promotional .eppz_themes li[data-theme="health"] .eppz_image:before{ background-position: center top; } #website #democracyinaction.eppz_promotional .eppz_themes li[data-theme="health"] .eppz_image:after{ background-position: center top; } #website #democracyinaction.eppz_promotional .eppz_pictures span[data-theme="workers"], #website #democracyinaction.eppz_promotional .eppz_themes li[data-theme="workers"] .eppz_image:before{ background-position: center; } #website #democracyinaction.eppz_promotional .eppz_themes li[data-theme="workers"] .eppz_image:after{ background-position: center; } #website #democracyinaction.eppz_promotional .eppz_pictures span[data-theme="security"], #website #democracyinaction.eppz_promotional .eppz_themes li[data-theme="security"] .eppz_image:before{ background-position: center bottom; } #website #democracyinaction.eppz_promotional .eppz_themes li[data-theme="security"] .eppz_image:after{ background-position: center bottom; } #website #democracyinaction.eppz_promotional .eppz_pictures span[data-theme="ukraine"], #website #democracyinaction.eppz_promotional .eppz_themes li[data-theme="ukraine"] .eppz_image:before{ background-position: center top; } #website #democracyinaction.eppz_promotional .eppz_themes li[data-theme="ukraine"] .eppz_image:after{ background-position: center top; } }