/* rgba */ /* Short Guide*/ /*--- fonts --- */ @font-face { font-family:'robotoregular'; src: url('../fonts/Roboto-Regular.ttf'); font-weight: normal; font-style: normal; } @font-face { font-family:'robotobold'; src: url('../fonts/Roboto-Bold.ttf'); font-weight: bold; font-style: normal; } @font-face { font-family: 'robotoitalic'; src: url('../fonts/Roboto-Italic.ttf'); font-weight: normal; font-style: italic; } @font-face { font-family: 'robotolight'; src: url('../fonts/Roboto-Light.ttf'); font-weight: normal; font-style: normal; } /*--- end of fonts --- */ /* --- general styles --- */ html { color: #000000; scroll-behavior: smooth; font-size: 10px; } body { font-family: 'robotoregular', sans-serif; overflow-x: hidden; } body.no-scroll { overflow: hidden; position: relative; } body.fullscreen { overflow: hidden; position: relative; } .hidden { display: none; } .separator-top { margin-top: 2rem; padding-top: 2rem; border-top: 2px solid #EAD5C2; } .separator-bottom { padding-bottom: 2rem; margin-bottom: 2rem; border-bottom: 2px solid #EAD5C2; } /* --- end general styles --- */ /* --- text styles --- */ h1, .h1 { font-weight: bold; font-size: 5rem; padding: 0px; color: #000000; } h2, .h2 { font-weight: bold; font-size: 3.8rem; padding: 1rem 0px 3rem 0px; color: #000000; } h3, .h3 { font-size: 2.4rem; color: #000000; font-weight: bold; padding: 1rem 0px 2rem 0px; } h4, .h4 { color: #000000; font-size: 2rem; font-weight: bold; padding: 1rem 0px 2rem 0px; } p, label, li { font-size: 1.8rem; line-height: 2.6rem; margin-bottom: 2.8rem; color: #000000; } a { font-size: 1.8rem; line-height: 2.6rem; color: #164194; } a:hover { color: #333333; } .ecl-link__label { vertical-align: middle; } a[target=_blank]::after { display: inline-block; content: ""; height: 1.5rem; width: 1.5rem; background-image: url(../images/external-link-icon-blue.png); background-repeat: no-repeat; background-size: cover; margin-left: 0.5rem; } a[target=_blank]:hover { color: #333333; } a[target=_blank]:hover::after { background-image: url(../images/external-link-icon-grey.png); } .highlighted { border-right: none; border-left: 5px solid #164194; margin-left: 0px; padding: 0rem 2rem; margin-top: 2rem; margin-bottom: 4rem; max-width: 76%; min-height: 4rem; } .highlighted h1, .highlighted .h1, .highlighted h2, .highlighted .h2, .highlighted h3, .highlighted .h3, .highlighted h4, .highlighted .h4 { color: #164194; } .highlighted p, .highlighted li, .highlighted a { font-size: 2.2rem; color: #164194; text-align: left; } .highlighted a { text-decoration: revert; } .highlighted.highlighted-right { border-left: none; margin-left: 0; max-width: initial; margin-bottom: 2rem; } .highlighted.highlighted-right p, .highlighted.highlighted-right li, .highlighted.highlighted-right a { font-size: 1.6rem; } .improve-things .highlighted { margin-bottom: 0; } .info-icon { font-weight: bold; } .info-icon::before { display: inline-block; content: ""; height: 1.8rem; width: 1.8rem; background-image: url(../images/info-icon.png); background-size: 1.8rem; margin-right: 0.5rem; } .caption p, p.caption { margin-bottom: 0px; margin-top: 0.5rem; padding-left: 15px; font-size: 1.5rem; line-height: 1.8rem; } p.caption.margin-bottom { margin-bottom: 2.8rem; } p.caption.copyright { padding-left: 0px; margin-top: 0.5rem !important; } .fight-against-cancer p.caption { margin-bottom: 2rem; } .sociallinks a { display: block; } .infografic-title { font-size: 1.9rem; font-weight: bold; text-align: left; margin-top: 3rem; } .slider-title { font-size: 2.2rem; } /* --- end text styles --- */ /* --- img styles --- */ img { object-fit: cover; width: 100%; } .full-width-img { width: 100% !important; } .img-auto { align-items: center; } .img-auto img { width: auto; } @media screen and (min-width: 768px) { #margin-bottom-img { margin-bottom: 2.3rem; } } .inverted { filter: invert(1); } .pologo { height: 10rem; width: auto; margin: 0.5rem 0px 1rem 0px; padding: 0px; } .copylogo { height: 5rem; width: auto; margin: 0.5rem 0px 1rem 0px; padding: 0px; } .mobile-flag { width: 200px; border: 1px solid #25408F; } /* ------ img animation */ .animated-pic { overflow: hidden; } .animated-pic img:hover { transition: all 1s ease-in-out; display: block; } .animated-pic img:not(hover) { transition: all 1s ease-in-out; display: block; } .transition { transform: scale(1.3); } /* ------ end of img animation */ /* --- end img styles --- */ /* --- table styles --- */ table { width: 100%; font-size: 1.8rem; } /* --- end of table styles --- */ /* --- footer styles --- */ footer { background-color: #cfdbec; padding: 4rem 0px; margin-top: 10rem; } footer .footer-wrapper { display: flex; flex-direction: column; flex-wrap: nowrap; } footer .footer-wrapper .footer-header { display: block; width: 100%; font-weight: bold; font-size: 2rem; padding-bottom: 1rem; border-bottom: 1px solid black; } footer .footer-wrapper p { margin-top: 2rem; } footer .footer-wrapper a { text-decoration: underline; } footer .footer-wrapper a:hover { text-decoration: none; } footer .footer-wrapper table { width: 100%; break-inside: avoid !important; margin-bottom: 2.8rem; color: #000000; overflow: initial; } footer .footer-wrapper table tr { display: flex; flex-direction: row; flex-wrap: wrap; justify-content: space-between; } footer .footer-wrapper table th, footer .footer-wrapper table td { display: block; font-size: 1.5rem; line-height: 2.6rem; background-color: transparent; border: none; color: #000000; padding: 7px 0px; } footer .footer-wrapper table th { font-weight: bold; width: 25%; } footer .footer-wrapper table td { width: 75%; margin-left: auto; } footer .footer-wrapper table td:last-child { margin-bottom: 1rem; } footer .links-of-interest { display: block; padding: 0; list-style: none; } footer .links-of-interest a { font-weight: bold; } footer .links-of-interest a::after { display: none; } footer .links-of-interest ul { list-style: none; padding-left: 0px; } @media (min-width: 768px) { footer .footer-wrapper { display: flex; flex-direction: row; flex-wrap: nowrap; justify-content: space-between; } footer .footer-wrapper div { width: 49%; } footer .column-one { margin-right: 1.5rem; } footer .column-two { margin-left: 1.5rem; } footer .links-of-interest ul { display: flex; flex-direction: row; gap: 1rem; list-style: none; padding: 0; } footer .links-of-interest ul li:first-child:after { content: " | "; margin-left: 0.5rem; } footer .links-of-interest ul li:last-child:before { content: " | "; margin-right: 0.5rem; } footer .links-of-interest ul a { font-weight: bold; } } @media (min-width: 1220px) { footer .footer-wrapper table { margin-bottom: 0px; } footer .footer-wrapper table tr { display: revert; } footer .footer-wrapper table th, footer .footer-wrapper table td { display: revert; width: revert; } footer .footer-wrapper table th:last-child, footer .footer-wrapper table td:last-child { margin-bottom: 0px; } } /* --- end footer styles --- */ /* --- button styles --- */ .skip-link { position: absolute; translate: -100000px; } .skip-link:focus, .skip-link:active, .skip-link:focus-within, .skip-link:focus-visible { background-color: #FFCC00; color: #000000; display: flex; justify-content: center; align-items: center; position: fixed; top: 0rem; right: 0rem; z-index: 1000; height: 42px; width: 100%; translate: 0px; } .btn:focus, .btn:active, .btn:hover, .btn:visited, .btn:focus-within, .btn:focus-visible, .btn:target { box-shadow: none !important; } .button-wrapper { display: flex; flex-direction: row; flex-wrap: wrap; align-content: flex-start; justify-content: flex-start; align-items: center; } .border-button { border: 2px solid #25408F; background-color: #25408F; color: #ffffff; padding: 1rem 2rem; margin: 1rem; border-radius: 6px; width: 45%; display: flex; flex-direction: row; flex-wrap: nowrap; justify-content: space-between; align-items: center; } .border-button::after { content: ""; display: block; position: relative; width: 3rem !important; height: 3.7rem !important; background-size: 3rem; background-repeat: no-repeat; } .border-button:hover, .border-button:focus { background-color: #3456B9; border-color: #3456B9; color: #ffffff !important; text-decoration: none; } .border-button.print-button::after, .border-button.print-button:hover::after, .border-button.print-button:focus::after { background-image: url(../images/print-icon-white.svg); } .border-button.pdf-button::after, .border-button.pdf-button:hover::after, .border-button.pdf-button:focus::after { background-image: url(../images/pdf-icon-white.svg); } .border-button.see-more-button::after, .border-button.see-more-button:hover::after, .border-button.see-more-button:focus::after { background-image: url(../images/arrow-left-icon-white.svg); } .small-button { background-color: #EC008C; display: block; height: 5rem; width: 5rem; border-radius: 100%; background-repeat: no-repeat; margin: 1rem 2rem; } .small-button::after { content: ""; display: block; height: 5rem; width: 5rem; background-size: 2.8rem; background-repeat: no-repeat; background-position-x: 1.2rem; background-position-y: 0.8rem; } .small-button.print-button::after, .small-button.print-button:hover::after, .small-button.print-button:focus::after { background-image: url(../images/small-print-icon.svg); } .small-button.pdf-button::after, .small-button.pdf-button:hover::after, .small-button.pdf-button:focus::after { background-image: url(../images/small-pdf-icon.svg); } .small-button.see-more-button::after, .small-button.see-more-button:hover::after, .small-button.see-more-button:focus::after { background-position-y: 1rem; background-image: url(../images/arrow-left-solid.svg); } .blue-button-wrapper { background-color: #6DCFF6; border-radius: 10px; padding: 2rem; display: flex; flex-direction: row; flex-wrap: wrap; align-content: center; justify-content: center; align-items: center; } .blue-button-wrapper .button-wrapper { flex-wrap: nowrap; } .print-button::after, .pdf-button::after, .print-button[target=_blank]::after, .pdf-button[target=_blank]::after { display: inline-block; content: ""; width: 5rem; height: 5rem; border: 0px; background-repeat: no-repeat; background-size: 4.5rem; background-position: center; margin-left: 0rem; position: relative; top: 6px; } .print-button:after, .print-button[target=_blank]:after, .print-button:hover:after, .print-button[target=_blank]:hover:after { background-image: url(../images/print-icon.svg); background-repeat: no-repeat; top: 1.5rem; margin-right: 2rem; } .pdf-button:after, .pdf-button[target=_blank]:after, .pdf-button:hover:after, .pdf-button[target=_blank]:hover:after { background-image: url(../images/pdf-icon.svg); background-repeat: no-repeat; top: 1.5rem; margin-right: 2rem; } .previous-next-wrapper { display: flex; flex-direction: row; flex-wrap: nowrap; justify-content: space-between; margin-top: 3rem; } .previous-next-wrapper .previousNextButton { background-color: #25408F; color: #ffffff; padding: 1rem 2rem; } .previous-next-wrapper .previousNextButton.right { margin-left: 1rem; } .previous-next-wrapper .previousNextButton.right::after { display: inline-block; content: ""; width: 10px; height: 10px; border-top: 2px solid #ffffff; border-right: 2px solid #ffffff; transform: rotate(45deg); margin-left: 2rem; margin-right: 1rem; } .previous-next-wrapper .previousNextButton.left { margin-right: 1rem; } .previous-next-wrapper .previousNextButton.left::before { display: inline-block; content: ""; width: 10px; height: 10px; border-top: 2px solid #ffffff; border-right: 2px solid #ffffff; transform: rotate(-135deg); margin-left: 1rem; margin-right: 2rem; } @media screen and (max-width: 525px) { .previous-next-wrapper .previousNextButton { display: flex; flex-direction: row; flex-wrap: nowrap; justify-content: space-between; align-items: center; position: relative; } .previous-next-wrapper .previousNextButton.left { padding-left: 5rem; } .previous-next-wrapper .previousNextButton.left::before { position: absolute; top: 45%; left: 9px; } .previous-next-wrapper .previousNextButton.right { padding-right: 5rem; } .previous-next-wrapper .previousNextButton.right::after { position: absolute; top: 45%; right: 9px; } } .index-content .previous-next-wrapper .previousNextButton.right { margin-left: auto; } @media (min-width: 768px) { .blue-button-wrapper { padding: 2rem 5rem; flex-wrap: nowrap; justify-content: space-between; } .blue-button-wrapper p { margin-bottom: 0px; } } #scroll-top.active { background-color: #164194; background-size: 20px; display: block; position: fixed; bottom: 3rem; right: 2rem; z-index: 10; height: 42px; width: 42px; border-radius: 7px; } #scroll-top.active::after { content: ""; display: inline-block; height: 1.5rem; width: 1.5rem; border-left: 5px solid #ffffff; border-bottom: 5px solid #ffffff; border-radius: 20%; transform: rotate(135deg); margin-top: 16px; margin-left: 14px; } /* --- end button styles --- */ /* --- banner styles --- */ .banner { background-repeat: no-repeat; background-position: center; background-size: cover; object-fit: cover; position: relative; height: 43rem; } @media screen and (max-width: 1850px) { .banner { height: 40rem; } } @media screen and (max-width: 1800px) { .banner { height: 38rem; } } @media screen and (max-width: 1600px) { .banner { height: 35rem; } } @media screen and (max-width: 1450px) { .banner { height: 33rem; } } @media screen and (max-width: 1300px) { .banner { height: 30rem; } } @media screen and (max-width: 1180px) { .banner { height: 28rem; } } @media screen and (max-width: 1080px) { .banner { height: 26rem; } } .banner .text-wrapper { position: absolute; z-index: 2; padding: 3rem 0px 1rem 0px; background-color: rgba(255, 255, 255, 0.9); width: 100%; bottom: 0; } .banner .text-wrapper .caption { position: absolute; top: 2px; } .banner .banner-img { z-index: 1; position: relative; overflow: hidden; height: inherit; } .banner .banner-img img { position: absolute; height: inherit; } .banner p.caption { font-size: 1.3rem; } @media screen and (max-width: 1080px) { body:not(.home-page) .banner { height: 37rem; } } .home-page .more-img, .for-me .more-img, .improve .more-img, .work .more-img, .find-more .more-img { display: block; } .home-page .one-img, .for-me .one-img, .improve .one-img, .work .one-img, .find-more .one-img { display: none; } .about-eu .more-img, .tackle .more-img, .get-involved .more-img { display: none; } .about-eu .one-img, .tackle .one-img, .get-involved .one-img { display: block; } .tackle .banner .text-wrapper h2, .improve .banner .text-wrapper h2, .work .banner .text-wrapper h2, .get-involved .banner .text-wrapper h2 { padding-top: 2.5rem; } .bannerR { position: relative; } .bannerR img { z-index: 1; } .bannerR h2 { z-index: 2; } @media (min-width: 768px) { .banner .banner-img img { position: absolute; width: 100%; right: 0; } .tackle .banner .text-wrapper h2, .improve .banner .text-wrapper h2, .work .banner .text-wrapper h2, .get-involved .banner .text-wrapper h2 { padding-top: 1rem; } } /* --- end banner styles --- */ /* --- double column styles --- */ @media (min-width: 768px) { .two-column-wrapper-img { display: grid; grid-template-columns: 50% 50%; column-gap: 3rem; } .two-column-wrapper-img .half-col-img { width: 49%; margin-left: 1.5rem; } .two-column-wrapper-img img { width: 100%; height: auto; margin-bottom: 2.8rem; } .two-column-wrapper-img p { margin-right: 1.5rem; } .two-column-wrapper-img.text-centered p { align-content: center; } .two-column-wrapper-img.right.small { display: grid; grid-template-columns: 20% 80%; column-gap: 3rem; } .two-column-wrapper-img.left.small { display: grid; grid-template-columns: 80% 20%; column-gap: 3rem; } .two-column-wrapper-text { column-count: 2; column-gap: 3rem; } .two-column-wrapper-text p { margin-right: 1.5rem; } } /* --- end of double column styles --- */ /* --- accordion styles --- */ .accordion hr { opacity: 1; height: 0.16rem; background-color: black; } .accordion .accordion-content { position: relative; background: white; overflow: hidden; height: 0px; transition: height 0.5s ease; margin-bottom: 2rem; } .accordion .accordion-content .grow-wrapper { padding: 1.25rem; } .accordion .accordion-content.first { height: auto; } .accordion .accordion-item { margin-bottom: 5rem; } .accordion .accordion-item .accordion-header { border-bottom: 0.5rem solid #25408F; display: flex; flex-direction: row; flex-wrap: nowrap; justify-content: space-between; padding: 1rem 0; } .accordion .accordion-item .accordion-header .mb-0 { width: 100%; padding: 0px; margin: 0px; line-height: 2.6rem; } .accordion .accordion-item .accordion-header .mb-0 button, .accordion .accordion-item .accordion-header .mb-0 button span { line-height: 2.1rem; font-weight: 500; color: #2e1245; text-decoration: none; display: flex; flex-direction: row; flex-wrap: nowrap; justify-content: space-between; align-items: center; width: 100%; padding: 0px 0px 2px 0px; } .accordion .accordion-item .accordion-header .mb-0 button:focus-visible { border: #000000 solid 2px; padding: 2px; } .accordion .accordion-item .accordion-header .mb-0 button:after { content: ""; display: inline-block; height: 1.5rem; width: 1.5rem; border-left: 5px solid #25408F; border-bottom: 5px solid #25408F; border-radius: 20%; transform: rotate(315deg); margin-right: 10px; transition: 0.4s ease; } .accordion .accordion-item .accordion-header .mb-0 .label { text-align: left; margin-bottom: 0; } .accordion .accordion-item .accordion-header:hover { cursor: pointer; } .accordion .accordion-item.active { margin-bottom: 0; } .accordion .accordion-item.active .label { font-weight: bold; } .accordion .accordion-item.active > .accordion-header button:after { transform: rotate(135deg); } .accordion .accordion-item .grow-wrapper > p:not(.no-margin-top), .accordion .accordion-item .grow-wrapper > ul:not(.no-margin-top) { margin-top: 1.5rem; } p + .accordion { margin-top: 3.5rem; } .index-content .eu-glance .accordion-content p { margin-bottom: 0px; } /* --- end accordion styles --- */ /* --- sections --- */ section { margin: 2rem 0px; } /* --- end of sections --- */ /* --- mail pictures display --- */ /* --- end mail pictures display --- */ /*-- icon styles --*/ @media screen and (min-width: 768px) { .union-values .highlighted.icon li, .climate-change .highlighted.icon li, .work .highlighted.icon li { position: relative; list-style: none; padding-left: 8rem; min-height: 8rem; display: flex; align-items: center; flex-wrap: nowrap; } .union-values .highlighted.icon li p, .climate-change .highlighted.icon li p, .work .highlighted.icon li p { margin: 0px; } .union-values .highlighted.icon .balance:before, .climate-change .highlighted.icon .balance:before, .work .highlighted.icon .balance:before { background: url(../images/union-values/CH01-ICON01.png); } .union-values .highlighted.icon .protection:before, .climate-change .highlighted.icon .protection:before, .work .highlighted.icon .protection:before { background: url(../images/union-values/CH01-ICON02.png); } .union-values .highlighted.icon .consumer:before, .climate-change .highlighted.icon .consumer:before, .work .highlighted.icon .consumer:before { background: url(../images/union-values/CH01-ICON03.png); } .union-values .highlighted.icon .world:before, .climate-change .highlighted.icon .world:before, .work .highlighted.icon .world:before { background: url(../images/union-values/CH01-ICON04.png); } .union-values .highlighted.icon .balance:before, .union-values .highlighted.icon .protection:before, .union-values .highlighted.icon .consumer:before, .union-values .highlighted.icon .world:before, .climate-change .highlighted.icon .balance:before, .climate-change .highlighted.icon .protection:before, .climate-change .highlighted.icon .consumer:before, .climate-change .highlighted.icon .world:before, .work .highlighted.icon .balance:before, .work .highlighted.icon .protection:before, .work .highlighted.icon .consumer:before, .work .highlighted.icon .world:before { display: block; content: ""; height: 8rem; width: 8rem; background-repeat: no-repeat; background-position: center; background-size: cover; position: absolute; left: -2rem; } } /*-- end of icon styles --*/ /* -- contact mail styles-- */ .contact { display: flex; flex-wrap: wrap; } .contact span { padding-right: 1rem; } .contact img { display: inline-block; max-height: 1.5rem; width: auto; margin: 0.7rem 0 0 0; padding: 0px; object-fit: contain; } /* -- end of contact mail styles-- */ .natura-img { display: flex; max-width: unset; } .natura-img img { display: inline-block; max-height: 11rem; width: auto; margin: 0.8rem 0 0 0; padding: 0px 1rem; } /* --- style modifications --- */ .no-padding-top { padding-top: 0px; } .no-padding-bottom { padding-bottom: 0px; } .no-padding-left { padding-left: 0px; } .no-padding-right { padding-right: 0px; } .no-margin-top { margin-top: 0px !important; } .no-margin-bottom { margin-bottom: 0px !important; } .no-margin-left { margin-left: 0px !important; } .no-margin-right { margin-right: 0px !important; } .union-values img { padding-top: 2rem; } .protecting-people img { margin-bottom: 0; } .what-is-the-eu img { padding-top: 2rem; } .who-does-what .structure-picture { height: auto; margin: 2rem auto; display: flex; align-items: center; } .who-does-what .parliament-icon { padding: 1rem; border-radius: 14px; } @media screen and (min-width: 768px) { .union-values img { width: 90%; } .two-column-wrapper-img img.no-margin-bottom { margin-bottom: 0px; } } /* --- end of style modifications --- */ /* -- main menu --*/ /* -- mobile --*/ #main-menu { background-color: #ffffff; position: absolute; width: 100%; top: 60px; right: 0; } #main-menu .responsive-button-container { display: flex; flex-direction: row; align-items: center; gap: 1rem; padding: 0rem 1rem 1rem 1rem; height: 5rem; margin-left: 10px; } #main-menu .responsive-button-container .navbar-toggler { display: flex; flex-direction: column; gap: 0.7rem; padding: 0px; margin: 0.5rem 0rem; width: max-content; max-width: max-content; min-width: max-content; max-height: max-content; height: max-content; min-height: max-content; } #main-menu .responsive-button-container .navbar-toggler span { /*display: block; background-color: colors.$purple; height: 7px; width: 43px;*/ } #main-menu .responsive-button-container .menu-label { margin: unset; } #main-menu .main-menu-links, #main-menu .main-menu-list { position: relative; } #main-menu .main-menu-list { z-index: 10; padding: 0; } #main-menu .main-menu-list li { list-style: none; margin: 1rem 0rem; padding-bottom: 1rem; margin: 0; padding: 1rem 0 0.5rem 0; } #main-menu .main-menu-list li:hover, #main-menu .main-menu-list li:active { border-bottom: 1.5rem solid #25408F; } #main-menu .main-menu-list li a { color: #000000; text-decoration: none; font-size: 1.6rem; font-weight: bold; } #main-menu .main-menu-list .toggle-button { background-image: url(../images/arrow-down.svg); background-repeat: no-repeat; background-position: 50% 50%; background-color: transparent; background-size: 100%; width: 2rem; height: 2rem; border: unset; outline: none !important; } #main-menu .main-menu-list .toggle-button:focus-visible { outline: none !important; } #main-menu .main-menu-list li { padding: 1rem; } #main-menu { /* burguer animation */ } #main-menu #nav-icon { width: 60px; height: 30px; position: relative; margin-right: 50px; -webkit-transform: rotate(0deg); -moz-transform: rotate(0deg); -o-transform: rotate(0deg); transform: rotate(0deg); -webkit-transition: 0.5s ease-in-out; -moz-transition: 0.5s ease-in-out; -o-transition: 0.5s ease-in-out; transition: 0.5s ease-in-out; cursor: pointer; } #main-menu #nav-icon span { display: block; background-color: #25408F; height: 4px; width: 43px; position: absolute; border-radius: 9px; opacity: 1; left: 0; -webkit-transform: rotate(0deg); -moz-transform: rotate(0deg); -o-transform: rotate(0deg); transform: rotate(0deg); -webkit-transition: 0.35s ease-in-out; -moz-transition: 0.35s ease-in-out; -o-transition: 0.35s ease-in-out; transition: 0.35s ease-in-out; } #main-menu #nav-icon span:nth-child(1) { top: 0px; color: transparent; font-size: 0; } #main-menu #nav-icon span:nth-child(2) { top: 12px; } #main-menu #nav-icon span:nth-child(3) { top: 24px; } #main-menu #nav-icon.collapsed span:nth-child(1) { top: 12px; -webkit-transform: rotate(45deg); -moz-transform: rotate(45deg); -o-transform: rotate(45deg); transform: rotate(45deg); } #main-menu #nav-icon.collapsed span:nth-child(2) { top: 12px; -webkit-transform: rotate(-45deg); -moz-transform: rotate(-45deg); -o-transform: rotate(-45deg); transform: rotate(-45deg); } #main-menu #nav-icon.collapsed span:nth-child(3) { top: 12px; -webkit-transform: rotate(-45deg); -moz-transform: rotate(-45deg); -o-transform: rotate(-45deg); transform: rotate(-45deg); } #main-menu { /* end of burguer animation */ } #main-menu.collapsed .main-menu-links { display: none; } /* -- end mobile --*/ @media screen and (min-width: 576px) { #main-menu .responsive-button-container { margin-top: 0.5rem; padding: 0px 0px 1rem 0px; margin-left: auto; } } @media screen and (min-width: 576px) and (max-width: 768px) { .container.container.main-menu-links { padding-left: 0px; padding-right: 0px; } } @media screen and (min-width: 768px) { #main-menu .responsive-button-container { padding-left: 14px; } } @media screen and (min-width: 1024px) { #main-menu.collapsed .main-menu-links { display: block !important; } #main-menu { position: relative; top: unset; } #main-menu .responsive-button-container { display: none; } #main-menu .main-menu-list { display: flex; flex-direction: row; flex-wrap: nowrap; justify-content: space-between; align-items: stretch; padding: 0px; margin: 5px 0px 0px 0px; } #main-menu .main-menu-list li { padding: 1rem 0 0.5rem 0; } #main-menu .main-menu-list li a { position: relative; display: block; padding: auto; text-align: center; } #main-menu .main-menu-list li .toggle-button { display: none; } #main-menu .main-menu-list li:not(:last-child) { padding-right: 2rem; } } /* @media (min-width: 870px) and (max-width: 992px){ #main-menu{ .main-menu-list { li{ margin: 0px; padding: 1rem; } } .container.main-menu-links{ margin-right: 0px; margin-left: 0px; max-width: 100%; } } }*/ /* -- end main menu */ /**Active item**/ .home-page .main-menu-list > li, .about-eu .main-menu-list > li, .tackle .main-menu-list > li, .for-me .main-menu-list > li, .improve .main-menu-list > li, .work .main-menu-list > li, .get-involved .main-menu-list > li, .find-more .main-menu-list > li, .accessibility .main-menu-list > li { border-bottom: 1.5rem solid transparent; } .accessibility .main-menu-list > li:nth-child(1), .home-page .main-menu-list > li:nth-child(1), .about-eu .main-menu-list > li:nth-child(2), .tackle .main-menu-list > li:nth-child(3), .for-me .main-menu-list > li:nth-child(4), .improve .main-menu-list > li:nth-child(5), .work .main-menu-list > li:nth-child(6), .get-involved .main-menu-list > li:nth-child(7), .find-more .main-menu-list > li:nth-child(8) { border-bottom: 1.5rem solid #25408F; } /**End comment - active item**/ .language-select-container { position: relative; display: flex; } .language-select-container > .world-icon { position: absolute; top: 0.4rem; left: 0.5rem; } header { position: relative; z-index: 10000; } .header-wrapper { display: flex; flex-direction: row; flex-wrap: nowrap; justify-content: space-between; align-items: center; margin-bottom: 7rem; padding: 0; } .header-wrapper .comission-title { display: flex; flex-direction: column; flex-wrap: nowrap; align-items: flex-end; padding: 1rem 0; row-gap: 1rem; } .header-wrapper .logo { display: block; width: auto; margin-right: 1rem; height: 4rem; } .header-wrapper .logo-mobile { display: none; } .header-wrapper .header1 { display: none; } .header-wrapper .world-icon { height: 2.8rem; width: auto; margin-right: 0.5rem; } .header-wrapper select { border: none; padding: 0.5rem 0 1rem 3.5rem; border: 2px solid transparent; color: #25408F; font-size: 1.2rem; font-weight: bold; background-color: #ffffff; appearance: none; -webkit-appearance: none; cursor: pointer; } .header-wrapper select:focus-visible { outline: none; border: 1px solid #25408F; border-radius: 5px; } .header-wrapper select option:hover { box-shadow: 0 0 10px 100px green inset; color: white; } .header-wrapper select option:checked { box-shadow: 0 0 10px 100px green inset; } .header-wrapper .clickable-options { position: relative; display: flex; align-items: center; flex-wrap: wrap; flex-direction: row; } .header-wrapper .clickable-options .button-wrapper { position: relative; } .header-wrapper .clickable-options .button-wrapper .print-button:after, .header-wrapper .clickable-options .button-wrapper .print-button[target=_blank]:after, .header-wrapper .clickable-options .button-wrapper .print-button:hover:after, .header-wrapper .clickable-options .button-wrapper .print-button[target=_blank]:hover:after { top: 0.5rem; margin-right: 0px; } .header-wrapper .clickable-options .button-wrapper .pdf-button:after, .header-wrapper .clickable-options .button-wrapper .pdf-button[target=_blank]:after, .header-wrapper .clickable-options .button-wrapper .pdf-button:hover:after, .header-wrapper .clickable-options .button-wrapper .pdf-button[target=_blank]:hover:after { top: 0.5rem; } .header-wrapper + div p:last-child { margin-bottom: 0px; } #banner-home-page, #general-banner { max-height: 100px; width: 100%; object-fit: cover; } #banner-home-page { object-position: 0 20%; } #general-banner { object-position: 0 5%; } .title-h1 { text-align: center; } @media screen and (min-width: 400px) { .header-wrapper .logo { display: none; } .header-wrapper .logo-mobile { display: block; height: 5rem; padding-left: 0.5rem; } } @media screen and (min-width: 576px) { .header-wrapper .comission-title { flex-direction: row; } .header-wrapper .logo-mobile { height: 5rem; padding-left: 0; } .header-wrapper .clickable-options .button-wrapper .print-button:after, .header-wrapper .clickable-options .button-wrapper .print-button[target=_blank]:after, .header-wrapper .clickable-options .button-wrapper .print-button:hover:after, .header-wrapper .clickable-options .button-wrapper .print-button[target=_blank]:hover:after { margin-right: 2rem; } } @media screen and (min-width: 768px) { .header-wrapper { flex-direction: row; align-items: center; padding: 0 0.5rem; } .header-wrapper .comission-title { padding: 1rem; } .header-wrapper .logo { display: block; } .header-wrapper .logo-mobile { display: none; } #banner-home-page, #general-banner { max-height: 250px; } } @media screen and (min-width: 796px) { .title-h1 { text-align: left; } } @media screen and (max-width: 400px) { .header-wrapper { margin-bottom: 8rem; } .header-wrapper .logo { display: none; } .header-wrapper .logo-mobile { display: block; height: 6rem; padding-left: 0.5rem; } .header-wrapper .clickable-options .button-wrapper { flex-wrap: nowrap; } .header-wrapper .clickable-options .button-wrapper a { padding-top: 1rem; } .header-wrapper .clickable-options .language-select-container { position: absolute; top: 7rem; z-index: 10; } .title-h1 { font-size: 4rem; } #main-menu { top: 70px; } } .tackle .blue-slider .carousel-content-wrapper div { padding: 2rem; } .about-eu .blue-slider .carousel-content-wrapper div { padding: 3rem; } .improve .blue-slider .carousel-content-wrapper div { padding: 3rem; } .blue-slider { border: 4px solid #6DCFF6; } .blue-slider .carousel-inner { padding: 0px; margin: 0px; width: 100%; } .blue-slider .carousel-content-wrapper { padding: 0px; margin: 0px; width: 100%; } .blue-slider .carousel-content-wrapper > div { position: relative; background-image: linear-gradient(to bottom, rgba(255, 255, 255, 0.7), rgb(255, 255, 255)); padding: 4rem; z-index: 10; bottom: 0px; width: 100%; } .blue-slider .carousel-content-wrapper > div h3, .blue-slider .carousel-content-wrapper > div h4 { text-align: center; } .blue-slider .carousel-content-wrapper > div p { text-align: center; font-size: 1.6rem; line-height: 2.2rem; } .blue-slider .carousel-content-wrapper > div p:last-child { margin-bottom: 0px; } .blue-slider .carousel-content-wrapper > div p.copyright { position: absolute; top: 5px; font-size: 13px; text-align: left; } .blue-slider .carousel-content-wrapper img { width: 100%; margin: 0px; padding: 0px; overflow: hidden; } .blue-slider .carousel-control-next, .blue-slider .carousel-control-prev, .several-card-slider .carousel-control-next, .several-card-slider .carousel-control-prev { filter: invert(1); z-index: 20; width: 20px; align-items: flex-end; padding-bottom: 10rem; } .blue-slider .carousel-indicators, .several-card-slider .carousel-indicators { display: none; padding-bottom: 0px; margin: 0px; position: relative; justify-content: space-around; } .blue-slider .carousel-indicators li, .several-card-slider .carousel-indicators li { height: 1.6rem; width: 1.6rem; border-radius: 100%; background-color: #000000; border: none; opacity: 1; } .blue-slider .carousel-indicators .active, .several-card-slider .carousel-indicators .active { background-color: #6DCFF6; border: 1px solid black; } .improve-things .blue-slider { position: relative; } .improve-things .blue-slider .carousel-content-wrapper { min-height: 16rem; } #carouselEUCulture .carousel-content-wrapper > div { padding: 2.5rem; } #carouselEUCulture .carousel-content-wrapper > div p.copyright { top: 2px; left: 5px; } .improve .pioners .several-card-slider .carousel-content-wrapper { display: flex; flex-wrap: wrap; flex-direction: row; align-content: flex-start; justify-content: space-around; align-items: flex-start; } .improve .pioners .several-card-slider .carousel-content-wrapper > div { width: 32%; display: flex; flex-direction: column; align-items: center; } .improve .pioners .several-card-slider .carousel-content-wrapper > div h4 { text-align: center; } .improve .pioners .several-card-slider .carousel-content-wrapper > div img { width: 142px; height: 142px; object-fit: cover; } .improve .pioners .several-card-slider .carousel-content-wrapper > div img { height: 14.5rem; width: 14.5rem; } @media (min-width: 260px) { .blue-slider .carousel-control-next, .blue-slider .carousel-control-prev, .several-card-slider .carousel-control-next, .several-card-slider .carousel-control-prev { padding-bottom: 8rem; } } @media (min-width: 304px) { .blue-slider .carousel-control-next, .blue-slider .carousel-control-prev, .several-card-slider .carousel-control-next, .several-card-slider .carousel-control-prev { padding-bottom: 7rem; } } @media (min-width: 422px) { .blue-slider .carousel-control-next, .blue-slider .carousel-control-prev, .several-card-slider .carousel-control-next, .several-card-slider .carousel-control-prev { padding-bottom: 5rem; } } @media (min-width: 768px) { .tackle .blue-slider #carouselForYou .carousel-content-wrapper img { padding-bottom: 6.2rem; } .tackle .blue-slider #carouselEUCulture .carousel-content-wrapper img { padding-bottom: 9.7rem; } .tackle .blue-slider #carouselEUCulture .carousel-content-wrapper > div { padding: 2.5rem; } .blue-slider .carousel-indicators, .several-card-slider .carousel-indicators { display: flex; position: relative; justify-content: center; } .blue-slider .carousel-indicators li, .several-card-slider .carousel-indicators li { height: 1.6rem; width: 1.6rem; border-radius: 100%; background-color: #000000; margin: 1.5rem; border: none; opacity: 1; } .blue-slider .carousel-indicators .active, .several-card-slider .carousel-indicators .active { background-color: #000000; } .blue-slider .carousel-indicators .active::after, .several-card-slider .carousel-indicators .active::after { display: block; content: ""; width: 3.2rem; height: 3.2rem; border-radius: 100%; border: 2px solid #000000; position: relative; top: -8px; left: -8px; } .carousel-content-wrapper { display: flex; margin: 2rem 0px; max-height: 60rem; } .carousel-content-wrapper p { font-size: 1.8rem; line-height: 2.6rem; } .improve .pioners > .several-card-slider .carousel-content-wrapper > div { width: 32%; } .blue-slider { border: 4px solid #6DCFF6; } .blue-slider .carousel-inner { padding: 0px; margin: 0px; width: 100%; } .blue-slider .carousel-content-wrapper { padding: 0px; margin: 0px; width: 100%; max-height: 60rem; } .blue-slider .carousel-content-wrapper > div { position: absolute; background-image: linear-gradient(to bottom, rgba(255, 255, 255, 0.7), rgb(255, 255, 255)); padding: 4rem; z-index: 10; bottom: 0px; width: 100%; } .blue-slider .carousel-content-wrapper > div h3, .blue-slider .carousel-content-wrapper > div h4 { text-align: center; } .blue-slider .carousel-content-wrapper > div p { text-align: center; } .blue-slider .carousel-content-wrapper > div p:last-child { margin-bottom: 0px; } .blue-slider .carousel-content-wrapper img { width: 100%; margin: 0px; padding: 0px; overflow: hidden; } } @media (min-width: 768px) and (max-width: 768px) { .blue-slider .carousel-indicators li, .several-card-slider .carousel-indicators li { height: 1.4rem; width: 1.4rem; margin: 1rem; } } @media (min-width: 992px) { .carousel-content-wrapper { margin: 4rem 8rem; } .card-slider .carousel-item { width: 25%; background-color: #6DCFF6; } .card-slider .carousel-inner .active, .card-slider .carousel-inner .active + .carousel-item, .card-slider .carousel-inner .active + .carousel-item + .carousel-item { display: block; } .card-slider .carousel-inner .carousel-item.active:not(.carousel-item-right):not(.carousel-item-left), .card-slider .carousel-inner .carousel-item.active:not(.carousel-item-right):not(.carousel-item-left) + .carousel-item, .card-slider .carousel-inner .carousel-item.active:not(.carousel-item-right):not(.carousel-item-left) + .carousel-item + .carousel-item { transition: none; } .card-slider .carousel-inner .carousel-item-next, .card-slider .carousel-inner .carousel-item-prev { position: relative; transform: translate3d(0, 0, 0); } .card-slider .carousel-inner .active.carousel-item + .carousel-item + .carousel-item + .carousel-item { position: absolute; top: 0; right: -33.3333%; z-index: -1; display: block; visibility: visible; } .card-slider { /* left or forward direction */ } .card-slider .active.carousel-item-left + .carousel-item-next.carousel-item-left, .card-slider .carousel-item-next.carousel-item-left + .carousel-item, .card-slider .carousel-item-next.carousel-item-left + .carousel-item + .carousel-item, .card-slider .carousel-item-next.carousel-item-left + .carousel-item + .carousel-item + .carousel-item { position: relative; transform: translate3d(-100%, 0, 0); visibility: visible; } .card-slider { /* farthest right hidden item must be abso position for animations */ } .card-slider .carousel-inner .carousel-item-prev.carousel-item-right { position: absolute; top: 0; left: 0; z-index: -1; display: block; visibility: visible; } .card-slider { /* right or prev direction */ } .card-slider .active.carousel-item-right + .carousel-item-prev.carousel-item-right, .card-slider .carousel-item-prev.carousel-item-right + .carousel-item, .card-slider .carousel-item-prev.carousel-item-right + .carousel-item + .carousel-item, .card-slider .carousel-item-prev.carousel-item-right + .carousel-item + .carousel-item + .carousel-item { position: relative; transform: translate3d(100%, 0, 0); visibility: visible; display: block; visibility: visible; } } /* --- united in Diversity block --- */ .united-in-diversity { display: flex; flex-wrap: wrap; flex-direction: row; margin-bottom: 3rem; } .united-in-diversity div:nth-child(1) { background-color: #82D0F4; } .united-in-diversity div:nth-child(2) { background-color: #01B6ED; } .united-in-diversity div:nth-child(3) { background-color: #174195; } .united-in-diversity div:nth-child(3) p { color: #ffffff; } .united-in-diversity div:nth-child(4) { background-color: #077860; } .united-in-diversity div:nth-child(4) p { color: #ffffff; } .united-in-diversity div:nth-child(5) { background-color: #E7F5FE; } .united-in-diversity div:nth-child(6) { background-color: #82D0F4; } .united-in-diversity > div { width: 48%; margin-bottom: 1rem; margin-right: 0px; padding: 1rem 2rem; } .united-in-diversity > div p:first-child { font-size: 1.9rem; margin: 0px; } .united-in-diversity > div p:nth-child(2) { font-size: 1.8rem; line-height: 1.8rem; margin-bottom: 0px; } .united-in-diversity > div:nth-child(1), .united-in-diversity > div:nth-child(3), .united-in-diversity > div:nth-child(5) { margin-right: 1rem; } .united-in-diversity #united-diversity-text { font-size: 1.9rem; line-height: 1.9rem; } .united-in-diversity #united-diversity-text + p { font-weight: bold; font-size: 1.9rem; line-height: 1.9rem; } .united-in-diversity #united-diversity-e p:first-child { font-size: 1.8rem; line-height: 1.8rem; margin-bottom: 0px; font-weight: unset; } .united-in-diversity #united-diversity-e p:nth-child(2) { font-size: 1.9rem; margin: 0px; font-weight: bold; } .united-in-diversity #united-diversity-f p:first-child { font-size: 1.8rem; line-height: 1.8rem; margin-bottom: 0px; font-weight: unset; } .united-in-diversity #united-diversity-f p:nth-child(2) { font-size: 1.9rem; margin: 0px; font-weight: bold; } .united-in-diversity #united-diversity-flag { width: 98%; height: auto; max-height: 20rem; min-height: 8rem; margin: 0px; background-image: url(../images/Flag_of_Europe_color_with_border.svg); background-repeat: no-repeat; background-size: contain; background-color: #003399; background-position: center; } @media screen and (min-width: 992px) { .united-in-diversity { display: flex; flex-wrap: wrap; flex-direction: row; } .united-in-diversity div:nth-child(1) { background-color: #82D0F4; width: 32%; height: 8rem; } .united-in-diversity div:nth-child(2) { background-color: #01B6ED; width: 65%; height: 8rem; } .united-in-diversity div:nth-child(3) { background-color: #174195; width: 32%; height: 8rem; } .united-in-diversity div:nth-child(3) p { color: #ffffff; } .united-in-diversity div:nth-child(4) { width: 32%; height: 8rem; background-color: #077860; } .united-in-diversity div:nth-child(4) p { color: #ffffff; } .united-in-diversity div:nth-child(5) { background-color: #E7F5FE; width: 32%; height: 8rem; } .united-in-diversity div:nth-child(6) { background-color: #82D0F4; width: 65%; } .united-in-diversity > div { margin-bottom: 1rem; margin-right: 0px; padding: 1rem 3rem; height: 8rem; } .united-in-diversity > div p { letter-spacing: -1px; } .united-in-diversity > div p:first-child { font-size: 1.9rem; font-weight: bold; } .united-in-diversity > div p:last-child { margin-bottom: 0px; } .united-in-diversity > div p:nth-child(2) { font-size: 1.9rem; line-height: 1.9rem; } .united-in-diversity > div:nth-child(4) > p { margin-bottom: 0px; text-align: center; } .united-in-diversity > div:nth-child(4) > p:first-child { margin-top: 1.2rem; } .united-in-diversity > div:nth-child(1), .united-in-diversity > div:nth-child(3), .united-in-diversity > div:nth-child(4), .united-in-diversity > div:nth-child(6) { margin-right: 1rem; } .united-in-diversity #united-diversity-text { font-size: 1.8rem; line-height: 1.8rem; } .united-in-diversity #united-diversity-text + p { font-weight: bold; font-size: 1.8rem; margin-bottom: 0px; } .united-in-diversity #united-diversity-flag { width: 32%; height: auto; max-height: 8rem; margin: 0px; object-fit: cover; overflow: hidden; } } @media screen and (max-width: 373px) { .united-in-diversity div, #united-diversity-flag { width: 100%; } .united-in-diversity div:nth-child(1), .united-in-diversity div:nth-child(3), .united-in-diversity div:nth-child(4), .united-in-diversity div:nth-child(6), #united-diversity-flag:nth-child(1), #united-diversity-flag:nth-child(3), #united-diversity-flag:nth-child(4), #united-diversity-flag:nth-child(6) { margin-right: 0px; } .united-in-diversity div p, #united-diversity-flag p { margin-bottom: 0px; } .united-in-diversity div #united-diversity-flag, #united-diversity-flag #united-diversity-flag { width: 100%; } } /* --- end of united in Diversity block --- */ /* --- citizens panels block --- */ .citizens-panels { display: flex; flex-wrap: wrap; flex-direction: row; margin-bottom: 3rem; } .citizens-panels .infografic-title { margin: 0px; } .citizens-panels div:nth-child(1) { background-color: #077860; } .citizens-panels div:nth-child(1) p { color: #ffffff; } .citizens-panels div:nth-child(2) { background-color: #82D0F4; } .citizens-panels div:nth-child(2) { background-color: #82D0F4; } .citizens-panels div:nth-child(3) { background-color: #01B6ED; } .citizens-panels div:nth-child(4) { background-color: #174195; } .citizens-panels div:nth-child(4) p { color: #ffffff; } .citizens-panels div:nth-child(5) { background-color: #077860; } .citizens-panels div:nth-child(5) p { color: #ffffff; } .citizens-panels div:nth-child(6) { background-color: #E7F5FE; } .citizens-panels div:nth-child(6) { background-color: #82D0F4; } .citizens-panels > div { width: 100%; margin-bottom: 1rem; margin-right: 0px; padding: 1rem 2rem; } .citizens-panels > div p.big { font-size: 1.8rem; margin: 0px; } .citizens-panels > div p.average, .citizens-panels > div span.average { font-size: 1.8rem; line-height: 1.8rem; margin-bottom: 0.5rem; } @media screen and (min-width: 576px) { .citizens-panels > div { padding: 1rem 2rem; } .citizens-panels > div p { letter-spacing: -1; } .citizens-panels > div p.big { font-size: 1.9rem; line-height: 1.9rem; } .citizens-panels > div p.average, .citizens-panels > div span.average { font-size: 1.8rem; line-height: 1.8rem; } .citizens-panels #citizens-panels-title { width: 99%; } .citizens-panels #citizens-panels-a { width: 34%; margin-right: 1rem; } .citizens-panels #citizens-panels-b { width: 64%; } .citizens-panels #citizens-panels-c { width: 64%; margin-right: 1rem; } .citizens-panels #citizens-panels-d { width: 34%; } } @media screen and (min-width: 1024px) { .citizens-panels > div { padding: 1rem 3rem; } .citizens-panels > div p.big { font-size: 1.9rem; line-height: 1.9rem; font-weight: bold; } .citizens-panels > div p.average, .citizens-panels > div span.average { font-size: 1.8rem; line-height: 1.8rem; } } /* --- end of citizens panels block --- */ /* --- united in Diversity block --- */ /*.united-in-diversity{ display: flex; flex-wrap: wrap; flex-direction: row; margin-bottom: 3rem; div:nth-child(1){ background-color: #82D0F4; } div:nth-child(2){ background-color: #01B6ED; } div:nth-child(3){ background-color: #174195; p{ color: colors.$text-white; } } div:nth-child(4){ background-color: #FEED00; } div:nth-child(5){ background-color: #E7F5FE; } div:nth-child(6){ background-color: #82D0F4; } > div{ width: 48%; margin-bottom: 1rem; margin-right: 0px; padding: 2rem;; p:first-child{ font-size: 3rem; margin: 0px; } p:nth-child(2){ font-size: 1.8rem; line-height: 1.8rem; margin-bottom: 0px; } &:nth-child(1), &:nth-child(3), &:nth-child(5){ margin-right: 1rem; } } #united-diversity-text{ font-size: 2.8rem; line-height: 2.8rem; } #united-diversity-text + p{ font-weight: bold; font-size: 2.8rem; line-height: 2.8rem; } #united-diversity-flag{ width: 48%; height: auto; max-height: 20rem; min-height: 19rem; margin: 0px; background-image: url(../images/Flag_of_Europe_color_with_border.svg); background-repeat: no-repeat; background-size: cover; background-position: center; } } @media screen and (min-width : 992px){ .united-in-diversity{ display: flex; flex-wrap: wrap; flex-direction: row; div:nth-child(1){ background-color: #82D0F4; width: 32%; height: 15rem; } div:nth-child(2){ background-color: #01B6ED; width: 65%; height: 15rem; } div:nth-child(3){ background-color: #174195; width: 32%; height: 15rem; p{ color: colors.$text-white; } } div:nth-child(4){ background-color: #FEED00; width: 32%; height: 15rem; } div:nth-child(5){ background-color: #E7F5FE; width: 32%; height: 15rem; } div:nth-child(6){ background-color: #82D0F4; width: 65%; } > div{ margin-bottom: 1rem; margin-right: 0px; padding: 3rem; height: 20rem; p{ letter-spacing: -1px; } p:first-child{ font-size: 4.5rem; margin-bottom: 1rem; font-weight: bold; } p:last-child{ margin-bottom: 0px; } p:nth-child(2){ font-size: 3rem; line-height: 3rem; } &:nth-child(4) > p{ margin-bottom: 0px; text-align: center; } &:nth-child(4) > p:first-child{ margin-top: 1.2rem; } &:nth-child(1) > p:first-child, &:nth-child(2) > p:first-child, &:nth-child(3) > p:first-child, &:nth-child(5) > p:first-child, &:nth-child(6) > p:first-child{ margin-top: 2rem; } &:nth-child(1), &:nth-child(3), &:nth-child(4), &:nth-child(6){ margin-right: 1rem; } } #united-diversity-text{ font-size: 3.6rem; line-height: 3.6rem; } #united-diversity-text + p{ font-weight: bold; font-size: 3.6rem; margin-bottom: 0px; } #united-diversity-flag{ width: 32%; height: auto; max-height: 20rem; margin: 0px; object-fit: cover; overflow: hidden; } } } @media screen and (max-width : 373px){ .united-in-diversity div, #united-diversity-flag{ width: 100%; &:nth-child(1), &:nth-child(3), &:nth-child(4), &:nth-child(6){ margin-right: 0px; } p { margin-bottom: 0px; } #united-diversity-flag{ width: 100%; } } } /* /* --- end of united in Diversity block --- */ /* --- citizens panels block --- */ /* .citizens-panels{ display: flex; flex-wrap: wrap; flex-direction: row; margin-bottom: 3rem; div:nth-child(1){ background-color: #82D0F4; } div:nth-child(2){ background-color: #01B6ED; } div:nth-child(3){ background-color: #174195; p{ color: colors.$text-white; } } div:nth-child(4){ background-color: #FEED00; } div:nth-child(5){ background-color: #E7F5FE; } div:nth-child(6){ background-color: #82D0F4; } > div{ width: 100%; margin-bottom: 1rem; margin-right: 0px; padding:2rem; p.big{ font-size: 3rem; margin: 0px; } p.average, span.average{ font-size: 1.8rem; line-height: 2.4rem; margin-bottom: 0.5rem; } p.more-padding{ padding-top: 0.4rem; } } } @media screen and (min-width : 576px){ .citizens-panels{ > div { padding: 3rem 2rem; p{ letter-spacing: -1; } p.big{ font-size: 4rem; line-height: 4rem; } p.average, span.average{ font-size: 2.5rem; line-height: 2.5rem; } p.more-padding{ padding-top: 1.5rem; } } #citizens-panels-a{ width: 34%; margin-right: 1rem; } #citizens-panels-b{ width: 64%; } #citizens-panels-c{ width: 64%; margin-right: 1rem; } #citizens-panels-d{ width: 34%; } } } @media screen and (min-width : 1024px){ .citizens-panels{ > div { padding: 3rem; p.big{ font-size: 4rem; line-height: 4rem; font-weight: bold; } p.average, span.average{ font-size: 3rem; line-height: 3rem; } p.more-padding{ padding-top: 2rem; } } } } */ /* --- end of citizens panels block --- */ .wtmap .wt-map-content { border: none !important; } .wtmap .wt-map-content .countryLabel { background-color: #25408F; color: #ffffff; padding: 2px; margin-left: -17px !important; font-weight: bold; font-size: 16px; text-align: center; border-radius: 8px; height: 25px; min-height: 25px; width: 35px; min-width: 35px; } .wtmap .wt-map-content .leaflet-popup-content-wrapper { width: 32rem; } .wtmap .wt-map-content .leaflet-popup-content-wrapper .leaflet-popup-content span { width: 100%; font-weight: normal; margin-bottom: 0.2rem; } .wtmap .wt-map-content .leaflet-popup-content-wrapper .leaflet-popup-content span a { font-size: 1.2rem; } .wtmap .wt-map-content .leaflet-popup-content-wrapper .leaflet-popup-content span:nth-child(1) { font-size: 1.5rem; font-weight: bold; } .wtmap .wt-map-content .leaflet-bottom { z-index: 1; } .wtmap .wt-map-content a.leaflet-popup-close-button { margin: 0.7rem; } .wtmap .wt-map-content .legend-map { background-color: #ffffff; border-radius: 0.5rem; } .wtmap .wt-map-content .legend-map div { width: 32rem; } .wtmap .wt-map-content .legend-map div .h2 { font-size: 2rem; padding: 1.5rem 0; } @media screen and (max-width: 1200px) { .wtmap .wt-map-content .legend-map div { width: 24rem; } } .wtmap .wt-map-content .legend-map p { font-size: 1.6rem; display: flex; gap: 0.6rem; align-items: center; margin-bottom: 1rem; margin-right: 1rem; } .wtmap .wt-map-content .legend-map p span { width: 2rem; height: 2rem; } .wtmap .wt-map-content .legend-map p.population-note { font-size: 1.3rem; margin-bottom: 0; } .wtmap .wt-map-content .legend-map p.schengen-note { font-size: 1.3rem; } .wtmap .wt-map-content .wt-map { z-index: unset; } .wtmap .wt-map-content .wt-mask-touch { z-index: 999; } .wtmap .wt-map-info { z-index: 999; } .wtmap .wtfooter { display: none; } .wt-hide-menu .wt-map-panels { border: none !important; } .ecl-popover__content { width: 300px; } .ecl-popover__list { width: 280px; } .wt-map-attribution a { font-size: 1.2rem; } .map-popup-top { top: 30px !important; } .map-popup-top .leaflet-popup-tip-container { top: -20px !important; overflow: auto !important; transform: rotate(180deg); } .map-popup-top .leaflet-popup-tip { box-shadow: 0 -3px 14px rgba(0, 0, 0, 0.4) !important; background-clip: none !important; } .map-popup-is .leaflet-popup-tip-container { left: 32%; } path.leaflet-interactive:focus { outline: none; } .eu-map .map-note, .documents .map-note { font-size: 1.3rem; margin-bottom: auto; } .eu-travelling-map, .eu-documents-map { display: none; } @media screen and (min-width: 998px) { .eu-travelling-map, .eu-documents-map { display: block; } } .eu-documents-map { height: 990px; } /* --- tooltip styles --- */ .country-info-map { display: flex; flex-direction: column; gap: 1.5rem; } .country-info-map > p { margin: 0.5rem 0 !important; line-height: normal; } .country-info-map div { position: relative; padding-left: 4.5rem; } .country-info-map div p { margin: 0; display: inline-block; } .country-info-map div p:first-of-type { padding-right: 0.5rem; } .country-info-map div p, .country-info-map div strong, .country-info-map div a { font-size: 1.8rem; } .country-info-map div a { color: #25408F; font-weight: bold; } .country-info-map div:before { display: block; position: absolute; background-color: #25408F; background-position: 50% 50%; background-repeat: no-repeat; background-size: 23px; width: 33px; height: 33px; border-radius: 50%; content: ""; left: 0px; top: -3px; } .country-info-map div.joined:before { background-image: url(../images/calendar.svg); background-size: 19px; } .country-info-map div.population:before { background-image: url(../images/people.svg); } .country-info-map div.schengen-area:before { background-image: url(../images/flying.svg); } .country-info-map div.currency:before { background-image: url(../images/money.svg); } /* --- end tooltip styles --- */ /* --- filter styles --- */ .map-filters { border: 1px solid #6DCFF6; border-radius: 5px; padding: 2rem; display: flex; justify-content: center; } .map-filters label { color: #000000; font-size: 1.6rem; margin-bottom: 0.5rem; } .map-filters .select { margin-left: 2rem; } .map-filters select { position: relative; display: inline-block; height: 45px; min-width: 220px; max-width: 300px; border: 1px solid #000000; border-radius: 5px; font-weight: bold; font-size: 1.6rem; letter-spacing: 0.4px; text-align: left; padding: 8px 2rem 8px 2rem; appearance: none; background-image: url(../images/arrow-down.svg); background-repeat: no-repeat; background-position: 96% 50%; background-size: 15px; } .map-filters select option { font-weight: bold; margin-bottom: 0px; font-size: 1.6rem; } .map-filters .switches { display: flex; align-items: center; gap: 14rem; } .map-filters .switches .toggle-wrapper { display: flex; flex-direction: row-reverse; flex-wrap: wrap; align-content: center; justify-content: space-around; align-items: flex-start; } .map-filters .switches button { display: inline-block; margin: 0px 1.5rem; } @media screen and (min-width: 1200px) { .map-filters .switches { gap: 22rem; } } /* --- end filter styles --- */ .container-map-and-accordion-of-map-documents .accordion button .label { line-height: normal !important; } .container-map-and-accordion-of-map-documents .map-container { display: none; z-index: 2; position: relative; } @media only screen and (min-width: 998px) { .container-map-and-accordion-of-map-documents { overflow: unset; height: unset; } .container-map-and-accordion-of-map-documents .accordion { display: none; } .container-map-and-accordion-of-map-documents .map-note-mobile-documents { display: none; } .container-map-and-accordion-of-map-documents .map-container { display: block; } } .download-btn { margin-top: 2rem; } .download-btn .btn-figure.download { display: flex; justify-content: center; align-items: center; height: 35px; width: 100%; min-width: 100%; font-weight: bold; background-color: #ffffff; border-radius: 5px; text-transform: uppercase; border: 1px solid #25408F; color: #164194; } .download-btn .btn-figure.download:hover { color: #164194; } #map-patterns { position: absolute; top: 0; } .chart a { font-size: 12.8px; } .switch > .row { vertical-align: middle; text-align: center; } .switch .btn-toggle { top: 50%; transform: translateY(-50%); } .btn-toggle { margin: 0 4rem; padding: 0; position: relative; border: none; height: 1.5rem; width: 3rem; border-radius: 1.5rem; color: #333333; background: #333333; } .btn-toggle:focus, .btn-toggle.focus, .btn-toggle:focus.active, .btn-toggle.focus.active { outline: none; } .btn-toggle .toggle-label { line-height: 1.5rem; text-align: center; font-weight: 600; font-size: 0.75rem; letter-spacing: 2px; position: relative; margin-left: 2rem; bottom: 0; transition: opacity 0.25s; } .btn-toggle > .handle { position: absolute; top: 0.1875rem; left: 0.1875rem; width: 1.125rem; height: 1.125rem; border-radius: 1.125rem; background: #ffffff; transition: left 0.25s; } .btn-toggle.active { transition: background-color 0.25s; } .btn-toggle.active > .handle { left: 1.6875rem; transition: left 0.25s; } .btn-toggle.active .toggle-label { opacity: 1; } .toggle-label { color: #333333; } .btn-toggle.active { background-color: #25408F; } .btn-toggle.btn-lg { margin: 0px 18rem 0px 5rem; padding: 0px; position: relative; border: none; height: 2.5rem; width: 5rem; border-radius: 2.5rem; } .btn-toggle.btn-lg:focus, .btn-toggle.btn-lg.focus, .btn-toggle.btn-lg:focus.active, .btn-toggle.btn-lg.focus.active { outline: none; } .btn-toggle.btn-lg .toggle-label { line-height: 2.5rem; text-align: center; font-weight: 600; font-size: 1.6rem; letter-spacing: 2px; position: relative; bottom: 0; transition: opacity 0.25s; } .btn-toggle.btn-lg .toggle-label { position: absolute; top: 0; left: 48px; width: max-content; } .btn-toggle.btn-lg > .handle { position: absolute; top: 0.3125rem; left: 0.3125rem; width: 1.875rem; height: 1.875rem; border-radius: 1.875rem; background: #ffffff; transition: left 0.25s; } .btn-toggle.btn-lg.active { transition: background-color 0.25s; } .btn-toggle.btn-lg.active > .handle { left: 2.8125rem; transition: left 0.25s; } .btn-toggle.btn-lg.active .toggle-label { opacity: 1; } .btn-toggle.btn-secondary { color: #333333; background: #333333; } .btn-toggle.btn-secondary .toggle-label { color: #999999; } .btn-toggle.btn-secondary.active { background-color: #ff8300; } .btn:focus { outline: 0; box-shadow: 0 0 0 0.2rem #999999; } .cards-filter { margin: 1.5rem 0; } .cards-filter .cards-filter-filters { display: flex; flex-wrap: wrap; gap: 1rem 2rem; align-items: center; margin-bottom: 0.5rem; } .filter-toggle { display: flex; align-items: center; gap: 0.5rem; cursor: pointer; margin: 0; } .filter-toggle input[type=checkbox] { display: none; } .filter-toggle .toggle-slider { position: relative; display: inline-block; width: 4.2rem; height: 2rem; border-radius: 1.25rem; background-color: #CFDBEC; transition: background-color 0.25s; flex-shrink: 0; } .filter-toggle .toggle-slider::after { content: ""; position: absolute; top: 0.1875rem; left: 0.1875rem; width: 1.55rem; height: 1.55rem; border-radius: 50%; background: #0A0A0A; transition: left 0.25s; } .filter-toggle .toggle-slider .toggle-slider--filled { background-color: #000000; } .filter-toggle input[type=checkbox]:checked ~ .filter-label { font-weight: bold; } .filter-toggle input[type=checkbox]:checked + .toggle-slider { background-color: #25408F; } .filter-toggle input[type=checkbox]:checked + .toggle-slider::after { left: calc(100% - 0.1875rem - 1.55rem); background: #FECB00; } .filter-toggle input[type=checkbox]:checked + .toggle-slider.toggle-slider--filled { background-color: #000000; } .filter-toggle .filter-label { font-size: 17px; color: black; white-space: nowrap; } /* --- card styles --- */ .table-cards { display: flex; flex-direction: row; flex-wrap: wrap; align-content: center; justify-content: space-around; align-items: flex-start; } .table-cards > div { width: 100%; } .table-cards > div .animated-pic { margin-bottom: 2.8rem; } .table-cards > div .animated-pic.copyright { margin-bottom: 0; } .table-cards > div .animated-pic.copyright p { font-size: 12px; margin-top: 0; margin-bottom: 0.2rem; } .table-cards .animated-pic + .copyright { margin-bottom: 0; font-size: 12px; margin-top: 0; margin-bottom: 0.2rem; } .table-cards img { overflow: hidden; height: auto; max-height: 20rem; max-width: 100%; object-fit: cover; } .table-cards .two-pictures .wifi-picture { padding: 1rem; max-height: 9rem; width: auto; margin: 0px 10% 1.5rem 0px; width: 100%; object-fit: contain; } .table-cards-blue > div { padding: 1rem; border: 2px solid #6DCFF6; height: 38rem; margin-bottom: 2rem; } .table-cards.over > div { position: relative; margin-bottom: 1rem; } .table-cards.over > div .text { position: absolute; display: block; padding: 1rem; width: 100%; min-height: 12rem; background: rgba(255, 255, 255, 0.8); top: 70%; margin: 0px; } .table-cards.over > div .text .title, .table-cards.over > div .text h3.title, .table-cards.over > div .text h4.title { padding: 0px; margin: 0px; margin-bottom: 0px; font-size: 2rem; line-height: 2.5rem; font-weight: normal; } .accordion-content .xls-text { display: flex; font-size: 1.8rem; line-height: 2.6rem; gap: 5px; } .accordion-content .download-xls { text-decoration: none; display: flex; align-items: center; } .accordion-content .download-xls:hover { text-decoration: underline; } .accordion-content .download-xls::after { content: ""; display: inline-block; width: 21px; height: 21px; margin-left: 6px; vertical-align: middle; background: currentColor; -webkit-mask-image: url(../images/xls-icon.svg); mask-image: url(../images/xls-icon.svg); -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-position: center; mask-position: center; -webkit-mask-size: contain; mask-size: contain; } #countryGrid { display: none; margin-top: 2rem; } .eu-glance .grow-wrapper .population-note { margin-bottom: 0; margin-top: 0 !important; } .eu-glance .grow-wrapper .population-note a { font-size: 1.3rem; } .eu-glance .grow-wrapper .population-note a::after { position: relative; top: 2px; } .country-card { background-color: #ffffff; border: 1px solid #cfdbec; border-radius: 4px; overflow: hidden; } .country-card .country-card-header { display: flex; align-items: center; justify-content: space-between; padding: 1rem 1rem; background-color: #cfdbec; } .country-card .country-card-header span { font-weight: 700; font-size: 17px; color: #000000; } .country-card .country-card-header img { width: 2.5rem; height: 2.5rem; border-radius: 50%; object-fit: cover; flex-shrink: 0; } .country-card .country-card-header.candidate { background-color: #CFE8EC; } .country-card .country-card-header.Flag_of_Kosovo { background-color: #FFBE74; } .country-card .country-card-header.non-candidate { background-color: #ECE8CF; } .country-card .country-card-body { padding: 2rem 1rem; } .country-card .country-card-row { display: flex; justify-content: center; align-items: flex-end; gap: 1rem; } .country-card .country-card-row.first { align-items: flex-start; } .country-card .country-card-row.last { margin-top: 5px; } .country-card .country-card-col { flex: 1; } .country-card .country-card-col .info-label { font-size: 15px; text-align: center; color: black; margin: 0 0 0.15rem 0; line-height: 1.3; } .country-card .country-card-col .info-label-schengen { font-size: 15px; text-align: center; color: black; margin: 0 0 0.15rem 0; line-height: 1.3; } .country-card .country-card-col .info-value { font-size: 16px; text-align: center; font-weight: 700; color: #000000; display: block; } .country-card .country-card-col .info-value.population { display: flex; flex-direction: column; font-weight: normal; } .country-card .country-card-divider { border-top: 1px dashed black; margin: 0.6rem 0; } .country-card .schengen-area { display: flex; flex-direction: column; align-items: center; gap: 10px; } .country-card .schengen-false { content: ""; display: block; width: 23px; height: 23px; background: #D00505; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-position: center; mask-position: center; -webkit-mask-size: contain; mask-size: contain; -webkit-mask-image: url(../images/schengen-NO.svg); mask-image: url(../images/schengen-NO.svg); } .country-card .schengen-- { content: ""; display: block; width: 23px; height: 23px; background: #D00505; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-position: center; mask-position: center; -webkit-mask-size: contain; mask-size: contain; -webkit-mask-image: url(../images/schengen-NO.svg); mask-image: url(../images/schengen-NO.svg); } .country-card .schengen-true { content: ""; display: block; width: 25px; height: 25px; background: #007E7E; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-position: center; mask-position: center; -webkit-mask-size: contain; mask-size: contain; -webkit-mask-image: url(../images/schengen-YES.svg); mask-image: url(../images/schengen-YES.svg); } .country-card .joined- { display: flex; flex-direction: column; align-items: center; gap: 5px; } .country-card .joined- strong { content: ""; display: block; width: 23px; height: 23px; background: #D00505; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-position: center; mask-position: center; -webkit-mask-size: contain; mask-size: contain; -webkit-mask-image: url(../images/schengen-NO.svg); mask-image: url(../images/schengen-NO.svg); } .population-note { font-size: 1.3rem; } @media screen and (min-width: 768px) { #countryGrid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 2rem; margin-bottom: 2rem; } } @media screen and (min-width: 992px) { #countryGrid { grid-template-columns: repeat(3, 1fr); } } @media screen and (min-width: 1200px) { #countryGrid { grid-template-columns: repeat(4, 1fr); } } @media screen and (max-width: 767px) { #countryGrid { display: grid; gap: 2rem; margin-bottom: 2rem; grid-template-columns: repeat(1, 1fr); } } @media screen and (min-width: 576px) { .table-cards > div { width: 48%; } .table-cards img + p { margin-top: 1.5rem; } .table-cards img { overflow: hidden; } } @media screen and (min-width: 992px) { .table-cards > div { width: 32%; } .table-cards.four > div { width: 22%; } .improve-things .table-cards > div { width: 29%; } } /* --- end card styles --- */ .milestones-container { position: relative; } .eu-milestones .date { font-weight: bold; font-size: 2.5rem; margin-bottom: 0.5rem; } .eu-milestones li.show p { animation: fadeInAnimation 5s; animation-iteration-count: 1; animation-fill-mode: forwards; } .eu-milestones li.show span.dot { background-color: #000000; animation: dotAnimation 2s; animation-iteration-count: 1; animation-fill-mode: forwards; } .eu-milestones .milestones-picture { position: relative; } .eu-milestones .milestones-picture div.picture-section { margin: 2rem 1rem 1rem 3rem; opacity: 0; animation: fadeInAnimation 5s; animation-iteration-count: 1; animation-fill-mode: forwards; } .eu-milestones .milestones-picture div.picture-section img { max-width: 100%; } .eu-milestones .milestones-picture div.picture-section p { font-size: 1.2rem; margin: 0px; width: 100%; } .finish-milestones-line { margin-top: 5rem; } @media screen and (max-width: 575px) { .eu-milestones { position: relative; } .eu-milestones .date { font-weight: bold; font-size: 2.5rem; margin-bottom: 0.5rem; } .eu-milestones li.show p { margin-left: 3rem; animation: fadeInAnimation 5s; animation-iteration-count: 1; animation-fill-mode: forwards; } .eu-milestones li.show span.dot { background-color: #000000; animation: dotAnimation 2s; animation-iteration-count: 1; animation-fill-mode: forwards; } .eu-milestones > div ul li { list-style: none; position: relative; width: 100%; margin-bottom: 0.5rem; } .eu-milestones > div ul li span { display: block; } .eu-milestones > div ul li span.dot { position: absolute; display: block; content: ""; background-color: #6DCFF6; border: 1px solid #000000; height: 2rem; width: 2rem; left: 0px; border-radius: 100%; margin: 1.5rem 2rem 1.5rem 0px; } .eu-milestones { /*span.milestones-line{ position: absolute; display: block; content: ''; background-color: colors.$text-black; width: 2px; height: 90.5%; left: 14.3%; margin-top: 19px; border-radius: 0px; }*/ } } @media screen and (max-width: 300px) { .eu-milestones span.milestones-line { height: 91.5%; left: 22%; } } @media screen and (min-width: 576px) { .eu-milestones { position: relative; } .eu-milestones > div ul { display: flex; flex-wrap: wrap; } .eu-milestones > div ul li { list-style: none; position: relative; width: 100%; margin-bottom: 0.5rem; } .eu-milestones > div ul li span { display: block; } .eu-milestones > div ul li span.dot { position: absolute; } .eu-milestones > div ul li:nth-child(even) { text-align: end; } .eu-milestones > div ul li:nth-child(even) p { margin-left: 0px; margin-right: auto; } .eu-milestones > div ul li:nth-child(even) span.dot { right: calc(50% - 3.3rem); } .eu-milestones > div ul li:nth-child(odd) p { margin-left: auto; margin-right: 0px; } .eu-milestones > div ul li:nth-child(odd) span.dot { left: calc(50% - 2.7rem); } .eu-milestones > div ul p { width: 45%; margin-bottom: 0px; } .eu-milestones > div ul span.dot { display: block; content: ""; background-color: #6DCFF6; border: 1px solid #000000; height: 2rem; width: 2rem; border-radius: 100%; margin: 1.5rem 2rem; } .eu-milestones span.milestones-line { position: absolute; display: block; content: ""; background-color: #000000; width: 3px; height: 92.5%; left: 54.4%; margin-top: 19px; border-radius: 0px; } .milestones-picture { position: relative; display: flex; align-items: flex-start; } .milestones-picture div.picture-section { margin: 2rem; max-width: 40%; opacity: 0; animation: fadeInAnimation 5s; animation-iteration-count: 1; animation-fill-mode: forwards; } .milestones-picture div.picture-section img { max-width: 100%; } .milestones-picture div.picture-section p { font-size: 1.2rem; margin: 0px; width: 100%; } .milestones-picture div.picture-section.left p { text-align: right; } .milestones-picture div.picture-section.rigth p { text-align: left; } .milestones-picture:nth-child(odd) div.picture-section p { text-align: right; } .milestones-picture:nth-child(even) { flex-direction: row-reverse; } .milestones-picture:nth-child(even) div.picture-section p { text-align: left; } } @media screen and (min-width: 768px) { .eu-milestones span.milestones-line { left: 53.3%; height: 92%; } .milestones-picture div.picture-section { margin: 2rem; max-width: 40%; } .milestones-picture div.picture-section img { max-width: 100%; } .milestones-picture div.picture-section p { font-size: 1.2rem; margin: 0px; width: 100%; } .milestones-picture:nth-child(odd) div.picture-section p { text-align: right; } .milestones-picture:nth-child(even) { flex-direction: row-reverse; } .milestones-picture:nth-child(even) div.picture-section p { text-align: left; } } @media screen and (min-width: 992px) { .eu-milestones span.milestones-line { height: 93%; left: 52.3%; } } @media screen and (min-width: 1200px) { .eu-milestones > div ul li:nth-child(even) span.dot { right: calc(50% - 3.3rem); } .eu-milestones > div ul li:nth-child(odd) span.dot { left: calc(50% - 2.7rem); } .eu-milestones span.milestones-line { height: 94%; left: 52%; } } @keyframes fadeInAnimation { 0% { opacity: 0; } 100% { opacity: 1; } } @keyframes dotAnimation { 0% { background-color: #000000; } 100% { background-color: #6DCFF6; } } @media screen and (min-width: 1200px) { .bg footer .footer-wrapper .column-one { width: 51%; } .bg footer .footer-wrapper .column-two { width: 49%; } } @media print { .carousel-item { display: block; float: initial; -webkit-backface-visibility: visible; backface-visibility: visible; } .accordion-content img { width: 100%; } .blue-slider .carousel-content-wrapper > div { background-image: linear-gradient(to bottom, rgba(255, 255, 255, 0.9), rgb(255, 255, 255)); } .blue-slider .carousel-indicators, .several-card-slider .carousel-indicators, .blue-slider .carousel-control-next, .blue-slider .carousel-control-prev, .several-card-slider .carousel-control-next, .several-card-slider .carousel-control-prev { display: none; } .previous-next-wrapper { display: none; } .main-menu, .header-wrapper .clickable-options .button-wrapper { display: none; } .accordion .accordion-content { display: block; height: fit-content; } .tackle .blue-slider #carouselForYou .carousel-content-wrapper img { display: none; } .mobile-flag { width: 200px !important; } }