:root { --anim-duration: 150ms; } .Button {transition: background-color var(--anim-duration) ease;} .Button:hover {background-color: #009583;} .BlueButton:hover {color: var(--dark-blue);} .YellowButton:hover {color: var(--orange-blah) !important;} .FullYellowButton:hover {color: var(--yellow) !important;} .WhiteButton:hover {color: var(--white-ish) !important;} #Head nav a {transition-property: background-color, color; transition-duration: var(--anim-duration); transition-timing-function: ease;} #Head nav a:hover, #Head nav a.Active {background: var(--green); color: var(--sand);} @media (max-width: 768px) { #Head nav a:hover {background: transparent; color: var(--dark-blue);} #Head nav a:active {background: rgba(0, 174, 154, 0.1);} #Head nav a.Active {background: rgba(0, 174, 154, 0.15); color: var(--green);} } @media (max-width: 799px) { #Foot {padding-top: 60px; padding-bottom: 160px; flex-direction: column; gap: 24px; align-items: normal; font-weight: bold;} #Foot > * {flex: none;} #Foot, #Foot a {line-height: 130%; font-size: 20px;} #Foot > * {flex: none;} #Foot div:nth-of-type(2) {} #Foot div:nth-of-type(3) {} #Foot img {max-width: 100%;} } @media (min-width: 800px) { #Foot {padding-top: 80px;} } #Foot .Partners {display: flex; justify-content: center; align-items: center; gap: 40px;} #Foot .Partners img {height: 82px; width: auto; filter: brightness(0) invert(1);}.NewsletterModal { position: fixed; top: 0; left: 0; width: 100%; height: 100%; z-index: 9999; display: flex; align-items: center; justify-content: center; } .NewsletterModal.Hidden { display: none; } .NewsletterModal .ModalOverlay { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.5); backdrop-filter: blur(4px); } .NewsletterModal .ModalDialog { position: relative; z-index: 10000; background: var(--sand); border-radius: 8px; padding: 40px; max-width: 500px; width: 90%; box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3); animation: modalSlideIn 0.3s ease-out; } @keyframes modalSlideIn { from { opacity: 0; transform: translateY(-20px); } to { opacity: 1; transform: translateY(0); } } .NewsletterModal .ModalClose { position: absolute; top: 15px; right: 15px; background: none; border: none; cursor: pointer; padding: 8px; color: var(--dark-blue); transition: color 0.2s, transform 0.2s; } .NewsletterModal .ModalClose:hover { color: #000; transform: scale(1.1); } .NewsletterModal .ModalContent { text-align: center; } .NewsletterModal .ModalMessage { font-size: 18px; line-height: 1.6; color: var(--white-ish); margin: 0 0 30px; } .NewsletterModal.ModalSuccess .ModalMessage { color: var(--green); } .NewsletterModal.ModalError .ModalMessage { color: #c53030; } .News { --cols: 3; } .News {padding-top: 66px; padding-bottom: 174px; color: var(--green); display: grid; grid-template-columns: repeat(var(--cols), 1fr); gap: 37px;} .News .Heading {margin-bottom: 0; grid-column: span var(--cols); color: var(--font-color);} .News .Heading::before {background: var(--font-color);} .News article {flex: 0 0 min(394px, 100%);} .News .Image {display: flex; aspect-ratio: 4 / 3; border-radius: 16px; overflow: hidden; margin-bottom: 16px;} .News img {object-fit: cover; object-position: center; width: 100%; height: 100%;} .News date {font-style: italic;} .News h3 {margin-bottom: 4px;} .News .Text, .News .Date {color: var(--font-color);} .News .BtnBox {margin-top: 64px; grid-column: span var(--cols); text-align: center;} .News .Button {color: var(--white-ish); font-size: 16px; padding: 7px 14px;} .News article:nth-child(n+5) {display: none;} .News.ShowAll article:nth-child(n+5) {display: block; animation: slideDown 0.4s ease-out;} @keyframes slideDown {from {opacity: 0; transform: translateY(-20px);} to {opacity: 1; transform: translateY(0);}} .AnalysisButton {background-color: var(--orange-blah); color: var(--dark-blue);} .AnalysisButton:hover {background-color: var(--green);} .LongImage {margin-bottom: 31px; margin-top: 24px;} .LongImage .Note {font-size: 14px; font-style: italic;} @media (max-width: 799px) { .LongImage .Img {display: flex; overflow-x: auto; position: relative; margin-bottom: 30px; scrollbar-width: none; -ms-overflow-style: none;} .LongImage .Img::-webkit-scrollbar {display: none;} .LongImage img {max-height: 421px; width: auto;} .LongImage .Slider {height: 10px; position: relative; margin-bottom: 8px; cursor: pointer; touch-action: none; user-select: none;} .LongImage .Slider::before {content: ''; position: absolute; inset: 0; border-radius: 99px; background: var(--dark-blue); opacity: 0.3;} .LongImage .Slider .Handle {position: absolute; top: 0; bottom: 0; width: var(--handle-width, 30%); left: var(--pos); border-radius: 99px; background: var(--dark-blue);} } @media (min-width: 800px) { .LongImage .Img {display: flex;} .LongImage .Slider {display: none;} .LongImage img {width: 100%; height: auto;} .LongImage .Note {display: none;} } .UsersEvents {margin-top: 12px; margin-bottom: 32px; list-style: none;} .UsersEvents li {display: grid; grid-template-columns: 148px 1fr; gap: 12px; padding-left: 40px; position: relative;} .UsersEvents li + li {margin-top: 17px;} .UsersEvents li::before {position: absolute; left: 0; top: 50%; transform: translateY(-50%); width: 24px; height: 24px; border-radius: 99px; content: ''; background: var(--dark-blue);} .UsersEvents li::after {position: absolute; left: 10px; top: -20px; bottom: -20px; width: 3px; content: ''; background: var(--dark-blue);} .UsersEvents li:first-child::after {top: 50%;} .UsersEvents li:last-child::after {bottom: 50%;} .UsersEvents img {max-width: 148px; height: auto; border-radius: 15px;} @media (min-width: 800px) { .UsersEvents {margin-top: 30px;} .UsersEvents li {grid-template-columns: 300px 1fr; padding-left: 60px; gap: 24px;} .UsersEvents img {max-width: 300px;} .UsersEvents li::before {width: 30px; height: 30px;} .UsersEvents li::after {width: 4px; left: 13px;} } .PeopleWithLives {display: flex; gap: 6px; align-items: stretch; overflow-x: auto; padding-top: 26px; padding-bottom: 39px; list-style: none; scroll-snap-type: x mandatory; scroll-padding-left: calc(var(--container-padding) * 2); scroll-padding-right: calc(var(--container-padding) * 2); padding-left: var(--container-padding); padding-right: var(--container-padding); scrollbar-width: none; -ms-overflow-style: none;} .PeopleWithLives::-webkit-scrollbar {display: none;} .PeopleWithLives li {background: #DED4C3; border-radius: 20px; outline: 3px solid transparent; outline-offset: -3px; flex: 0 0 min(55%, 235px); padding: 27px 15px 15px 15px; position: relative; scroll-snap-align: start; transition-duration: 150ms; transition-property: box-shadow, outline;} .PeopleWithLives li.Active {outline: 3px solid rgba(20, 47, 78, 0.56); box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);} .PeopleWithLives .Portrait {text-align: center; height: 238px; margin-bottom: 8px;} .PeopleWithLives li .Text {text-align: center; --text-size: 14px;} .PeopleWithLives img {object-fit: contain; object-position: center center; width: 100%; height: 100%;} .PeopleWithLives h3 {position: absolute; right: 15px; top: 20px; color: black; font-size: 24px; line-height: 130%;} .UserNeeds {margin-bottom: 77px;} .UserNeeds .Button {background: #142F4E;} .UserNeeds p:has(.Button) {text-align: right;} .UserNeeds .SubHeading {margin-top: 16px; color: #142F4E; max-width: max-content; margin-right: auto; margin-left: 0; font-weight: bold;} .UserNeeds .SubHeading::after {content: ''; display: block; height: 3px; margin-top: 3px; background: #142F4E;} @media (max-width: 799px) { .UserNeeds .Arrows {display: none;} } @media (min-width: 800px) { .UserNeeds .Top {display: flex; justify-content: space-between; align-items: center;} .UserNeeds .Arrows {display: flex; gap: 25px; align-items: flex-end;} .UserNeeds .Arrows button {border: none; background: none; cursor: pointer; transition: opacity 0.2s;} .UserNeeds .Arrows button.hidden {opacity: 0; pointer-events: none;} .UserNeeds .Arrows svg {width: 40px; height: auto;} } .SharedVision {--font-color: #0FAC99;} .SharedVision > .Text {margin-bottom: 10px;} .SharedVision > .Text > :is(p, ul, ol) {color: #00796B;} .VisionPoints {list-style: none; margin-top: 40px; margin-bottom: 24px;} .VisionPoints picture {max-width: 100%; height: auto; margin-bottom: 10px;} .VisionPoints picture img {width: 100%; height: auto;} .VisionPoints li {counter-increment: counter; --font-color: #142F4E; color: #142F4E;} .VisionPoints li + li {margin-top: 20px;} .VisionPoints .Text {--text-size: 14px; --text-line-height: 115%;} .VisionPoints h3 {color: #0FAC99; font-size: 20px; line-height: 130%;} .VisionPoints h3::before {display: flex; align-items: center; justify-content: center; width: 42px; height: 42px; background: url('data:image/svg+xml,'); background-size: 100%; content: counter(counter); font-size: 32px; font-family: var(--macondo); font-weight: normal;} @media (max-width: 799px) { .VisionPoints li:nth-child(1) h3 {margin-left: 5px;} .VisionPoints li:nth-child(1) h3::before {margin-bottom: 18.5px;} .VisionPoints li:nth-child(1) picture {margin-top: -140px;} .VisionPoints li:nth-child(2) h3::before {margin-left: auto; margin-right: 0; margin-bottom: 12px;} .VisionPoints li:nth-child(2) h3 {text-align: right; padding-right: 23px;} .VisionPoints li:nth-child(2) picture {margin-top: -130px;} .VisionPoints li:nth-child(3) h3 {display: flex; gap: 12px; align-items: center; margin-bottom: 10px;} .VisionPoints li:nth-child(4) h3 {display: flex; gap: 9px; align-items: center; margin-left: auto; margin-right: 0; max-width: max-content; text-align: right;} .VisionPoints li:nth-child(4) h3::before {transform: translateY(-20%);} .VisionPoints li:nth-child(4) picture {margin-top: -45px;} .VisionPoints li:nth-child(5) h3 {display: flex; gap: 15px; align-items: start;} .VisionPoints li:nth-child(6) h3 {display: flex; gap: 13px; align-items: start;} .VisionPoints li:nth-child(6) picture {margin-top: -80px;} .VisionPoints li:nth-child(7) {padding-top: 20px;} .VisionPoints li:nth-child(7) h3 {margin-left: auto; margin-right: 0; max-width: max-content; text-align: right; padding-right: 23px;} .VisionPoints li:nth-child(7) h3::before {float: left; margin-top: -20px; margin-right: 5px;} } @media (min-width: 800px) { .VisionPoints li {display: grid; grid-template-columns: 1fr 1fr;} .VisionPoints li + li {margin-top: 70px;} .VisionPoints li .Text {--text-size: 20px;} .VisionPoints li h3 {font-size: 24px;} .VisionPoints li:nth-of-type(2n + 1) picture {order: 2; margin-left: auto;} } @media (min-width: 800px) and (max-width: 1254px) { .VisionPoints li {gap: 15px;} } @media (min-width: 1255px) { .VisionPoints li {display: flex; position: relative;} .VisionPoints li picture {width: 64.5%;} .VisionPoints {position: relative;} .VisionPoints li .Text {position: absolute;} .VisionPoints li:nth-of-type(2n + 2) .Text {right: 0; text-align: right;} .VisionPoints li:nth-child(1) h3, .VisionPoints li:nth-child(1) h3::before {margin-bottom: 14px;} .VisionPoints li:nth-child(1) .Text {max-width: 49%;} .VisionPoints li:nth-child(2) .Text {max-width: 55%;} .VisionPoints li:nth-child(2) h3 {display: flex; justify-content: right; align-items: end; gap: 9px; margin-bottom: 9px;} .VisionPoints li:nth-child(3) h3, .VisionPoints li:nth-child(3) h3::before {margin-bottom: 20px;} .VisionPoints li:nth-child(3) h3 {margin-top: 20px;} .VisionPoints li:nth-child(3) .Text {max-width: 42%;} .VisionPoints li:nth-child(3) picture {max-width: 55%;} .VisionPoints li:nth-child(4) picture {max-width: 50%;} .VisionPoints li:nth-child(4) .Text {max-width: 45%;} .VisionPoints li:nth-child(4) h3 {max-width: 350px; margin-right: 0; margin-left: auto;} .VisionPoints li:nth-child(4) h3::before {margin-left: auto; margin-right: 0;} .VisionPoints li:nth-child(5) h3 {display: flex; align-items: center; gap: 17px; margin-bottom: 14px;} .VisionPoints li:nth-child(5) .Text {max-width: 38%;} .VisionPoints li:nth-child(5) picture {max-width: 60%;} .VisionPoints li:nth-of-type(6) .Text {left: 0; max-width: 50%; text-align: left; bottom: 0;} .VisionPoints li:nth-of-type(6) picture {order: 2; margin-left: auto;} .VisionPoints li:nth-of-type(6) h3, .VisionPoints li:nth-of-type(6) h3::before {margin-bottom: 4px;} .VisionPoints li:nth-of-type(7) picture {order: 1; margin-left: 0;} .VisionPoints li:nth-of-type(7) .Text {right: 0; max-width: 54%; top: 50%; transform: translateY(-50%);} .VisionPoints li:nth-of-type(7) h3::before {margin-bottom: 23px;} .VisionPoints li:nth-of-type(7) h3 {margin-bottom: 14px;} } .ProjectProgress {/*color: var(--white-ish);*/ --font-color: var(--orange);} .TimelineBlock {background: #142F4E; margin-top: 30px; margin-bottom: 15px; padding-bottom: 20px;} .TimelineBlock h3 {padding-top: 10px; padding-bottom: 20px;} .Timeline {list-style: none; display: flex; overflow-x: auto; scroll-snap-type: x mandatory; padding: 0 var(--container-padding) 20px var(--container-padding); scroll-padding-left: var(--container-padding); scroll-padding-right: var(--container-padding); font-size: 14px; scrollbar-width: none; -ms-overflow-style: none;} .Timeline::-webkit-scrollbar {display: none;} .Timeline li {scroll-snap-align: start; border-left: 3px solid var(--white-ish); border-bottom: 5px solid var(--white-ish); position: relative; padding: 4px 13px 13px 8px; min-width: 110px; flex: 0 0 max-content; display: flex; flex-direction: column; justify-content: space-between; white-space: nowrap;} .Timeline li::before {position: absolute; content: ''; left: -1px; bottom: -1px; width: 8px; height: 8px; background: var(--orange); border-radius: 99px; border: 5px solid var(--white-ish); transform: translateX(-50%) translateY(50%);} .Timeline h4 {font-size: 14px; font-weight: 500; color: var(--white-ish);} .Timeline date {color: #EB7E4B; font-style: italic; margin-top: 6px;} .TimelineBlock .Arrows {display: flex; justify-content: space-between;} .TimelineBlock .Arrows button {background: none; border: none; cursor: pointer; transition: opacity 0.2s;} .TimelineBlock .Arrows button.hidden {opacity: 0; pointer-events: none;} @media (min-width: 800px) { .TimelineBlock {padding-top: 30px; margin-bottom: 30px;} .TimelineBlock.AllVisible .Arrows {display: none;} .Timeline h4 {font-size: 16px;} .Timeline li {min-width: 130px; padding: 4px 20px 13px 12px;} } @media (min-width: 1200px) { .TimelineBlock.AllVisible .Timeline {max-width: var(--container-width); margin-left: auto; margin-right: auto;} } .VisionPicture {max-width: 100%; height: auto; text-align: center;} .VisionPicture img {max-width: 100%; height: auto;} .Partners h2 {color: var(--orange); font-family: var(--font-inter); font-size: var(--text-size); font-weight: 600; margin-bottom: 25px;} .Partners h2::after {display: none;} .PList article {display: grid; grid-template-columns: 62px 1fr; gap: 13px 23px; --font-size: 14px;} .PList article > *:not(.Logo, .Name) {grid-column: span 2;} .PList h3 {margin-bottom: 0; font-size: 14px; font-weight: bold; line-height: 130%;} .PList h3 span {display: block;} .PList .Logo {height: 90px;} .PList .Logo img {height: 100%; width: auto;} .PList article:nth-child(2) {--font-color: #142F4E; color: #142F4E;} .PList {display: grid; grid-template-columns: repeat(2, 1fr); gap: 40px 99px; color: var(--green);} @media (max-width: 768px) { .PList {grid-template-columns: 1fr; gap: 60px;} .PList .Logo {height: 80px;} .PList h3 {font-size: 18px; margin-bottom: 20px;} } @media (max-width: 480px) { .PList {gap: 48px;} .PList .Logo {height: 64px;} .PList h3 {font-size: 16px; margin-bottom: 16px;} } @media (min-width: 800px) { .PList {align-items: start;} .PList article {display: flex; flex-wrap: wrap; align-items: flex-start;} .PList article > :not(.Logo, .Name) {flex: 0 0 100%;} } @media (max-width: 1200px) { .History .List {gap: 30px;} /*.History article {flex: 0 0 calc((100% - 30px * 3) / 4);}*/ } @media (max-width: 1024px) { .History .List {gap: 15px;} /*.History article {flex: 0 0 calc((100% - 15px * 2) / 3);}*/ .Public > div:nth-of-type(8) img {left: 0; top: 0;} } @media (max-width: 799px) { .History .Heading {margin-bottom: 24px;} .History .MainText {margin-bottom: 40px;} .History .List {gap: 30px;} .News {padding-top: 30px; padding-bottom: 80px; gap: 30px 15px; display: block;} .News .Heading {margin-bottom: 24px;} .News .Date {height: 60px; font-size: 14px;} .News h3 {font-size: 18px;} .News .BtnBox {margin-top: 40px;} } @media (max-width: 520px) { .News {display: block;} } @media (max-width: 480px) { .History article {flex: 0 0 100%;} } @media (max-width: 799px) { .News article:first-of-type {margin-bottom: 18px;} .News article:first-of-type .Image {margin-bottom: 18px;} .News article:first-of-type h3 {margin-bottom: 7px;} .News article:first-of-type h3 a {font-size: 20px; line-height: 130%;} .News article:first-of-type date {color: #142F4E; font-size: 16px; font-style: italic; margin-bottom: 7px; display: block;} .News article:first-of-type .Text {--text-size: 14px; font-weight: 500;} .News article:not(:first-of-type) + article {margin-top: 18px;} .News article:not(:first-of-type) {display: grid; grid-template-columns: 152px 1fr; text-decoration: none; gap: 17px;} .News article:not(:first-of-type) .Text {display: none;} .News article:not(:first-of-type) h3 a {font-size: 16px; text-decoration: none;} .News article:not(:first-of-type) .Info {display: flex; flex-direction: column; justify-content: space-between;} .News article:not(:first-of-type) date {font-size: 16px; font-style: italic; color: #142F4E;} } @media (min-width: 800px) { .News article {margin-bottom: 18px;} .News article .Image {margin-bottom: 18px;} .News article h3 {margin-bottom: 7px;} .News article h3 a {font-size: 20px; line-height: 130%;} .News article date {color: #142F4E; font-size: 16px; font-style: italic; margin-bottom: 7px; display: block;} .News article .Text {--text-size: 14px; font-weight: 500;} }