@-webkit-keyframes fadeIn { 0% { opacity: 0 } to { opacity: 1 } } @keyframes fadeIn { 0% { opacity: 0 } to { opacity: 1 } } .fadeIn { -webkit-animation-name: fadeIn; animation-name: fadeIn } @-webkit-keyframes fadeInDown { 0% { opacity: 0; -webkit-transform: translate3d(0,-100%,0); transform: translate3d(0,-100%,0) } to { opacity: 1; -webkit-transform: translateZ(0); transform: translateZ(0) } } @keyframes fadeInDown { 0% { opacity: 0; -webkit-transform: translate3d(0,-100%,0); transform: translate3d(0,-100%,0) } to { opacity: 1; -webkit-transform: translateZ(0); transform: translateZ(0) } } .fadeInDown { -webkit-animation-name: fadeInDown; animation-name: fadeInDown } @-webkit-keyframes fadeInDownBig { 0% { opacity: 0; -webkit-transform: translate3d(0,-2000px,0); transform: translate3d(0,-2000px,0) } to { opacity: 1; -webkit-transform: translateZ(0); transform: translateZ(0) } } @keyframes fadeInDownBig { 0% { opacity: 0; -webkit-transform: translate3d(0,-2000px,0); transform: translate3d(0,-2000px,0) } to { opacity: 1; -webkit-transform: translateZ(0); transform: translateZ(0) } } .fadeInDownBig { -webkit-animation-name: fadeInDownBig; animation-name: fadeInDownBig } @-webkit-keyframes fadeInLeft { 0% { opacity: 0; -webkit-transform: translate3d(-100%,0,0); transform: translate3d(-100%,0,0) } to { opacity: 1; -webkit-transform: translateZ(0); transform: translateZ(0) } } @keyframes fadeInLeft { 0% { opacity: 0; -webkit-transform: translate3d(-100%,0,0); transform: translate3d(-100%,0,0) } to { opacity: 1; -webkit-transform: translateZ(0); transform: translateZ(0) } } .fadeInLeft { -webkit-animation-name: fadeInLeft; animation-name: fadeInLeft } @-webkit-keyframes fadeInLeftBig { 0% { opacity: 0; -webkit-transform: translate3d(-2000px,0,0); transform: translate3d(-2000px,0,0) } to { opacity: 1; -webkit-transform: translateZ(0); transform: translateZ(0) } } @keyframes fadeInLeftBig { 0% { opacity: 0; -webkit-transform: translate3d(-2000px,0,0); transform: translate3d(-2000px,0,0) } to { opacity: 1; -webkit-transform: translateZ(0); transform: translateZ(0) } } .fadeInLeftBig { -webkit-animation-name: fadeInLeftBig; animation-name: fadeInLeftBig } @-webkit-keyframes fadeInRight { 0% { opacity: 0; -webkit-transform: translate3d(100%,0,0); transform: translate3d(100%,0,0) } to { opacity: 1; -webkit-transform: translateZ(0); transform: translateZ(0) } } @keyframes fadeInRight { 0% { opacity: 0; -webkit-transform: translate3d(100%,0,0); transform: translate3d(100%,0,0) } to { opacity: 1; -webkit-transform: translateZ(0); transform: translateZ(0) } } .fadeInRight { -webkit-animation-name: fadeInRight; animation-name: fadeInRight } @-webkit-keyframes fadeInRightBig { 0% { opacity: 0; -webkit-transform: translate3d(2000px,0,0); transform: translate3d(2000px,0,0) } to { opacity: 1; -webkit-transform: translateZ(0); transform: translateZ(0) } } @keyframes fadeInRightBig { 0% { opacity: 0; -webkit-transform: translate3d(2000px,0,0); transform: translate3d(2000px,0,0) } to { opacity: 1; -webkit-transform: translateZ(0); transform: translateZ(0) } } .fadeInRightBig { -webkit-animation-name: fadeInRightBig; animation-name: fadeInRightBig } @-webkit-keyframes fadeInUp { 0% { opacity: 0; -webkit-transform: translate3d(0,100%,0); transform: translate3d(0,100%,0) } to { opacity: 1; -webkit-transform: translateZ(0); transform: translateZ(0) } } @keyframes fadeInUp { 0% { opacity: 0; -webkit-transform: translate3d(0,100%,0); transform: translate3d(0,100%,0) } to { opacity: 1; -webkit-transform: translateZ(0); transform: translateZ(0) } } .fadeInUp { -webkit-animation-name: fadeInUp; animation-name: fadeInUp } @-webkit-keyframes fadeInUpBig { 0% { opacity: 0; -webkit-transform: translate3d(0,2000px,0); transform: translate3d(0,2000px,0) } to { opacity: 1; -webkit-transform: translateZ(0); transform: translateZ(0) } } @keyframes fadeInUpBig { 0% { opacity: 0; -webkit-transform: translate3d(0,2000px,0); transform: translate3d(0,2000px,0) } to { opacity: 1; -webkit-transform: translateZ(0); transform: translateZ(0) } } .fadeInUpBig { -webkit-animation-name: fadeInUpBig; animation-name: fadeInUpBig } @-webkit-keyframes fadeOut { 0% { opacity: 1 } to { opacity: 0 } } @keyframes fadeOut { 0% { opacity: 1 } to { opacity: 0 } } .fadeOut { -webkit-animation-name: fadeOut; animation-name: fadeOut } @-webkit-keyframes fadeOutDown { 0% { opacity: 1 } to { opacity: 0; -webkit-transform: translate3d(0,100%,0); transform: translate3d(0,100%,0) } } @keyframes fadeOutDown { 0% { opacity: 1 } to { opacity: 0; -webkit-transform: translate3d(0,100%,0); transform: translate3d(0,100%,0) } } .fadeOutDown { -webkit-animation-name: fadeOutDown; animation-name: fadeOutDown } @-webkit-keyframes fadeOutDownBig { 0% { opacity: 1 } to { opacity: 0; -webkit-transform: translate3d(0,2000px,0); transform: translate3d(0,2000px,0) } } @keyframes fadeOutDownBig { 0% { opacity: 1 } to { opacity: 0; -webkit-transform: translate3d(0,2000px,0); transform: translate3d(0,2000px,0) } } .fadeOutDownBig { -webkit-animation-name: fadeOutDownBig; animation-name: fadeOutDownBig } @-webkit-keyframes fadeOutLeft { 0% { opacity: 1 } to { opacity: 0; -webkit-transform: translate3d(-100%,0,0); transform: translate3d(-100%,0,0) } } @keyframes fadeOutLeft { 0% { opacity: 1 } to { opacity: 0; -webkit-transform: translate3d(-100%,0,0); transform: translate3d(-100%,0,0) } } .fadeOutLeft { -webkit-animation-name: fadeOutLeft; animation-name: fadeOutLeft } @-webkit-keyframes fadeOutLeftBig { 0% { opacity: 1 } to { opacity: 0; -webkit-transform: translate3d(-2000px,0,0); transform: translate3d(-2000px,0,0) } } @keyframes fadeOutLeftBig { 0% { opacity: 1 } to { opacity: 0; -webkit-transform: translate3d(-2000px,0,0); transform: translate3d(-2000px,0,0) } } .fadeOutLeftBig { -webkit-animation-name: fadeOutLeftBig; animation-name: fadeOutLeftBig } @-webkit-keyframes fadeOutRight { 0% { opacity: 1 } to { opacity: 0; -webkit-transform: translate3d(100%,0,0); transform: translate3d(100%,0,0) } } @keyframes fadeOutRight { 0% { opacity: 1 } to { opacity: 0; -webkit-transform: translate3d(100%,0,0); transform: translate3d(100%,0,0) } } .fadeOutRight { -webkit-animation-name: fadeOutRight; animation-name: fadeOutRight } @-webkit-keyframes fadeOutRightBig { 0% { opacity: 1 } to { opacity: 0; -webkit-transform: translate3d(2000px,0,0); transform: translate3d(2000px,0,0) } } @keyframes fadeOutRightBig { 0% { opacity: 1 } to { opacity: 0; -webkit-transform: translate3d(2000px,0,0); transform: translate3d(2000px,0,0) } } .fadeOutRightBig { -webkit-animation-name: fadeOutRightBig; animation-name: fadeOutRightBig } @-webkit-keyframes fadeOutUp { 0% { opacity: 1 } to { opacity: 0; -webkit-transform: translate3d(0,-100%,0); transform: translate3d(0,-100%,0) } } @keyframes fadeOutUp { 0% { opacity: 1 } to { opacity: 0; -webkit-transform: translate3d(0,-100%,0); transform: translate3d(0,-100%,0) } } .fadeOutUp { -webkit-animation-name: fadeOutUp; animation-name: fadeOutUp } @-webkit-keyframes fadeOutUpBig { 0% { opacity: 1 } to { opacity: 0; -webkit-transform: translate3d(0,-2000px,0); transform: translate3d(0,-2000px,0) } } @keyframes fadeOutUpBig { 0% { opacity: 1 } to { opacity: 0; -webkit-transform: translate3d(0,-2000px,0); transform: translate3d(0,-2000px,0) } } .fadeOutUpBig { -webkit-animation-name: fadeOutUpBig; animation-name: fadeOutUpBig } .animated { -webkit-animation-duration: 1s; animation-duration: 1s; -webkit-animation-fill-mode: both; animation-fill-mode: both } .animated.infinite { -webkit-animation-iteration-count: infinite; animation-iteration-count: infinite } .animated.delay-1s { -webkit-animation-delay: 1s; animation-delay: 1s } .animated.delay-2s { -webkit-animation-delay: 2s; animation-delay: 2s } .animated.delay-3s { -webkit-animation-delay: 3s; animation-delay: 3s } .animated.delay-4s { -webkit-animation-delay: 4s; animation-delay: 4s } .animated.delay-5s { -webkit-animation-delay: 5s; animation-delay: 5s } .animated.fast { -webkit-animation-duration: .8s; animation-duration: .8s } .animated.faster { -webkit-animation-duration: .5s; animation-duration: .5s } .animated.slow { -webkit-animation-duration: 2s; animation-duration: 2s } .animated.slower { -webkit-animation-duration: 3s; animation-duration: 3s } @media(prefers-reduced-motion:reduce),(print) { .animated { -webkit-animation-duration: 1ms!important; animation-duration: 1ms!important; -webkit-animation-iteration-count: 1!important; animation-iteration-count: 1!important; -webkit-transition-duration: 1ms!important; transition-duration: 1ms!important } } :root { --breakpoint-xs: 0; --breakpoint-sm: 576px; --breakpoint-md: 768px; --breakpoint-lg: 992px; --breakpoint-xl: 1200px; --breakpoint-xxl: 1600px; --scrollbar-width: 15px; } @keyframes interactive-map-button-pulse { 0% { box-shadow: 0 0 0 0 rgba(35,54,111,.7); transform: scale(.95) } 70% { box-shadow: 0 0 0 10px rgba(35,54,111,0); transform: scale(1) } to { box-shadow: 0 0 0 0 rgba(35,54,111,0); transform: scale(.95) } } .widget-interactive-map { margin: 32px 0; position: relative } @media(min-width: 992px) { .widget-interactive-map { margin:48px 0 } } .low-resolution .widget-interactive-map { margin: 32px auto; width: 75% } .widget-interactive-map>figure { margin: 0; position: relative } .widget-interactive-map>figure:before { background-color: inherit; content: ""; height: 100%; margin-left: calc(-50vw + 50%); margin-right: calc(-50vw + 50%); position: absolute; width: 100vw; z-index: -1 } .widget-interactive-map>figure img { display: block; height: auto; width: 100% } .widget-interactive-map>figure .btn { box-shadow: 0 0 0 0 #23366f; font-family: ZurichSans-SemiBold,Arial,sans-serif; font-size: 8px; height: 16px; left: 0; padding: 0; position: absolute; top: 0; transform: scale(1); transition: none; width: 16px } @media(min-width: 576px) { .widget-interactive-map>figure .btn { animation-duration:2s; animation-iteration-count: infinite; animation-name: interactive-map-button-pulse; font-size: 15px; height: 30px; width: 30px } } @media(min-width: 992px) { .widget-interactive-map>figure .btn { font-size:20px; height: 40px; width: 40px } } @media(min-width: 1200px) { .widget-interactive-map>figure .btn { font-size:24px; height: 48px; width: 48px } } .widget-interactive-map>figure .btn.btn--primary-dark:active,.widget-interactive-map>figure .btn.btn--primary-dark:focus { background-color: #23366f } .low-resolution .widget-interactive-map>figure .btn { font-size: 20px; height: 40px; width: 40px } .widget-interactive-map>figure .btn+.btn { margin: 0 } @media(min-width: 576px) { .widget-interactive-map>figure .btn:hover { animation:none; background-color: #23366f; box-shadow: 0 6px 11px 0 rgba(35,54,111,.5); transform: scale(1.5); transform-origin: center } } @media(min-width: 992px) { .widget-interactive-map>figure .btn:hover { box-shadow:0 9px 18px 0 rgba(35,54,111,.5) } } .widget-interactive-map>figure .btn.is-active { animation: none; background-color: #23366f; box-shadow: 0 3px 4px 0 rgba(35,54,111,.5); transform: scale(1.5); transform-origin: center } @media(min-width: 576px) { .widget-interactive-map>figure .btn.is-active { box-shadow:0 6px 11px 0 rgba(35,54,111,.5) } } @media(min-width: 992px) { .widget-interactive-map>figure .btn.is-active { box-shadow:0 9px 18px 0 rgba(35,54,111,.5) } } .widget-interactive-map-stories { display: flex } @media(max-width: 575px) { .widget-interactive-map-stories { margin:0 calc(-50vw - -50%); overflow: auto; scroll-snap-type: x mandatory; scrollbar-width: none; width: 100vw } .widget-interactive-map-stories::-webkit-scrollbar { display: none } } @media(min-width: 992px) { .widget-interactive-map-stories { flex-direction:column; height: 100%; justify-content: center; overflow: visible; pointer-events: none; position: absolute; top: 0; width: 100%; } } @media(min-width: 576px)and (max-width:991px) { .widget-interactive-map-stories { height:0; overflow: hidden; transition: height .5s ease-in-out } } .widget-interactive-map-stories article { background-color: #fff; flex: none; padding: 0 15px; position: relative; width: 100vw } @media(max-width: 575px) { .widget-interactive-map-stories article { animation:none; scroll-snap-align: start } } @media(min-width: 576px)and (max-width:991px) { .widget-interactive-map-stories article { height:max-content } } @media(min-width: 576px) { .widget-interactive-map-stories article { display:none; padding: 0; width: 100% } .widget-interactive-map-stories article.animated { animation-duration: .4s } } @media(min-width: 992px) { .widget-interactive-map-stories article { align-self:flex-end; border-radius: 8px; box-shadow: 10px 10px 20px 0 rgba(0,0,0,.3); max-height: calc(100% - 64px); overflow: hidden; pointer-events: all; position: absolute; width: 60%; } .widget-interactive-map-stories article:after,.widget-interactive-map-stories article:before { background: linear-gradient(180deg,#fff 0,#fff 50%,hsla(0,0%,100%,0)); content: ""; display: block; height: 40px; left: 0; position: absolute; right: var(--scrollbar-width); width: calc(100% - var(--scrollbar-width)) } .low-resolution .widget-interactive-map-stories article:after,.low-resolution .widget-interactive-map-stories article:before { height: 32px } .widget-interactive-map-stories article:before { top: 0 } .widget-interactive-map-stories article:after { bottom: 0; transform: rotate(180deg) } } @media(min-width: 1200px) { .widget-interactive-map-stories article { max-height:calc(100% - 112px); width: 50% } } .low-resolution .widget-interactive-map-stories article { max-height: calc(100% - 64px); width: 60% } .widget-interactive-map-stories article.is-active { display: flex } .widget-interactive-map-stories article>.close { display: none } @media(min-width: 576px) { .widget-interactive-map-stories article>.close { display:inline-flex; position: absolute; right: calc(var(--scrollbar-width)/2); top: 0; z-index: 1 } } @media(min-width: 576px)and (max-width:991px) { .widget-interactive-map-stories article>.close { top:28px } } .widget-interactive-map-story { padding: 40px 0 } @media(max-width: 575px) { .widget-interactive-map-story { margin:0 auto; overflow: hidden; padding: 16px 0; text-align: center } } @media(min-width: 576px)and (max-width:991px) { .widget-interactive-map-story { grid-column-gap:30px; grid-row-gap: 0; display: grid; grid-template-columns: 210px 1fr; grid-template-rows: repeat(4,auto) } } @media(min-width: 992px) { .widget-interactive-map-story { max-height:100%; overflow: auto; padding: 40px; } } .low-resolution .widget-interactive-map-story { padding: 32px 40px 32px 32px } .widget-interactive-map-story-topline { align-items: flex-start; display: flex; font-family: ZurichSans-Bold,Arial,sans-serif; font-size: 22px; line-height: 1.3; margin-bottom: 8px } @media(max-width: 575px) { .widget-interactive-map-story-topline { justify-content:center } } @media(min-width: 576px)and (max-width:991px) { .widget-interactive-map-story-topline { grid-area:1/1/2/3 } } @media(min-width: 576px) { .widget-interactive-map-story-topline { font-size:24px; margin-bottom: 32px } } @media(min-width: 992px) { .widget-interactive-map-story-topline { font-size:28px } } .low-resolution .widget-interactive-map-story-topline { font-size: 24px; margin-bottom: 24px } .widget-interactive-map-story-topline .badge { border-radius: 50%; font-family: ZurichSans-SemiBold,Arial,sans-serif; font-size: 12px; height: 24px; line-height: 24px; margin-right: 12px; min-width: 24px } @media(min-width: 576px)and (max-width:991px) { .widget-interactive-map-story-topline .badge { margin-top:2px } } @media(min-width: 576px) { .widget-interactive-map-story-topline .badge { font-size:12px; height: 24px; line-height: 24px; min-width: 24px } } @media(min-width: 992px) { .widget-interactive-map-story-topline .badge { font-size:18px; height: 36px; line-height: 36px; min-width: 36px } } .low-resolution .widget-interactive-map-story-topline .badge { font-size: 16px; height: 32px; line-height: 32px; min-width: 32px } @media(max-width: 575px) { .widget-interactive-map-story-headline { font-size:24px; margin-bottom: 16px; margin-top: 0 } } .widget-interactive-map-story figure { border-radius: 50%; float: left; height: 120px; margin-bottom: 16px; margin-right: 24px; margin-top: 0; overflow: hidden; width: 120px } @media(max-width: 575px) { .widget-interactive-map-story figure { float:none; margin-bottom: 8px; margin-left: auto; margin-right: auto } } @media(min-width: 576px)and (max-width:991px) { .widget-interactive-map-story figure { grid-area:2/1/3/2; margin-right: 0 } } @media(min-width: 576px) { .widget-interactive-map-story figure { height:210px; width: 210px } } @media(min-width: 992px) { .widget-interactive-map-story figure { height:130px; width: 130px } } @media(min-width: 1200px) { .widget-interactive-map-story figure { height:160px; width: 160px } } .low-resolution .widget-interactive-map-story figure { height: 130px; margin-bottom: 8px; width: 130px } .widget-interactive-map-story figure img { height: 100%; object-fit: cover; width: 100% } .widget-interactive-map-story h5 { font-size: 16px; line-height: 1.4; margin-bottom: 24px } @media(max-width: 575px) { .widget-interactive-map-story h5 { margin-bottom:8px; text-align: center } .widget-interactive-map-story h5 strong { display: block } } @media(min-width: 576px)and (max-width:991px) { .widget-interactive-map-story h5 { grid-area:3/1/4/2 } } .widget-interactive-map-story-copy { font-size: 18px } @media(max-width: 575px) { .widget-interactive-map-story-copy { display:none } } @media(min-width: 576px)and (max-width:991px) { .widget-interactive-map-story-copy { grid-area:2/2/5/3 } } @media(min-width: 992px) { .widget-interactive-map-story-copy { font-size:20px } } .low-resolution .widget-interactive-map-story-copy { font-size: 18px } .widget-interactive-map-overlay { background-color: #fff; display: none; height: 100vh; left: 0; overflow-y: auto; padding: 40px 16px 0; position: fixed; top: 0; width: 100vw; z-index: 1010 } .widget-interactive-map-overlay.visible { display: block } .widget-interactive-map-overlay .widget-interactive-map-story-topline { margin-bottom: 16px } .widget-interactive-map-overlay .widget-interactive-map-story figure { height: 220px; width: 220px } .widget-interactive-map-overlay .widget-interactive-map-story h5 { margin-bottom: 32px } .widget-interactive-map-overlay .widget-interactive-map-story-copy { display: block; text-align: left } .widget-interactive-map-overlay .close { background-color: hsla(0,0%,100%,.8); position: fixed; right: 0; top: 0; z-index: 1012 } .widget-interactive-map-indicator { display: flex; justify-content: center } .widget-interactive-map-indicator span { background-color: #a6adaf; border-radius: 50%; height: 8px; margin: 4px; width: 8px } .widget-interactive-map-indicator span.active { background-color: #2167ae } .sr-only { clip: rect(0 0 0 0); border: 0; height: 1px; margin: -1px; overflow: hidden; padding: 0; position: absolute; width: 1px; }