:root { --color-flickity-btn: #f04e23; --color-service-menu: hsl(0, 0%, 40%); --color-mobile-menu: hsl(0, 0%, 40%); --color-mobile-menu-text: #fff; --color-sticky-coltwo-status: #f04e23; --color-standard-button: #f04e23; --color-button-black: #303030; --color-megaMenu: #f04e23; --color-megaMenu-level1-icons: #000; --color-megaMenu-level2-icons: #fff; --color-localplan-status-bullhorn: #bcbcbc; --color-localplan-content-box: #bcbcbc; --color-table-active-row: #b9d4ee; --color-announcements-bg: #225c70; --color-languageselector: #f04e23; --color-cookie-banner: #d6d6d6; --color-megaphone-hearing: #969696; --color-focus-color: #000; }

.modal__wrapper, .modal__background { opacity: 0; pointer-events: none; will-change: opacity, transform; backface-visibility: hidden; }

.modal__wrapper--ready, .modal__background--ready { transition-property: opacity, transform; transition-duration: .4s; transition-timing-function: ease-out; }

.modal__wrapper--visible, .modal__background--visible { opacity: 1; pointer-events: auto; transition-timing-function: ease-out; }

.modal__background { position: fixed; top: -100px; bottom: -100px; width: 100%; background: rgba(0, 0, 0, 0.8); }

.modal__background--level0 { z-index: 1000; }

.modal__background--level1 { z-index: 1001; }

.modal__background--level2 { z-index: 1002; }

.modal__background--level3 { z-index: 1003; }

.modal__background--level4 { z-index: 1004; }

.modal__background--level5 { z-index: 1005; }

.modal__background--level6 { z-index: 1006; }

.modal__background--level7 { z-index: 1007; }

.modal__background--level8 { z-index: 1008; }

.modal__background--level9 { z-index: 1009; }

.modal__background--level10 { z-index: 1010; }

.modal__wrapper { position: fixed; left: 50%; top: 50%; width: 85vw; height: calc((9 / 16) * 85vw); transform: translate(-50%, -40%); }

@media (min-aspect-ratio: 1 / 1) { .modal__wrapper { width: 80vw; height: calc((9 / 16) * 80vw); } }

@media (min-aspect-ratio: 16 / 9) { .modal__wrapper { height: 75vh; } }

.modal__wrapper--level0 { z-index: 1001; }

.modal__wrapper--level1 { z-index: 1002; }

.modal__wrapper--level2 { z-index: 1003; }

.modal__wrapper--level3 { z-index: 1004; }

.modal__wrapper--level4 { z-index: 1005; }

.modal__wrapper--level5 { z-index: 1006; }

.modal__wrapper--level6 { z-index: 1007; }

.modal__wrapper--level7 { z-index: 1008; }

.modal__wrapper--level8 { z-index: 1009; }

.modal__wrapper--level9 { z-index: 1010; }

.modal__wrapper--level10 { z-index: 1011; }

.modal__wrapper--visible { transform: translate(-50%, -50%); }

.modal__inner-wrapper { position: relative; width: 100%; height: 100%; }

.modal__close { position: absolute; top: 0; right: 0; bottom: auto; left: auto; border: none; width: 50px; height: 50px; z-index: 1; padding: 0; outline: 0; cursor: pointer; transition: opacity 0.3s ease-in-out; color: #fff; }

.modal__close-icon--1 { position: relative; width: 20px; height: 20px; margin-bottom: 10px; }

.modal__close-icon--1:before, .modal__close-icon--1:after { position: absolute; left: 50%; top: 50%; content: ""; background: white; width: 100%; height: 6%; transform-origin: 50% 50%; }

.modal__close-icon--1:before { transform: translate(-50%, -50%) rotate(-45deg); }

.modal__close-icon--1:after { transform: translate(-50%, -50%) rotate(45deg); }

.modal__close-label { color: white; font-family: 'OpenSans Bold', Verdana, Tahomas, sans-serif; font-weight: 700; }

.modal__content { width: 100%; height: 100%; }