@charset "UTF-8"; /** Theme Name: REAP Author: VisionSharp Version: 1.0.0 */ @import "https://use.typekit.net/skt2lyz.css"; @import url(node_modules/@awesome.me/kit-9fdce9037b/icons/css/all.min.css); :root { --colour-white: #ffffff; --colour-black: #000000; --colour-darkgray: #2A2A2A; --colour-darkblue: #003356; --colour-blue: #006A94; --colour-yellow: #D1DC00; --colour-lightgray: #DEDEDE; --colour-ghostwhite: #F8F8F8; --colour-beige: #E2DCD4; --colour-darknavy: #023253; --colour-teal: #006891; } /*** The new CSS reset - version 1.8.4 (last updated 14.2.2023) GitHub page: https://github.com/elad2412/the-new-css-reset ***/ /* Remove all the styles of the "User-Agent-Stylesheet", except for the 'display' property - The "symbol *" part is to solve Firefox SVG sprite bug */ *:where(:not(html):not(iframe):not(canvas):not(img):not(svg):not(video):not(audio):not(svg *):not(symbol *)) { all: unset; display: revert; } /* Preferred box-sizing value */ *, *::before, *::after { box-sizing: border-box; } /* Reapply the pointer cursor for anchor tags */ a, button { cursor: revert; } /* Remove list styles (bullets/numbers) */ ol, ul, menu { list-style: none; } /* For images to not be able to exceed their container */ img { max-inline-size: 100%; max-block-size: 100%; } /* removes spacing between cells in tables */ table { border-collapse: collapse; } /* Safari - solving issue when using user-select:none on the text input doesn't working */ input, textarea { -webkit-user-select: auto; } /* revert the 'white-space' property for textarea elements on Safari */ textarea { white-space: revert; } /* minimum style to allow to style meter element */ meter { -webkit-appearance: revert; appearance: revert; } /* preformatted text - use only for this feature */ :where(pre) { all: revert; } /* reset default text opacity of input placeholder */ ::placeholder { color: unset; } /* remove default dot (•) sign */ ::marker { content: initial; } /* fix the feature of 'hidden' attribute. display:revert; revert to element instead of attribute */ :where([hidden]) { display: none; } /* revert for bug in Chromium browsers - fix for the content editable attribute will work properly. - webkit-user-select: auto; added for Safari in case of using user-select:none on wrapper element*/ :where([contenteditable]:not([contenteditable="false"])) { -moz-user-modify: read-write; -webkit-user-modify: read-write; overflow-wrap: break-word; -webkit-line-break: after-white-space; -webkit-user-select: auto; } /* apply back the draggable feature - exist only in Chromium and Safari */ :where([draggable="true"]) { -webkit-user-drag: element; } /* Revert Modal native behavior */ :where(dialog:modal) { all: revert; } html { scroll-behavior: smooth; font-size: 7px; } @media (min-width: 992px) { html { font-size: 8px; } } .body, .wp-block-post-content { font-family: "neulis-sans", sans-serif !important; font-weight: 300 !important; font-style: normal !important; font-size: 2rem !important; line-height: 2 !important; color: var(--colour-darkgray) !important; } html :where(.wp-block) { width: 100%; max-width: 100%; } .background { position: absolute; top: 0; width: 100%; height: 100%; z-index: 0; background-position: top; background-size: 100%; background-repeat: no-repeat; display: none; } @media (min-width: 992px) { .background { display: block; } } .background_mobile { position: absolute; top: 0; width: 100%; height: 100%; z-index: 0; background-position: top right; background-repeat: no-repeat; } @media (min-width: 992px) { .background_mobile { display: none; } } .background_animation { position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 0; display: none; } @media (min-width: 992px) { .background_animation-animate { display: block !important; } .background_animation-animate path, .background_animation-animate line { stroke-dasharray: 1000; stroke-dashoffset: 1000; animation: svg-dash 4s linear forwards; } .background_animation-animate-scroll { display: block !important; } .background_animation-animate-scroll path, .background_animation-animate-scroll line { stroke-dasharray: 1000; stroke-dashoffset: 0; animation: svg-dash-reverse 2s linear forwards; } } .background_animation_mobile { position: absolute; left: 0; width: 100%; height: 100%; z-index: 0; top: 0; background-size: 39.3rem; background-repeat: no-repeat; background-position: top right; } @media (min-width: 992px) { .background_animation_mobile { display: none; } } .background_shape { background-image: url("imgs/error404.svg"); background-size: 100%; background-repeat: no-repeat; } .page_title { font-size: 4rem; font-weight: 400; } .page_title__large { font-size: 6rem; } .main { padding-top: 10rem; position: relative; } @media (min-width: 992px) { .main { padding-top: 12rem; } } .container { margin-right: auto; margin-left: auto; max-width: 1300px; width: 100%; padding-right: 2.0rem; padding-left: 2.0rem; } @media (min-width: 992px) { .container { padding-right: 20px; padding-left: 20px; } } .container__narrow { max-width: 1000px; } .btn, .bbpress-wrapper .button.submit, .bbpress-wrapper .subscription-toggle { font-size: 2rem; line-height: 1; font-weight: 400; background-color: var(--colour-white); color: var(--colour-darkgray); padding: 2.1rem 1rem 1.9rem 2rem; border-radius: 0.5rem; position: relative; margin-right: 1.9rem; display: inline-block; z-index: 2; cursor: pointer; } @media (max-width: 992px) { .btn, .bbpress-wrapper .button.submit, .bbpress-wrapper .subscription-toggle { font-size: 1.8rem; } } .btn-full-width { width: 100%; } .btn:after, .bbpress-wrapper .button.submit:after, .bbpress-wrapper .subscription-toggle:after { content: ""; position: absolute; top: 0; right: -1.6rem; height: 100%; width: 2.2rem; background-image: url("imgs/btn.svg"); background-size: 100% 100%; transition-property: all; transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); transition-duration: 150ms; } .btn-small { font-size: 1.6rem; padding-top: 1.8rem; padding-bottom: 1.5rem; padding-left: 1rem; padding-right: 6.2rem !important; } .btn-small:before { top: calc(50% - 1.45rem) !important; height: 2.9rem !important; width: 3.2rem !important; } .btn-lightgray { background-color: var(--colour-lightgray); } .btn-lightgray:after { background-image: url("imgs/btn-lightgray.svg"); } .btn-darkblue, .bbpress-wrapper .button.submit, .bbpress-wrapper .subscription-toggle { background-color: var(--colour-darkblue); color: var(--colour-white); } .btn-darkblue:after, .bbpress-wrapper .button.submit:after, .bbpress-wrapper .subscription-toggle:after { background-image: url("imgs/btn-darkblue.svg"); } .btn-yellow { background-color: var(--colour-yellow); color: var(--colour-darkgray); } .btn-yellow:after { background-image: url("imgs/btn-yellow.svg"); } .btn-group-main, .bbpress-wrapper .button.submit, .bbpress-wrapper .subscription-toggle { background-color: var(--colour-group-main); color: var(--colour-white); } .btn-group-accent { background-color: var(--colour-group-accent); color: var(--colour-white); } .btn-animate, .bbpress-wrapper .button.submit, .bbpress-wrapper .subscription-toggle { padding-right: 8.5rem; transition-property: all; transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); transition-duration: 150ms; } .btn-animate:before, .bbpress-wrapper .button.submit:before, .bbpress-wrapper .subscription-toggle:before { content: ""; position: absolute; top: calc(50% - 1.6rem); right: 0; height: 3.2rem; width: 3.6rem; background-image: url("imgs/btn-arrow.svg"); background-size: cover; background-repeat: no-repeat; z-index: 1; transition-property: all; transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); transition-duration: 150ms; } .btn-animate:hover:before, .bbpress-wrapper .button.submit:hover:before, .bbpress-wrapper .subscription-toggle:hover:before { transform: scale(1.5); } .btn-accept:before { background-image: url("imgs/btn-accept.svg"); } .btn-decline:before { background-image: url("imgs/btn-decline.svg"); } .btn-yellow:before { background-image: url("imgs/btn-arrow_darkblue.svg"); } .btn-user { padding-right: 5.5rem; } .btn-user:before { background-image: url("imgs/btn-user.svg") !important; } .btn-edit { width: 6rem; height: 5rem; background-size: 100% 100%; background-repeat: no-repeat; } .btn-delete { width: 6rem; height: 5rem; background-size: 100% 100%; background-repeat: no-repeat; } .btn-dropdown { position: relative; cursor: pointer; } .btn-dropdown-content { display: none; position: absolute; top: 100%; left: 0; width: 100%; } .btn-dropdown-content ul { margin-top: 0.6rem; width: 100%; background: white; border-radius: .5rem; border: 1px solid var(--colour-lightgray); } .btn-dropdown-content ul li a { display: flex; padding: 1rem 2rem; transition-property: all; transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); transition-duration: 150ms; color: var(--colour-darkgray); } .btn-dropdown-content ul li a:hover { color: var(--colour-darkblue); } .btn-dropdown-content ul li:first-child { padding-top: 1rem; } .btn-dropdown-content ul li:last-child { padding-bottom: 1rem; } .btn-dropdown:hover .btn-dropdown-content { display: block; } @keyframes svg-dash { to { stroke-dashoffset: 0; } } @keyframes svg-dash-reverse { to { stroke-dashoffset: 1000; } } .mobile { display: block; } @media (min-width: 992px) { .mobile { display: none; } } .desktop { display: none; } @media (min-width: 992px) { .desktop { display: block; } } .burger { z-index: 9999; height: 5rem; width: 5rem; transition: all .3s ease; cursor: pointer; position: relative; margin-top: -0.7rem; } .burger_top, .burger_middle, .burger_bottom { position: absolute; background: #006A94; border: none; height: 4px; width: 50%; left: 50%; transform: translateX(-50%); transition: all .3s ease; border-radius: 4px; } .burger_top { top: 17px; } .burger_middle { top: 27px; } .burger_bottom { top: 37px; } .burger-active .burger_top { transform: translateY(11px) translateX(-50%) rotate(45deg); background: #006A94; } .burger-active .burger_middle { opacity: 0; background: #006A94; } .burger-active .burger_bottom { transform: translateY(-9px) translateX(-50%) rotate(-45deg); background: #006A94; } .position-relative { position: relative; } abbr.required { text-decoration: none; color: darkred; font-size: 2.5rem; } .scroll-target-element { scroll-margin-top: 12rem; } .scroll-target-element-lg { scroll-margin-top: 15rem; } .z-0 { z-index: 0; } .z-1 { z-index: 1; } .z-2 { z-index: 2; } .z-3 { z-index: 3; } .z-4 { z-index: 4; } .z-5 { z-index: 5; } .z-6 { z-index: 6; } .z-7 { z-index: 7; } .z-8 { z-index: 8; } .z-9 { z-index: 9; } .z-10 { z-index: 10; } .z-11 { z-index: 11; } .z-12 { z-index: 12; } .z-13 { z-index: 13; } .z-14 { z-index: 14; } .z-15 { z-index: 15; } .z-16 { z-index: 16; } .z-17 { z-index: 17; } .z-18 { z-index: 18; } .z-19 { z-index: 19; } .z-20 { z-index: 20; } .z-21 { z-index: 21; } .z-22 { z-index: 22; } .z-23 { z-index: 23; } .z-24 { z-index: 24; } .z-25 { z-index: 25; } .z-26 { z-index: 26; } .z-27 { z-index: 27; } .z-28 { z-index: 28; } .z-29 { z-index: 29; } .z-30 { z-index: 30; } .z-31 { z-index: 31; } .z-32 { z-index: 32; } .z-33 { z-index: 33; } .z-34 { z-index: 34; } .z-35 { z-index: 35; } .z-36 { z-index: 36; } .z-37 { z-index: 37; } .z-38 { z-index: 38; } .z-39 { z-index: 39; } .z-40 { z-index: 40; } .z-41 { z-index: 41; } .z-42 { z-index: 42; } .z-43 { z-index: 43; } .z-44 { z-index: 44; } .z-45 { z-index: 45; } .z-46 { z-index: 46; } .z-47 { z-index: 47; } .z-48 { z-index: 48; } .z-49 { z-index: 49; } .z-50 { z-index: 50; } .z-51 { z-index: 51; } .z-52 { z-index: 52; } .z-53 { z-index: 53; } .z-54 { z-index: 54; } .z-55 { z-index: 55; } .z-56 { z-index: 56; } .z-57 { z-index: 57; } .z-58 { z-index: 58; } .z-59 { z-index: 59; } .z-60 { z-index: 60; } .z-61 { z-index: 61; } .z-62 { z-index: 62; } .z-63 { z-index: 63; } .z-64 { z-index: 64; } .z-65 { z-index: 65; } .z-66 { z-index: 66; } .z-67 { z-index: 67; } .z-68 { z-index: 68; } .z-69 { z-index: 69; } .z-70 { z-index: 70; } .z-71 { z-index: 71; } .z-72 { z-index: 72; } .z-73 { z-index: 73; } .z-74 { z-index: 74; } .z-75 { z-index: 75; } .z-76 { z-index: 76; } .z-77 { z-index: 77; } .z-78 { z-index: 78; } .z-79 { z-index: 79; } .z-80 { z-index: 80; } .z-81 { z-index: 81; } .z-82 { z-index: 82; } .z-83 { z-index: 83; } .z-84 { z-index: 84; } .z-85 { z-index: 85; } .z-86 { z-index: 86; } .z-87 { z-index: 87; } .z-88 { z-index: 88; } .z-89 { z-index: 89; } .z-90 { z-index: 90; } .z-91 { z-index: 91; } .z-92 { z-index: 92; } .z-93 { z-index: 93; } .z-94 { z-index: 94; } .z-95 { z-index: 95; } .z-96 { z-index: 96; } .z-97 { z-index: 97; } .z-98 { z-index: 98; } .z-99 { z-index: 99; } .z-100 { z-index: 100; } .bg-white { background-color: white; } .form-theme input:not([type="checkbox"]):not([type="button"]), #bbpress-forums form input:not([type="checkbox"]):not([type="button"]), .form-theme textarea, #bbpress-forums form textarea { font-size: 2rem !important; background-color: #F3F3F3; border-radius: 5px; font-weight: 400; padding: 1rem 3rem; border: 1px solid #707070; width: 100%; min-height: unset !important; height: unset !important; } .form-theme input[type="checkbox"], #bbpress-forums form input[type="checkbox"] { appearance: none; height: 3rem; } .form-theme input[type="checkbox"]:before, #bbpress-forums form input[type="checkbox"]:before { content: ""; display: inline-block; width: 3rem; height: 3rem; background-color: #F3F3F3; border: 1px solid #707070; margin-right: 1.8rem; border-radius: 5px; } @media (min-width: 992px) { .form-theme input[type="checkbox"]:before, #bbpress-forums form input[type="checkbox"]:before { margin-right: 1.5rem; } } .form-theme input[type="checkbox"]:checked:before, #bbpress-forums form input[type="checkbox"]:checked:before { content: "\f00c"; font-family: "Font Awesome 6 Pro"; font-weight: 900; display: flex; align-items: center; justify-content: center; font-size: 1.8rem; } .form-theme select, #bbpress-forums form select { font-size: 2rem; background-color: #F3F3F3; border-radius: 5px; font-weight: 400; padding: 1rem 2rem; border: 1px solid #707070; width: 100%; min-height: unset !important; height: unset !important; position: relative; background-image: url("imgs/hex-dropdown.svg"); background-size: 3rem; background-repeat: no-repeat; background-position: right 2rem center; } .form-theme__search { display: flex; align-items: center; } .form-theme__search_label { font-weight: 400; margin-right: 2rem; } .form-theme__search--input { background-color: white; font-weight: 400; line-height: 1; padding: 2rem; border-radius: 5px; height: 6.8rem; width: auto; max-width: calc(100% - 5.2rem); } .form-theme__search--input::placeholder { color: #A5A5A5; } .form-theme__search--button { background-image: url(imgs/submit-search.svg); background-size: cover; background-repeat: no-repeat; height: 6.8rem; text-indent: -9999px; width: 6rem; margin-left: -1rem; cursor: pointer; } .input-boolean { border-radius: .5rem; display: flex; align-items: center; margin-top: 1rem; margin-bottom: 1rem; } .input-boolean__label { cursor: pointer; position: relative; padding-left: 8rem; padding-top: 0.5rem; font-weight: 400; display: block; line-height: 1.2; font-size: 1.8rem; } @media (min-width: 992px) { .input-boolean__label { font-size: 2rem; } } .input-boolean__label:before { content: ""; position: absolute; cursor: pointer; height: 3.7rem; top: 0; left: 0; right: 0; bottom: 0; background-image: url(imgs/hex-checkbox-background.svg); background-repeat: no-repeat; -webkit-transition: .4s; transition: .4s; } .input-boolean__label:after { position: absolute; content: ""; height: 2.686rem; width: 3.02rem; top: 0.5rem; left: 6px; bottom: 4px; -webkit-mask-image: url(imgs/hex-checkbox.svg); mask-image: url(imgs/hex-checkbox.svg); -webkit-transition: .4s; transition: .4s; background-color: #DC2C00; } .input-boolean__input { display: none !important; } .input-boolean__input:checked + .input-boolean__label:after { -webkit-transform: translateX(1.4rem); -ms-transform: translateX(1.4rem); transform: translateX(1.4rem); background-color: green; } .grid-1 { width: 100%; display: grid; grid-template-columns: repeat(1, 1fr); grid-gap: 3rem; } .grid-2 { width: 100%; display: grid; grid-template-columns: repeat(2, 1fr); grid-gap: 3rem; } @media (min-width: 992px) { .grid-lg-2 { width: 100%; display: grid; grid-template-columns: repeat(2, 1fr); grid-gap: 3rem; } } .grid-3 { width: 100%; display: grid; grid-template-columns: repeat(3, 1fr); grid-gap: 3rem; } @media (min-width: 992px) { .grid-lg-3 { width: 100%; display: grid; grid-template-columns: repeat(3, 1fr); grid-gap: 3rem; } } .grid-4 { width: 100%; display: grid; grid-template-columns: repeat(4, 1fr); grid-gap: 3rem; } @media (min-width: 992px) { .grid-lg-4 { width: 100%; display: grid; grid-template-columns: repeat(4, 1fr); grid-gap: 3rem; } } .gform_wrapper.gravity-theme .gfield-choice-input + label { max-width: unset !important; } .gform_fileupload_rules { display: none !important; } .gform_confirmation_wrapper { width: 100%; max-width: 102.4rem; margin-left: auto; margin-right: auto; text-align: center; } .gform_wrapper.gravity-theme .gfield textarea.large { height: 212px; } @media (min-width: 992px) { .gform_wrapper.gravity-theme .gfield textarea.large { height: 288px; } } .gform_wrapper { width: 100%; max-width: 102.4rem; margin-left: auto; margin-right: auto; } .gform_wrapper .gform_title { font-size: 5rem; line-height: 1.4; font-weight: 400; margin-bottom: 5rem; } .gform_wrapper.gform_wrapper.gravity-theme .gfield_label { font-weight: 400; font-size: 1.8rem; line-height: 1; margin-bottom: 1rem; } @media (min-width: 992px) { .gform_wrapper.gform_wrapper.gravity-theme .gfield_label { font-size: 2rem; margin-bottom: 2rem; } } .gform_wrapper.gform_wrapper.gravity-theme .checkbox-noclick-label label { cursor: default; } .gform_wrapper.gform_wrapper.gravity-theme .gfield_description { line-height: normal; } .gform_wrapper.gform_wrapper.gravity-theme #imagePreview { width: 17.7rem; height: 17.7rem; border-radius: 5px; } @media (min-width: 992px) { .gform_wrapper.gform_wrapper.gravity-theme #imagePreview { width: 20rem; height: 20rem; } } .gform_wrapper.gform_wrapper.gravity-theme .gfield--input-type-time .ginput_complex { align-items: center; } .gform_wrapper.gform_wrapper.gravity-theme .gfield--type-fileupload .gfield_description { padding-top: 0; padding-bottom: 1rem; } .gform_wrapper.gform_wrapper.gravity-theme .ginput_container_time { flex-basis: unset; max-width: unset; min-width: unset; } .gform_wrapper.gform_wrapper.gravity-theme .preview-container { width: 17.7rem; height: 17.7rem; background-color: #F3F3F3; background-size: cover; border: 1px solid #707070; border-radius: 5px; cursor: pointer; transition-property: all; transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); transition-duration: 150ms; } .gform_wrapper.gform_wrapper.gravity-theme .preview-container img { object-fit: cover; object-position: center; } .gform_wrapper.gform_wrapper.gravity-theme .preview-container:hover { transform: scale(1.05); } @media (min-width: 992px) { .gform_wrapper.gform_wrapper.gravity-theme .preview-container { width: 20rem; height: 20rem; } } .gform_wrapper.gform_wrapper.gravity-theme .gchoice { display: flex; align-items: center; cursor: pointer; } .gform_wrapper.gform_wrapper.gravity-theme .gchoice label { width: 100%; font-weight: 400; font-size: 1.4rem; line-height: 1.42; } .gform_wrapper.gform_wrapper.gravity-theme .gchoice label a { color: var(--colour-darkblue); text-decoration: underline; } .gform_wrapper.gform_wrapper.gravity-theme .gchoice label:hover { opacity: 0.8; } @media (min-width: 992px) { .gform_wrapper.gform_wrapper.gravity-theme .gchoice label { font-size: 2rem; line-height: 1.42; } } .gform_wrapper.gform_wrapper.gravity-theme .gfield input[type="text"], .gform_wrapper.gform_wrapper.gravity-theme .gfield input[type="datetime-local"], .gform_wrapper.gform_wrapper.gravity-theme .gfield input[type="number"], .gform_wrapper.gform_wrapper.gravity-theme .gfield input[type="email"], .gform_wrapper.gform_wrapper.gravity-theme .gfield input[type="password"], .gform_wrapper.gform_wrapper.gravity-theme .gfield input[type="url"], .gform_wrapper.gform_wrapper.gravity-theme .gfield select, .gform_wrapper.gform_wrapper.gravity-theme .gfield textarea { background-color: #F3F3F3; border-radius: 5px; font-weight: 400; font-size: 1.6rem; padding: 1rem 2rem; border: 1px solid #707070; width: 100%; } @media (min-width: 992px) { .gform_wrapper.gform_wrapper.gravity-theme .gfield input[type="text"], .gform_wrapper.gform_wrapper.gravity-theme .gfield input[type="datetime-local"], .gform_wrapper.gform_wrapper.gravity-theme .gfield input[type="number"], .gform_wrapper.gform_wrapper.gravity-theme .gfield input[type="email"], .gform_wrapper.gform_wrapper.gravity-theme .gfield input[type="password"], .gform_wrapper.gform_wrapper.gravity-theme .gfield input[type="url"], .gform_wrapper.gform_wrapper.gravity-theme .gfield select, .gform_wrapper.gform_wrapper.gravity-theme .gfield textarea { font-size: 2rem; padding-left: 3rem; padding-right: 3rem; } } .gform_wrapper.gform_wrapper.gravity-theme .gfield input[type="text"]::placeholder, .gform_wrapper.gform_wrapper.gravity-theme .gfield input[type="datetime-local"]::placeholder, .gform_wrapper.gform_wrapper.gravity-theme .gfield input[type="number"]::placeholder, .gform_wrapper.gform_wrapper.gravity-theme .gfield input[type="email"]::placeholder, .gform_wrapper.gform_wrapper.gravity-theme .gfield input[type="password"]::placeholder, .gform_wrapper.gform_wrapper.gravity-theme .gfield input[type="url"]::placeholder, .gform_wrapper.gform_wrapper.gravity-theme .gfield select::placeholder, .gform_wrapper.gform_wrapper.gravity-theme .gfield textarea::placeholder { color: rgba(42, 42, 42, 0.5); } .gform_wrapper.gform_wrapper.gravity-theme .gfield .ginput_container_select { position: relative; z-index: 2; background-color: #F3F3F3; } .gform_wrapper.gform_wrapper.gravity-theme .gfield .ginput_container_select .gfield_select { position: relative; background-color: transparent; z-index: 4; } .gform_wrapper.gform_wrapper.gravity-theme .gfield .ginput_container_select:after { content: ""; height: 3.22rem; width: 3.62rem; background-image: url("imgs/hex-dropdown.svg"); background-size: contain; background-repeat: no-repeat; display: block; position: absolute; top: calc(50% - 1.61rem); right: 2rem; z-index: 3; } .gform_wrapper.gform_wrapper.gravity-theme .gfield input[type="checkbox"] { appearance: none; height: 3rem; } .gform_wrapper.gform_wrapper.gravity-theme .gfield input[type="checkbox"]:before { content: ""; display: inline-block; width: 3rem; height: 3rem; background-color: #F3F3F3; border: 1px solid #707070; margin-right: 1.8rem; border-radius: 5px; } @media (min-width: 992px) { .gform_wrapper.gform_wrapper.gravity-theme .gfield input[type="checkbox"]:before { margin-right: 2rem; } } .gform_wrapper.gform_wrapper.gravity-theme .gfield input[type="checkbox"]:checked:before { content: "\f00c"; font-family: "Font Awesome 6 Pro"; font-weight: 900; display: flex; align-items: center; justify-content: center; font-size: 1.8rem; } .gform_wrapper.gform_wrapper.gravity-theme .gform_fields { grid-gap: 2rem; } @media (min-width: 992px) { .gform_wrapper.gform_wrapper.gravity-theme .gform_fields { grid-gap: 5rem; } } .gform_wrapper.gform_wrapper.gravity-theme .gform_footer { margin-top: 8rem; font-size: 2rem; line-height: 1; font-weight: 400; background-color: var(--colour-darkblue); color: var(--colour-white); display: inline-flex; align-items: center; border-radius: 0.5rem; position: relative; margin-right: 1.9rem; cursor: pointer; padding: unset; transition-property: all; transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); transition-duration: 150ms; } .gform_wrapper.gform_wrapper.gravity-theme .gform_footer:after { content: ""; position: absolute; top: 0; right: -1.9rem; height: 100%; width: 2.2rem; background-image: url("imgs/btn-darkblue.svg"); background-size: cover; transition-property: all; transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); transition-duration: 150ms; } .gform_wrapper.gform_wrapper.gravity-theme .gform_footer:before { content: ""; position: absolute; top: 1.4rem; right: 0; height: 3.2rem; width: 3.6rem; background-image: url("imgs/btn-arrow.svg"); background-size: cover; background-repeat: no-repeat; z-index: 1; transition-property: all; transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); transition-duration: 150ms; } .gform_wrapper.gform_wrapper.gravity-theme .gform_footer:hover:before { transform: scale(1.5); } .gform_wrapper.gform_wrapper.gravity-theme .gform_footer input.gform_button { position: relative; width: calc(100% + 3.6rem); z-index: 3; height: 100%; padding: 2.1rem 8.9rem 1.9rem 2rem; margin-bottom: 0; line-height: 1 !important; min-height: auto !important; } .gform_wrapper .gfield_checkbox label a { color: var(--colour-darkblue); text-decoration: underline; } .gform_wrapper .gf-fileupload-custom .ginput_container_fileupload { display: none; } @media (min-width: 992px) { .gform_wrapper #gform_1 #field_1_10 { width: 100%; max-width: 65%; } .gform_wrapper #gform_1 .gform_footer { position: relative; top: -9rem; float: right; } } .gform_wrapper #gform_2 .gform_fileupload_rules { display: none; } .gform_wrapper #gform_2 #imagePreview { width: 17.7rem; height: 17.7rem; border-radius: 5px; } @media (min-width: 992px) { .gform_wrapper #gform_2 #imagePreview { width: 20rem; height: 20rem; } } .gform_wrapper #gform_2 .preview-container { width: 17.7rem; height: 17.7rem; background-color: #F3F3F3; background-size: cover; border: 1px solid #707070; border-radius: 5px; cursor: pointer; transition-property: all; transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); transition-duration: 150ms; } .gform_wrapper #gform_2 .preview-container img { object-fit: cover; object-position: center; } .gform_wrapper #gform_2 .preview-container:hover { transform: scale(1.05); } @media (min-width: 992px) { .gform_wrapper #gform_2 .preview-container { width: 20rem; height: 20rem; } } .gform_wrapper #gform_2 .ginput_container_post_image { display: none; } .gform_wrapper #gform_3 #field_3_14 .gfield_label, .gform_wrapper #gform_3 #field_3_15 .gfield_label { font-size: 2rem; line-height: 1.5; display: block; margin-bottom: 3rem; margin-top: 3rem; text-align: left; } @media (min-width: 992px) { .gform_wrapper #gform_3 #field_3_14 .gfield_label, .gform_wrapper #gform_3 #field_3_15 .gfield_label { font-size: 3rem; line-height: 1; margin-bottom: 5rem; text-align: center; } } .gform_wrapper #gform_3 #field_3_14 .ginput_container_select, .gform_wrapper #gform_3 #field_3_15 .ginput_container_select { width: 100%; background-color: #DEDEDE; border-radius: 5px; } @media (min-width: 992px) { .gform_wrapper #gform_3 #field_3_14 .ginput_container_select, .gform_wrapper #gform_3 #field_3_15 .ginput_container_select { max-width: 65%; margin-left: auto; margin-right: auto; } } .gform_wrapper #gform_3 #field_3_14 .ginput_container_select .large.gfield_select, .gform_wrapper #gform_3 #field_3_15 .ginput_container_select .large.gfield_select { border: 0; border-radius: 5px; } .gform_wrapper #gform_3 #field_3_14 .gfield-choice-input + label, .gform_wrapper #gform_3 #field_3_15 .gfield-choice-input + label { font-size: 2rem; } .gform_wrapper #gform_3 .gfield--type-textarea { margin-top: 3rem; } .gform_wrapper #gform_3 .gform_msd_label { background-color: #DEDEDE; font-size: 2rem; line-height: 1; font-weight: 400; padding-top: 2rem; padding-bottom: 2rem; padding-left: 2rem; padding-right: 8.5rem; border-radius: 0.5rem; cursor: pointer; position: relative; width: calc(100% - 2rem); } @media (min-width: 992px) { .gform_wrapper #gform_3 .gform_msd_label { width: 100%; max-width: 65%; margin-left: auto; margin-right: auto; } } .gform_wrapper #gform_3 .gform_msd_label:before { content: ""; position: absolute; top: calc(50% - 1.6rem); right: 0; height: 3.2rem; width: 3.6rem; background-image: url("imgs/hex-dropdown.svg"); background-size: cover; background-repeat: no-repeat; z-index: 1; transition-property: all; transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); transition-duration: 150ms; } .gform_wrapper #gform_3 .gform_msd_label:after { content: ""; position: absolute; top: 0; right: -1.6rem; height: 100%; width: 2.2rem; background-image: url("imgs/btn-lightgray.svg"); background-size: 100% 100%; } .gform_wrapper #gform_3 .ginput_container.ginput_container_radio { width: calc(100% - 2rem); position: relative; } @media (min-width: 992px) { .gform_wrapper #gform_3 .ginput_container.ginput_container_radio { width: 100%; max-width: 65%; margin-left: auto; margin-right: auto; } } .gform_wrapper #gform_3 .gfield_radio { background-color: #DEDEDE; width: 100%; cursor: pointer; position: absolute; padding-top: 2rem; padding-bottom: 1px; padding-left: 2rem; padding-right: 2rem; border-radius: 0.5rem; margin-top: -0.5rem; z-index: 2; display: none; } @media (min-width: 992px) { .gform_wrapper #gform_3 #field_3_9 { width: 100%; max-width: 65%; } .gform_wrapper #gform_3 .gform_footer { position: relative; top: -9rem; float: right; } } .gform_wrapper .ginput_container_consent { margin-top: 1rem; margin-bottom: 1rem; } .gform_wrapper .ginput_container_consent label { cursor: pointer; position: relative; padding-left: 8rem; font-weight: 400; display: block; line-height: 1.2; font-size: 1.8rem; } @media (min-width: 992px) { .gform_wrapper .ginput_container_consent label { font-size: 2rem; } } .gform_wrapper .ginput_container_consent label:before { content: ""; position: absolute; cursor: pointer; height: 3.7rem; top: 0; left: 0; right: 0; bottom: 0; background-image: url(imgs/hex-checkbox-background.svg); background-repeat: no-repeat; -webkit-transition: .4s; transition: .4s; } .gform_wrapper .ginput_container_consent label:after { position: absolute; content: ""; height: 2.686rem; width: 3.02rem; top: 0.5rem; left: 6px; bottom: 4px; -webkit-mask-image: url(imgs/hex-checkbox.svg); mask-image: url(imgs/hex-checkbox.svg); -webkit-transition: .4s; transition: .4s; background-color: #DC2C00; } .gform_wrapper .ginput_container_consent input { display: none !important; } .gform_wrapper .ginput_container_consent input:checked + label:after { -webkit-transform: translateX(1.4em); -ms-transform: translateX(1.4em); transform: translateX(1.4rem); background-color: green; } .gform_wrapper .gfield_consent_description { margin-top: 0 !important; margin-left: 8rem !important; border: 0 !important; padding: 0 !important; opacity: 0.5; font-size: 1.6rem !important; display: flex !important; line-height: 1.2 !important; } @media (max-width: 992px) { .gform_wrapper .gfield_consent_description { margin-left: unset !important; margin-top: 5px !important; } } .gform_wrapper .gfield_label_switch { position: relative; display: inline-block; width: 5.13rem; height: 3.219rem; } .gform_wrapper .gfield_label_switch_input { opacity: 0; width: 0; height: 0; } .gform_wrapper .gfield_label_switch_slider { position: absolute; cursor: pointer; top: 0; left: 0; right: 0; bottom: 0; background-image: url("imgs/hex-checkbox-background.svg"); -webkit-transition: .4s; transition: .4s; } .gform_wrapper .gfield_label_switch_slider::before { position: absolute; content: ""; height: 2.686rem; width: 3.02rem; left: 3px; bottom: 3px; -webkit-mask-image: url(imgs/hex-checkbox.svg); mask-image: url(imgs/hex-checkbox.svg); -webkit-transition: .4s; transition: .4s; background-color: #DC2C00; } .gform_wrapper .gfield_label_switch .gfield_label_switch_input:checked + .gfield_label_switch_slider:before { -webkit-transform: translateX(1.4rem); -ms-transform: translateX(1.4rem); transform: translateX(1.4rem); background-color: green; } .gform_wrapper .gfield_required { visibility: hidden; } .gform_wrapper .gfield_required.gfield_required_text:before { content: '*'; visibility: visible; color: #DC2C00; /* Optional: change color of asterisk */ font-size: 2rem; } .gf-radio-membership .gfield_radio { display: flex; flex-direction: row; align-items: center; justify-content: space-between; column-gap: 3rem; } @media (max-width: 992px) { .gf-radio-membership .gfield_radio { flex-direction: column; row-gap: 2rem; } } .gf-radio-membership .gfield_radio .gchoice { display: flex; align-items: center; width: 100%; } .gf-radio-membership .gfield_radio .gchoice input { display: none; } .gf-radio-membership .gfield_radio .gchoice label { position: relative; display: flex !important; flex-direction: column !important; row-gap: .5rem; align-items: center; justify-content: center; width: 100% !important; height: 20rem; padding: 9rem 2rem 2rem 2rem; border-radius: .5rem; cursor: pointer; transition: all .3s; color: white; text-align: center; } .gf-radio-membership .gfield_radio .gchoice label span { font-size: 1.5rem; opacity: 0.6; line-height: 1.2; } .gf-radio-membership .gfield_radio .gchoice label.selected { color: var(--colour-darkblue); background: var(--colour-yellow); } .gf-radio-membership .gfield_radio .gchoice:first-child label { background: var(--colour-darkblue); } .gf-radio-membership .gfield_radio .gchoice:first-child label:before { content: ""; position: absolute; width: 100%; height: 6rem; top: 2rem; left: 0; background: url("imgs/radio-open.svg") no-repeat top center; background-size: contain; } .gf-radio-membership .gfield_radio .gchoice:first-child input:checked + label { background: var(--colour-yellow); color: var(--colour-darkblue); } .gf-radio-membership .gfield_radio .gchoice:first-child input:checked + label:before { background: url("imgs/radio-open_selected.svg") no-repeat top center; background-size: contain; } .gf-radio-membership .gfield_radio .gchoice:nth-child(2) label { background: var(--colour-darkblue); } .gf-radio-membership .gfield_radio .gchoice:nth-child(2) label:before { content: ""; position: absolute; width: 100%; height: 6rem; top: 2rem; left: 0; background: url("imgs/radio-request.svg") no-repeat top center; background-size: contain; } .gf-radio-membership .gfield_radio .gchoice:nth-child(2) input:checked + label { background: var(--colour-yellow); color: var(--colour-darkblue); } .gf-radio-membership .gfield_radio .gchoice:nth-child(2) input:checked + label:before { background: url("imgs/radio-request_selected.svg") no-repeat top center; background-size: contain; } .gf-radio-membership .gfield_radio .gchoice:nth-child(3) label { background: var(--colour-darkblue); } .gf-radio-membership .gfield_radio .gchoice:nth-child(3) label:before { content: ""; position: absolute; width: 100%; height: 6rem; top: 2rem; left: 0; background: url("imgs/radio-closed.svg") no-repeat top center; background-size: contain; } .gf-radio-membership .gfield_radio .gchoice:nth-child(3) input:checked + label { background: var(--colour-yellow); color: var(--colour-darkblue); } .gf-radio-membership .gfield_radio .gchoice:nth-child(3) input:checked + label:before { background: url("imgs/radio-closed_selected.svg") no-repeat top center; background-size: contain; } .gf-checkbox-categories .gchoice { margin-bottom: 0 !important; } .gf-checkbox-categories input[type="checkbox"]:before { display: none !important; } .gf-checkbox-categories .gfield_checkbox { display: grid; grid-template-columns: repeat(2, 1fr); grid-gap: 2rem; } @media (max-width: 992px) { .gf-checkbox-categories .gfield_checkbox { grid-template-columns: 1fr; grid-gap: 1rem; } } .gf-checkbox-categories .gfield_checkbox .gchoice { position: relative; background: var(--colour-lightgray); width: calc(100% - 4rem); margin-left: 2rem; } .gf-checkbox-categories .gfield_checkbox .gchoice:before { content: ""; position: absolute; top: 0; left: -2rem; height: 100%; width: 2.2rem; background-image: url(imgs/btn-lightgray.svg); background-size: 100% 100%; transform: rotate(180deg); } .gf-checkbox-categories .gfield_checkbox .gchoice:after { content: ""; position: absolute; top: 0; right: -2rem; height: 100%; width: 2.2rem; background-image: url(imgs/btn-lightgray.svg); background-size: 100% 100%; } .gf-checkbox-categories .gfield_checkbox label { display: block; padding: 1.6rem 1rem 1.6rem 5rem !important; cursor: pointer; border-radius: .5rem; position: relative; } .gf-checkbox-categories .gfield_checkbox label:before { content: ""; position: absolute; top: calc(50% - 1.6rem); left: -5px; height: 3.2rem; width: 3.6rem; background-image: url(imgs/hex-checkbox__blue.svg); background-size: cover; background-repeat: no-repeat; z-index: 1; transition-property: all; transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); transition-duration: 150ms; } .gf-checkbox-categories .gfield_checkbox input:checked + label:before { background-image: url(imgs/hex-checkbox-checked__blue.svg); } .component-selection-list { margin-top: 2rem; } .component-selection-list__search-input { width: 100%; max-width: 100%; padding: 1rem; background: white; border-radius: .5rem; border: 1px solid var(--colour-darkgray); margin-bottom: 0.5rem; } .component-selection-list__source-list { display: none; background: white; border: 1px solid var(--colour-lightgray); border-radius: .5rem; padding: 1rem; max-height: 200px; height: 100%; overflow-y: scroll; } .component-selection-list__source-list li { width: 100%; cursor: pointer; display: flex; align-items: center; justify-content: space-between; padding: 0.5rem 1rem; border-radius: .5rem; } .component-selection-list__source-list li:hover { background: var(--colour-lightgray); } .component-selection-list__source-list li.isSelected { display: none; } .modal { position: fixed; top: 0; left: 0; width: 100%; height: 100%; z-index: 10000; display: none; align-items: center; justify-content: center; font-family: "neulis-sans", sans-serif !important; font-weight: 300 !important; font-style: normal !important; font-size: 2rem !important; line-height: 2 !important; color: var(--colour-darkgray) !important; background: rgba(0, 51, 86, 0.42); } .modal.active { display: flex; } .modal__editMember select { background-color: white; width: 100%; padding: 1rem; border: 1px solid var(--colour-lightgray); border-radius: .5rem; margin-bottom: 1.5rem; } .modal.error { display: flex; } .modal.error .modal__content { color: red !important; } .modal__box { max-width: 400px; width: 100%; padding: 2rem 5.5rem 2rem 2rem; background: white; position: relative; border-radius: 0.5rem; border: 1px solid var(--colour-lightgray); } .modal__content { line-height: 1.2; } .modal__close { position: absolute; top: 1rem; right: 1rem; cursor: pointer; width: 30px; height: 30px; display: flex; align-items: center; justify-content: center; color: var(--colour-group-accent); font-size: 3rem; background: var(--colour-group-main); border-radius: 0.5rem; } .modal--large .modal__box { max-width: 1000px; } .modal--large .modal__content { max-height: 500px; height: 100%; overflow: scroll; } .modal--large .modal__content section { padding: 0 !important; margin: 0 !important; } .modal--large .modal__content .is-contained { max-width: unset; } .modal--large .modal__content .h1 { font-size: 5rem; line-height: 1.4; font-weight: 400; margin-bottom: 4rem; } .modal--large .modal__content ol, .modal--large .modal__content ul { display: flex; flex-direction: column; row-gap: 1.5rem; } .modal--large .modal__content ol li, .modal--large .modal__content ul li { line-height: 2; } .loader { position: fixed; top: 0; left: 0; width: 100%; height: 100%; z-index: 10000; display: none; align-items: center; justify-content: center; font-family: "neulis-sans", sans-serif !important; font-weight: 300 !important; font-style: normal !important; font-size: 2rem !important; line-height: 2 !important; color: var(--colour-darkgray) !important; background: rgba(0, 51, 86, 0.42); } .loader.active { display: flex; } .loader__box { max-width: 400px; width: 100%; position: relative; display: flex; align-items: center; justify-content: center; } .loader__spinner { color: white; font-size: 5rem; } .loader__content { display: flex; flex-direction: column; align-items: center; justify-content: center; row-gap: 1rem; line-height: 1.2; } .loader__message { color: white; font-weight: 400; } .loader.active .loader__spinner { animation: spin 1.5s linear infinite; } @keyframes spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } } .notFound { display: flex; align-items: center; justify-content: center; padding-top: 5rem; padding-bottom: 10rem; } @media (min-width: 992px) { .notFound { height: calc(100vh - 12rem); padding-top: 0; padding-bottom: 0; background-image: url("imgs/error404.svg"); background-size: 100%; } } .notFound_content { width: 100%; } @media (min-width: 992px) { .notFound_content { max-width: 75rem; text-align: center; margin-left: auto; margin-right: auto; } } .notFound_content_title { font-weight: 400; font-size: 3rem; line-height: 1.33; margin-bottom: 3rem; } @media (min-width: 992px) { .notFound_content_title { font-size: 5rem; line-height: 1.2; margin-bottom: 5rem; } } .notFound_content_subtitle { font-weight: 400; font-size: 2rem; line-height: 1.5; margin-bottom: 3rem; } @media (min-width: 992px) { .notFound_content_subtitle { font-size: 3rem; line-height: 1.33; margin-bottom: 5rem; } } .notFound_content_row { margin-bottom: 5rem; } .header { background-color: var(--colour-darkblue); padding-left: 2rem; padding-right: 2rem; padding-top: 2rem; padding-bottom: 2rem; transition-property: all; transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); transition-duration: 150ms; width: 100%; position: fixed; z-index: 9999; height: 10rem; } @media (min-width: 992px) { .header { padding-left: 3rem; padding-right: 3rem; padding-top: 2.3rem; padding-bottom: 2.3rem; height: 12rem; } } .header-white { background-color: var(--colour-white); } .header-white .header_logo_image { background-image: url("imgs/logo-hover.svg"); } .header-white .header_nav_link { color: var(--colour-darkgray); } .header-white .header_nav_link:hover { color: var(--colour-darkgray); } .header-white .header_navbuttons { background-color: var(--colour-white); } .header-white .btn-animate, .header-white .bbpress-wrapper .button.submit, .bbpress-wrapper .header-white .button.submit, .header-white .bbpress-wrapper .subscription-toggle, .bbpress-wrapper .header-white .subscription-toggle { background-color: var(--colour-darkblue); color: var(--colour-white); } .header-white .btn-animate:after, .header-white .bbpress-wrapper .button.submit:after, .bbpress-wrapper .header-white .button.submit:after, .header-white .bbpress-wrapper .subscription-toggle:after, .bbpress-wrapper .header-white .subscription-toggle:after { background-image: url("imgs/btn-darkblue.svg"); } @media (min-width: 992px) { .header-scrolled, .header-white { background-color: var(--colour-white); } .header-scrolled .header_logo_image, .header-white .header_logo_image { background-image: url("imgs/logo-hover.svg"); } .header-scrolled .header_nav_link, .header-white .header_nav_link { color: var(--colour-darkgray); } .header-scrolled .header_nav_link:hover, .header-white .header_nav_link:hover { color: var(--colour-darkgray); } .header-scrolled .btn-animate, .header-scrolled .bbpress-wrapper .button.submit, .bbpress-wrapper .header-scrolled .button.submit, .header-scrolled .bbpress-wrapper .subscription-toggle, .bbpress-wrapper .header-scrolled .subscription-toggle, .header-white .btn-animate, .header-white .bbpress-wrapper .button.submit, .bbpress-wrapper .header-white .button.submit, .header-white .bbpress-wrapper .subscription-toggle, .bbpress-wrapper .header-white .subscription-toggle { background-color: var(--colour-darkblue); color: var(--colour-white); } .header-scrolled .btn-animate:after, .header-scrolled .bbpress-wrapper .button.submit:after, .bbpress-wrapper .header-scrolled .button.submit:after, .header-scrolled .bbpress-wrapper .subscription-toggle:after, .bbpress-wrapper .header-scrolled .subscription-toggle:after, .header-white .btn-animate:after, .header-white .bbpress-wrapper .button.submit:after, .bbpress-wrapper .header-white .button.submit:after, .header-white .bbpress-wrapper .subscription-toggle:after, .bbpress-wrapper .header-white .subscription-toggle:after { background-image: url("imgs/btn-darkblue.svg"); } } .header_flex { max-width: 1400px; margin: 0 auto; display: flex; justify-content: space-between; align-items: center; } .header_logonav { display: flex; align-items: center; } .header_logo_image { width: 18.585rem; height: 5.055rem; display: block; background-image: url("imgs/logo.svg"); background-repeat: no-repeat; background-size: cover; transition-property: all; transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); transition-duration: 150ms; } @media (min-width: 992px) { .header_logo_image { width: 26.8rem; height: 7.3rem; } } .header_navbuttons { position: absolute; left: 0; top: 100px; flex-direction: column; right: 0; background: #003356; padding-top: 3rem; display: none; } @media (min-width: 992px) { .header_navbuttons { display: flex !important; position: relative; top: auto; background: inherit; flex-direction: row; align-items: center; padding-top: 0; } } .header_nav { margin-left: 0; width: 100%; } @media (min-width: 992px) { .header_nav { margin-left: 8rem; width: auto; } } .header_nav_items { position: relative; flex-direction: column; align-items: flex-start; margin-left: 20px; margin-right: 20px; display: flex; } @media (min-width: 992px) { .header_nav_items { flex-direction: row; margin-left: 0; margin-right: 0; align-items: center; } } .header_nav_items .nav__sub-list { display: none; flex-direction: column; position: absolute; left: 0; top: 100%; width: 250px; background: white; border: 1px solid #e5e5e5; border-radius: 5px; } .header_nav_items .nav__sub-list li { margin-right: unset; } .header_nav_items .nav__sub-list li a { color: var(--colour-darkgray); display: flex; padding: 1rem 2rem; line-height: 16px; transition-property: all; transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); transition-duration: 150ms; } .header_nav_items .nav__sub-list li a:hover { color: var(--colour-darkblue); } .header_nav_items .nav__sub-list li:first-child { padding-top: 1rem; } .header_nav_items .nav__sub-list li:last-child { padding-bottom: 1rem; } .header_nav_item { line-height: 1; display: block; width: 100%; position: relative; } .header_nav_item:hover .nav__sub-list { display: flex; } @media (min-width: 992px) { .header_nav_item { margin-right: 8rem; display: inline-block; width: auto; } } .header_nav_link { color: var(--colour-white); font-weight: 400; font-size: 2rem; line-height: 16px; padding: 2rem 0; display: block; width: 100%; transition-property: all; transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); transition-duration: 150ms; margin-bottom: 5rem; } @media (min-width: 992px) { .header_nav_link { display: inline-block; line-height: 2; width: auto; margin-bottom: 0; } } .header_nav_link:hover { color: var(--colour-yellow); } .header_buttons { width: auto; display: flex; justify-content: space-between; align-items: center; margin-left: 20px; padding-bottom: 5rem; column-gap: 2rem; } @media (min-width: 992px) { .header_buttons { margin-left: 0; padding-bottom: 0; } } .header_buttons_language { font-size: 2rem; line-height: 1; font-weight: 400; color: var(--colour-darkgray); display: flex; margin-right: 1.9rem; position: relative; z-index: 2; background-image: url(imgs/menu.svg); background-size: cover; height: 6.2rem; width: 6.1rem; align-items: center; justify-content: center; } .header_buttons_lang { width: 5rem; font-size: 2rem; line-height: 1; font-weight: 400; color: var(--colour-darkgray); display: flex; position: relative; z-index: 2; background-image: url(imgs/menu.svg); background-size: cover; height: 6.2rem; width: 6.1rem; align-items: center; justify-content: center; cursor: pointer; } .header_buttons_lang.active .gtranslate_wrapper { display: grid !important; } .header_buttons_lang .gtranslate_wrapper { display: none !important; position: absolute; width: 20rem; top: calc(100% + .5rem); right: 0; grid-template-columns: repeat(4, 1fr); grid-gap: 1rem; background: white; padding: 2rem; border-radius: .5rem; border: 1px solid var(--colour-lightgray); } .header_burger { background-image: url("imgs/menu.svg"); background-size: cover; position: absolute; right: 20px; top: 20px; height: 5.1rem; width: 5rem; } @media (min-width: 992px) { .header_burger { display: none; } } .footer { background-color: var(--colour-lightgray); background-image: url("imgs/footer_mobile.svg"); background-repeat: no-repeat; padding-top: 5rem; padding-bottom: 5rem; background-position: top right; } @media (min-width: 992px) { .footer { background-image: url("imgs/footer.svg"); background-size: cover; padding-top: 10rem; padding-bottom: 10rem; } } .footer_flex { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-end; } .footer_content { width: 100%; } @media (min-width: 992px) { .footer_content { max-width: 75%; } } .footer_content_logo { display: block; margin-bottom: 5rem; width: 100%; max-width: 15.096rem; } @media (min-width: 992px) { .footer_content_logo { margin-bottom: 15rem; max-width: fit-content; } } .footer_content_copyright p { margin-bottom: 3rem; font-weight: 400; font-size: 1.6rem; } @media (min-width: 992px) { .footer_content_copyright p { font-size: 2rem; margin-bottom: 5rem; } } .footer_content_copyright p:last-child { margin-bottom: 0; } .footer_navigation { width: 100%; } @media (min-width: 992px) { .footer_navigation { max-width: 15%; } } .footer_navigation_title { font-size: 2.5rem; font-weight: 500; line-height: 1.44; margin-bottom: 2.5rem; } @media (min-width: 992px) { .footer_navigation_title { margin-bottom: 2.7rem; } } .footer_navigation_links { margin-bottom: 3rem; } @media (min-width: 992px) { .footer_navigation_links { margin-bottom: 6.7rem; } } .footer_navigation_item:last-child { margin-bottom: 0; } .footer_navigation_link { font-size: 1.8rem; line-height: 1.2; font-weight: 400; } .footer_navigation_socials { width: 100%; max-width: 100%; display: grid; grid-template-columns: repeat(3, 1fr); grid-gap: 4.7rem; max-width: 19.6rem; margin-bottom: 3rem; } @media (min-width: 992px) { .footer_navigation_socials { max-width: 100%; margin-bottom: 0; } } .footer_navigation_socials_icon { font-size: 3.8rem; } .content { position: relative; z-index: 1; background-color: white; padding-top: 5rem; margin-bottom: 10rem; } @media (min-width: 992px) { .content { padding-top: 10rem; margin-bottom: 20rem; } } .wysiwyg { position: relative; z-index: 2; } .wysiwyg h1 { font-size: 3rem; line-height: 1.33; font-weight: 400; margin-bottom: 3rem; } @media (min-width: 992px) { .wysiwyg h1 { font-size: 5rem; line-height: 1.4; margin-bottom: 5rem; } } @media (min-width: 992px) { .wysiwyg.is-contained { max-width: 75%; } } .wysiwyg h2 { font-size: 4rem; line-height: 1.2; font-weight: 400; margin-bottom: 2rem; margin-top: 2rem; } .wysiwyg p { font-size: 1.6rem; line-height: 1.875; font-weight: 400; padding-bottom: 2rem; } @media (min-width: 992px) { .wysiwyg p { font-size: 2rem; line-height: 2; font-weight: 300; } } .wysiwyg ul { list-style-type: circle; padding: 1rem 3rem; } .wysiwyg ol { list-style-type: decimal; padding: 1rem 1rem 1rem 4rem; } .wysiwyg ol strong, .wysiwyg ol b { font-weight: 400; } .banner { background-color: var(--colour-darkblue); background-size: cover; display: flex; align-items: center; position: relative; padding-top: 5.8rem; } @media (min-width: 992px) { .banner { padding-top: 15rem; } } @media (min-width: 1536px) { .banner { padding-top: 25rem; } } .banner_title { display: block; margin-bottom: 3rem; width: 100%; max-width: 80%; position: relative; z-index: 2; } @media (min-width: 992px) { .banner_title { max-width: 46.25%; } } .banner_title2 { font-size: 4.2rem; color: #fff; line-height: 1; font-weight: 500; position: relative; z-index: 2; letter-spacing: -0.25rem; } @media (min-width: 992px) { .banner_title2 { font-size: 10.75rem; } } .banner_title2-two { margin-left: 8rem; line-height: 0.65; } @media (min-width: 992px) { .banner_title2-two { margin-left: 22.3rem; } } .banner_description { font-size: 1.8rem; line-height: 1.38; color: var(--colour-white); font-weight: 400; position: relative; z-index: 2; margin-bottom: 10rem; max-width: 85%; } @media (min-width: 992px) { .banner_description { margin-bottom: 11.6rem; font-size: 4.2rem; line-height: 1.33; max-width: 100%; } } .banner_animation { position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 0; display: none; } @media (min-width: 992px) { .banner_animation-animate { display: block; } .banner_animation-animate path, .banner_animation-animate line { stroke-dasharray: 1000; stroke-dashoffset: 1000; animation: svg-dash 4s linear forwards; animation-delay: 2s; } } .block-editor__container img.banner_title { max-width: 46.25%; } .cta { background-color: var(--colour-yellow); background-image: url("imgs/cta-mobile.svg"); padding-top: 8rem; padding-bottom: 8rem; background-position: top right; background-repeat: no-repeat; position: relative; z-index: 2; } @media (min-width: 992px) { .cta { padding-top: 10rem; padding-bottom: 10rem; background-image: url("imgs/cta.svg"); background-position: center; background-size: cover; } } .cta_content { font-size: 3rem; line-height: 1.33; font-weight: 400; margin-bottom: 3rem; position: relative; } @media (min-width: 992px) { .cta_content { font-size: 5rem; line-height: 1.2; margin-bottom: 10rem; } } .engage { padding-bottom: 10rem; } @media (min-width: 992px) { .engage { padding-bottom: 20rem; } } .engage_flex { display: flex; flex-wrap: wrap; justify-content: space-between; } .engage_col { width: 100%; position: relative; z-index: 2; } @media (min-width: 992px) { .engage_col:first-child { max-width: 44.04%; } .engage_col:last-child { max-width: 51%; } } @media (min-width: 992px) { .engage_col .wysiwyg p { font-size: 2rem; line-height: 2; font-weight: 400; padding-bottom: 4rem; } } .engage_image { width: 100%; max-width: 100%; position: relative; z-index: 2; border-radius: 5px; display: block; margin-bottom: 5rem; } @media (min-width: 992px) { .engage_image { margin-bottom: 0; } } .engage_bottomContent { font-size: 3rem; line-height: 1.33; font-weight: 400; margin-bottom: 3rem; } @media (min-width: 992px) { .engage_bottomContent { font-size: 4rem; line-height: 1.3; } } .halfBanner { background-color: var(--colour-darkblue); background-size: cover; display: flex; align-items: center; padding-top: 5.8rem; padding-bottom: 10rem; } @media (min-width: 992px) { .halfBanner { height: calc(75vh - 12rem); padding-top: 0; padding-bottom: 0; } } .halfBanner_title { color: var(--colour-white); font-size: 4rem; font-weight: 500; line-height: 1; margin-bottom: 3rem; width: 100%; position: relative; z-index: 2; } @media (min-width: 992px) { .halfBanner_title { font-size: 8rem; line-height: 1.25; font-weight: 500; max-width: 83.45%; line-height: 1; margin-bottom: 1.2rem; } } .halfBanner_intro { color: var(--colour-white); font-size: 1.8rem; font-weight: 400; line-height: 1.38; width: 100%; position: relative; z-index: 2; max-width: 83%; } @media (min-width: 992px) { .halfBanner_intro { max-width: 51.86%; font-size: 3rem; line-height: 1.33; margin-bottom: 1.2rem; } } .icons { background-color: var(--colour-darkblue); background-size: cover; padding-bottom: 10rem; position: relative; } @media (min-width: 992px) { .icons { padding-top: 6rem; padding-bottom: 20rem; } } .icons_grid { display: grid; grid-template-columns: repeat(2, 1fr); grid-gap: 4.6rem; z-index: 4; position: relative; } @media (min-width: 992px) and (max-width: 1279px) { .icons_grid { grid-template-columns: repeat(4, 1fr); grid-gap: 10rem; } } @media (min-width: 1280px) { .icons_grid { grid-template-columns: repeat(4, 1fr); grid-gap: 16.3rem; } } .icons_grid_icon_overlay { position: relative; clip-path: url(#clip-path-shape); } .icons_grid_icon_overlay_hover { pointer-events: auto; } .icons_grid_icon_overlay_organise-1 { position: absolute; top: 26.112759643916917%; left: 12.666666666666668%; width: 74.33333333333333%; height: 25.816023738872403%; z-index: 4; overflow: hidden; } .icons_grid_icon_overlay_organise-2 { position: absolute; bottom: -2px; width: 100%; } .icons_grid_icon_overlay_organise-3 { position: absolute; width: 13.733333333333334%; height: 11.979228486646884%; left: 43%; top: 33%; z-index: 5; } .icons_grid_icon_overlay_organise-4 { position: absolute; width: 15.603333333333333%; left: 14.666666666666666%; top: 53.25443786982249%; z-index: 5; } .icons_grid_icon_overlay_organise-5 { position: absolute; width: 18.666666666666668%; height: 8.599472170328855%; left: 31.666666666666664%; top: 51.893366545087915%; z-index: 5; } .icons_grid_icon_overlay_organise-7 { z-index: 6; position: absolute; top: 17.24137931034483%; left: 8.928571428571429%; width: 83.58928571428572%; } .icons_grid_icon_overlay_network-1 { position: absolute; z-index: 5; top: 5.325443786982249%; left: 44%; width: 12.24%; height: 10.863905325443787%; border-radius: 50%; } .icons_grid_icon_overlay_network-2 { position: absolute; z-index: 5; top: 30.17751479289941%; left: 16.666666666666664%; width: 16.436666666666667%; height: 14.588757396449706%; border-radius: 50%; } .icons_grid_icon_overlay_network-3 { position: absolute; z-index: 5; top: 33.72781065088758%; left: 66%; width: 20.67666666666667%; height: 18.35207100591716%; border-radius: 50%; } .icons_grid_icon_overlay_network-4 { position: absolute; z-index: 5; top: 65.97633136094674%; left: 45.33333333333333%; width: 8.173333333333334%; } .icons_grid_icon_overlay_network-5 { position: absolute; z-index: 5; top: 68.3%; left: 86%; width: 7.616666666666667%; height: 4.928994082840236%; } .icons_grid_icon_overlay_network-6 { position: absolute; z-index: 5; top: 69%; left: 88%; width: 3.51%; height: 3.1153846153846154%; } .icons_grid_icon_overlay_network-7 { position: absolute; z-index: 5; top: 27.510650887573964%; left: 34%; width: 5.37%; height: 3.7573964497041414%; } .icons_grid_icon_overlay_network-8 { position: absolute; z-index: 5; top: 62.42603550295858%; left: 22.666666666666664%; width: 5.37%; height: 3.7573964497041414%; } .icons_grid_icon_overlay_network-9 { position: absolute; z-index: 5; top: 77.2189349112426%; left: 41%; width: 5.37%; height: 3.7573964497041414%; } .icons_grid_icon_overlay_network-10 { position: absolute; z-index: 5; top: 57.692307692307686%; left: 67.33333333333333%; width: 5.37%; height: 3.7573964497041414%; } .icons_grid_icon_overlay_network-11 { position: absolute; z-index: 5; top: 47.928994082840234%; left: -1%; width: 8.836666666666668%; height: 7.843195266272191%; border-radius: 50%; background-color: #235D7B; } .icons_grid_icon_overlay_network-11-1 { position: absolute; z-index: 5; top: auto; bottom: 26.78234628442097%; left: 22%; width: 10.5%; height: 20.70916635231988%; background-color: #F8F8F8; } .icons_grid_icon_overlay_network-11-2 { position: absolute; z-index: 5; top: auto; bottom: 26.78234628442097%; left: 38%; width: 10.5%; height: 40.06035458317616%; background-color: #F8F8F8; } .icons_grid_icon_overlay_network-11-3 { position: absolute; z-index: 5; top: auto; bottom: 26.78234628442097%; left: 52%; width: 10.5%; height: 30.44134288947567%; background-color: #F8F8F8; } .icons_grid_icon_overlay_network-11-4 { position: absolute; z-index: 5; top: auto; bottom: 26.78234628442097%; left: 67%; width: 10.5%; height: 40.06035458317616%; background-color: #F8F8F8; } .icons_grid_icon_overlay_network-11-5 { position: absolute; z-index: 5; top: auto; bottom: 22%; left: 20%; width: 62%; height: 1.6974726518294982%; background-color: #F8F8F8; } .icons_grid_icon_overlay_network-11-6 { position: absolute; z-index: 5; top: 12%; left: 23.387400980761978%; width: 53.48924933987175%; height: 29.121086382497168%; } .icons_grid_icon_overlay_network-12 { position: absolute; z-index: 5; top: 81.06508875739645%; left: 16%; width: 8.836666666666668%; height: 7.843195266272191%; border-radius: 50%; background-color: #235D7B; } .icons_grid_icon_overlay_network-12-1 { position: absolute; z-index: 5; top: auto; bottom: 18.860807242549978%; left: 22%; width: 11.580535646925687%; height: 28.06488117691437%; background-color: #F8F8F8; } .icons_grid_icon_overlay_network-12-2 { position: absolute; z-index: 5; top: auto; bottom: 18.860807242549978%; left: 37%; width: 11.580535646925687%; height: 46.095812900792154%; background-color: #F8F8F8; } .icons_grid_icon_overlay_network-12-3 { position: absolute; z-index: 5; top: auto; bottom: 18.860807242549978%; left: 52%; width: 11.580535646925687%; height: 65.44700113164843%; background-color: #F8F8F8; } .icons_grid_icon_overlay_network-12-4 { position: absolute; z-index: 5; top: auto; bottom: 18.860807242549978%; left: 67%; width: 11.580535646925687%; height: 28.06488117691437%; background-color: #F8F8F8; } .icons_grid_icon_overlay_share-1 { position: absolute; z-index: 5; top: 13.609467455621301%; left: 28.000000000000004%; width: 11.916666666666668%; height: 10.576923076923077%; } .icons_grid_icon_overlay_share-2 { position: absolute; z-index: 6; top: 53.84615384615385%; left: 14.666666666666666%; width: 4.5%; height: 7.500000000000001%; } .icons_grid_icon_overlay_share-3 { position: absolute; z-index: 5; top: 52.366863905325445%; left: 11%; width: 11.916666666666668%; height: 10.576923076923077%; } .icons_grid_icon_overlay_share-4 { position: absolute; z-index: 5; top: 72.7810650887574%; left: 61.66666666666667%; width: 11.916666666666668%; height: 10.576923076923077%; } .icons_grid_icon_overlay_share-5 { position: absolute; z-index: 5; top: 31.333333333333336%; left: 61.24260355029586%; width: 11.916666666666668%; height: 10.576923076923077%; } .icons_grid_icon_overlay_share-6 { position: absolute; z-index: 5; top: 52.366863905325445%; left: 71.66666666666667%; width: 18.71666666666667%; height: 16.61242603550296%; } .icons_grid_icon_overlay_share-7 { position: absolute; z-index: 6; top: 55.183432%; left: 60.333333333333336%; width: 32.53666666666666%; height: 14.215976331360947%; } .icons_grid_icon_overlay_share-8 { position: absolute; z-index: 7; top: 51.183431952662716%; left: 76.66666666666667%; width: 5.41%; height: 6.553254437869822%; } .icons_grid_icon_overlay_help-1 { position: absolute; z-index: 5; bottom: 64%; left: 10%; width: 7%; height: 0.2rem; } .icons_grid_icon_overlay_help-2 { position: absolute; z-index: 5; bottom: 55.325443786982255%; left: 1.3333333333333335%; width: 7%; height: 0.2rem; } .icons_grid_icon_overlay_help-3 { position: absolute; z-index: 5; bottom: 34.61538461538461%; left: 14.666666666666666%; width: 7%; height: 0.2rem; } .icons_grid_icon_overlay_help-4 { position: absolute; z-index: 5; bottom: 70.11834319526628%; left: 39.5%; width: 7%; height: 0.2rem; } .icons_grid_icon_overlay_help-5 { position: absolute; z-index: 5; bottom: 58.28402366863905%; left: 39%; width: 7%; height: 0.2rem; } .icons_grid_icon_overlay_help-6 { position: absolute; z-index: 5; bottom: 46.44970414201183%; left: 39%; width: 7%; height: 0.2rem; } .icons_grid_icon_overlay_help-7 { position: absolute; z-index: 5; bottom: 67%; left: 42.75%; width: 7%; height: 0.2rem; } .icons_grid_icon_overlay_help-8 { position: absolute; z-index: 5; bottom: 25.5%; left: 48.5%; width: 7%; height: 0.2rem; } .icons_grid_icon_overlay_help-9 { position: absolute; z-index: 5; bottom: 70.11834319526628%; left: 49%; width: 7%; height: 0.2rem; } .icons_grid_icon_overlay_help-10 { position: absolute; z-index: 5; bottom: 58.28402366863905%; left: 64.75%; width: 7%; height: 0.2rem; } .icons_grid_icon_overlay_help-11 { position: absolute; z-index: 5; bottom: 49%; left: 74.5%; width: 7%; height: 0.2rem; } .icons_grid_icon_overlay_help-12 { position: absolute; z-index: 5; bottom: 52.071005917159766%; left: 90.5%; width: 20px; height: 1px; } .icons_grid_icon img { display: block; width: 100%; position: relative; z-index: 4; } .icons_grid_title { color: var(--colour-white); font-size: 1.8rem; font-weight: 400; line-height: 1.11; text-align: center; position: relative; z-index: 2; padding-top: 1.5rem; } @media (min-width: 992px) { .icons_grid_title { padding-top: 3rem; font-size: 3rem; line-height: 1; } } .intro { position: relative; z-index: 1; background-color: white; padding-top: 8rem; padding-bottom: 5rem; } @media (min-width: 992px) { .intro { padding-top: 10rem; padding-bottom: 10rem; } } .intro_content { font-size: 3rem; font-weight: 400; line-height: 1.33; width: 100%; text-align: left; position: relative; z-index: 2; } @media (min-width: 992px) { .intro_content { font-size: 5rem; max-width: 77%; line-height: 1.2; } } .ourPartners { padding-top: 8rem; padding-bottom: 8rem; overflow: hidden; } @media (min-width: 992px) { .ourPartners { padding-top: 10rem; padding-bottom: 10rem; } } .ourPartners_title { font-size: 3rem; line-height: 1.33; font-weight: 400; margin-bottom: 5rem; position: relative; z-index: 2; } @media (min-width: 992px) { .ourPartners_title { font-size: 6rem; line-height: 1; margin-bottom: 10rem; } } .ourPartners_grid { display: grid; grid-template-columns: repeat(5, 1fr); grid-gap: 13.3rem; align-items: center; position: relative; z-index: 2; } .ourPartners_carousel { position: relative; z-index: 2; } .ourPartners .swiper-wrapper { display: flex; align-items: center; height: 100%; } .ourPartners .swiper-slide { display: flex; align-items: center; height: 100%; justify-content: center; width: 50%; } .partners { padding-top: 8rem; padding-bottom: 8rem; } @media (min-width: 992px) { .partners { padding-top: 10rem; padding-bottom: 10rem; } } .partners_title { font-size: 3rem; font-weight: 400; line-height: 1.33; position: relative; z-index: 2; padding-bottom: 3rem; } @media (min-width: 992px) { .partners_title { font-size: 6rem; line-height: 1; padding-bottom: 10rem; } } .partners_partners { overflow-x: hidden; align-items: center; position: relative; z-index: 2; display: grid; grid-template-columns: 1fr; grid-gap: 5rem; } @media (min-width: 992px) { .partners_partners { grid-template-columns: repeat(5, 1fr); } } .partners_partners_image { padding-left: 5rem; padding-right: 5rem; } .publicGroups { padding-top: 8rem; padding-bottom: 8rem; overflow: hidden; } @media (min-width: 992px) { .publicGroups { padding-top: 10rem; } } .publicGroups_container { overflow-x: hidden; } @media (min-width: 992px) { .publicGroups_container { overflow-x: unset; } } .publicGroups_title { font-size: 3rem; line-height: 1.33; font-weight: 400; margin-bottom: 3rem; position: relative; z-index: 2; } @media (min-width: 992px) { .publicGroups_title { font-size: 6rem; line-height: 1; margin-bottom: 10rem; } } .publicGroups_item { display: block; width: 100%; background-color: var(--colour-lightgray); border-bottom-left-radius: 5px; border-bottom-right-radius: 5px; } .publicGroups_image { width: 100%; height: 0; padding-bottom: 66%; position: relative; } .publicGroups_image img { width: 100%; height: 100%; object-fit: cover; border-top-left-radius: 5px; border-top-right-radius: 5px; display: block; position: absolute; top: 0; left: 0; right: 0; bottom: 0; } .publicGroups_content { padding: 2rem; } @media (min-width: 992px) { .publicGroups_content { padding: 3rem; } } .publicGroups_content_title { font-weight: 400; font-size: 2rem; line-height: 1; margin-bottom: 1rem; margin-top: 0; } @media (min-width: 992px) { .publicGroups_content_title { font-size: 3rem; } } .publicGroups_content_description { font-weight: 400; line-height: 1; margin-bottom: 2rem; font-size: 1.4rem; } @media (min-width: 992px) { .publicGroups_content_description { font-size: 2rem; } } .publicGroups_pagination { display: flex; justify-content: center; margin-top: 3rem; position: relative; z-index: 2; } @media (min-width: 992px) { .publicGroups_pagination { margin-top: 9rem; margin-bottom: 10rem; } } .publicGroups_pagination .swiper-pagination-bullet { width: 1.971rem; height: 2.215rem; background-image: url("imgs/hex.svg"); background-repeat: no-repeat; background-size: cover; background-color: inherit; border-radius: 0; margin-right: 1.6rem; opacity: 0.5; } @media (min-width: 992px) { .publicGroups_pagination .swiper-pagination-bullet { width: 2.5rem; height: 2.9rem; margin-right: 2rem; } } .publicGroups_pagination .swiper-pagination-bullet:last-child { margin-right: 0; } .publicGroups_pagination .swiper-pagination-bullet-active { opacity: 1; } .publicGroups_swiper { position: relative; z-index: 2; } @media (min-width: 992px) { .publicGroups_swiper .swiper-slide { transition: transform 0.3s; opacity: 0; } .publicGroups_swiper .swiper-slide.swiper-slide:hover { transform: scale(1.1); } .publicGroups_swiper .swiper-slide-prev, .publicGroups_swiper .swiper-slide-active, .publicGroups_swiper .swiper-slide-next { opacity: 1; } } .block-editor__container .publicGroups_wrapper { display: grid; grid-template-columns: repeat(3, 1fr); grid-gap: 4.5rem; } .block-editor__container .publicGroups_wrapper .swiper-slide:nth-child(n+4) { display: none; } .quotes { background-color: var(--colour-yellow); padding-top: 5rem; padding-bottom: 10rem; } @media (min-width: 992px) { .quotes { padding-top: 10rem; } } .quotes_symbol { font-family: "all-round-gothic", sans-serif; font-weight: 400; font-style: normal; line-height: 1; font-size: 37rem; -webkit-text-stroke-width: 3px; -webkit-text-stroke-color: var(--colour-darkgray); color: var(--colour-yellow); margin-left: -2.5rem; position: relative; z-index: 2; } .quotes_swiper { overflow: hidden; margin-top: -18rem; position: relative; z-index: 2; } .quotes_slide { width: 100%; font-weight: 400; font-style: italic; } @media (min-width: 992px) { .quotes_slide { max-width: 90%; } } .quotes_slide_quote { font-size: 3rem; font-weight: 400; font-style: italic; line-height: 1.33; margin-bottom: 2.5rem; } @media (min-width: 992px) { .quotes_slide_quote { font-size: 5rem; line-height: 1.2; margin-bottom: 5rem; } } .quotes_slide_details { font-weight: 500; font-size: 2.5rem; line-height: 1.93; font-style: normal; margin-bottom: 5rem; } @media (min-width: 992px) { .quotes_slide_details { font-size: 3rem; margin-bottom: 0; } } .quotes_pagination { display: flex; position: relative; z-index: 2; } @media (min-width: 992px) { .quotes_pagination { justify-content: flex-end; margin-bottom: 4.4rem; } } .quotes_pagination .swiper-pagination-bullet { width: 1.971rem; height: 2.215rem; background-image: url("imgs/hex.svg"); background-repeat: no-repeat; background-size: cover; background-color: inherit; border-radius: 0; margin-right: 1.6rem; opacity: 0.5; } @media (min-width: 992px) { .quotes_pagination .swiper-pagination-bullet { width: 2.5rem; height: 2.9rem; margin-right: 2rem; } } .quotes_pagination .swiper-pagination-bullet:last-child { margin-right: 0; } .quotes_pagination .swiper-pagination-bullet-active { opacity: 1; } .resourceFeed { padding-top: 8rem; padding-bottom: 8rem; background-color: var(--colour-lightgray); } @media (min-width: 992px) { .resourceFeed { padding-top: 10rem; padding-bottom: 10rem; } } .resourceFeed_title { font-size: 3rem; line-height: 1.33; font-weight: 400; margin-bottom: 3rem; position: relative; z-index: 2; } @media (min-width: 992px) { .resourceFeed_title { font-size: 5rem; line-height: 1.2; margin-bottom: 5rem; } } .resourceFeed_form { display: flex; align-items: center; } .resourceFeed_search { margin-bottom: 5rem; position: relative; z-index: 2; } @media (min-width: 992px) { .resourceFeed_search { margin-bottom: 10rem; } } .resourceFeed_search_label { font-weight: 400; margin-right: 2rem; } .resourceFeed_search_input { background-color: white; font-weight: 400; line-height: 1; padding: 2rem; border-radius: 5px; height: 6.8rem; width: auto; max-width: calc(100% - 5.2rem); } .resourceFeed_search_input::placeholder { color: #A5A5A5; } .resourceFeed_search_button { background-image: url(imgs/submit-search.svg); background-size: cover; background-repeat: no-repeat; height: 6.8rem; text-indent: -9999px; width: 6rem; margin-left: -1rem; cursor: pointer; } .resourceFeed_grid { position: relative; z-index: 2; } @media (min-width: 992px) { .resourceFeed_grid { display: grid; grid-template-columns: repeat(3, 1fr); grid-gap: 5rem; } } .resourceFeed_item { background-color: var(--colour-darknavy); border-radius: 5px; padding: 2rem; position: relative; overflow: hidden; min-height: 20.5rem; display: block; margin-bottom: 2rem; } @media (min-width: 992px) { .resourceFeed_item { margin-bottom: 0; padding: 3.1rem; min-height: 25.4rem; } } .resourceFeed_item:last-child { margin-bottom: 0; } .resourceFeed_item_icon { width: 10.3rem; height: 13.6rem; position: absolute; display: flex; justify-content: center; align-items: center; right: -1.5rem; top: 5rem; } @media (min-width: 1280px) { .resourceFeed_item_icon { width: 18.5rem; height: 21.4rem; right: -2.3rem; margin-top: -1.1rem; top: auto; } } .resourceFeed_item_icon img { width: 100%; } .resourceFeed_item_icon_image { position: absolute; width: 5.173rem; height: 4.139rem; } @media (min-width: 1280px) { .resourceFeed_item_icon_image { width: 8.1rem; height: 6.5rem; } } .resourceFeed_item_title { font-size: 2.5rem; line-height: 1; font-weight: 400; color: var(--colour-white); padding-bottom: 1rem; width: 100%; max-width: 85%; } @media (min-width: 992px) { .resourceFeed_item_title { font-size: 3rem; max-width: 70%; } } .resourceFeed_item_text { font-size: 1.8rem; line-height: 1.11; font-weight: 400; color: var(--colour-white); width: 100%; max-width: 70%; margin-bottom: 7rem; } @media (min-width: 640px) and (max-width: 1345px) { .resourceFeed_item_text { max-width: 65%; } } .resourceFeed_item_button { position: absolute; bottom: 3.1rem; } .slider { background-color: var(--colour-darkblue); padding-top: 8rem; padding-bottom: 8rem; padding-right: 2.0rem; padding-left: 2.0rem; } @media (min-width: 992px) { .slider { padding-top: 10rem; padding-bottom: 10rem; padding-right: 0; padding-left: 0; } } .slider_title { font-size: 3rem; line-height: 1.33; color: var(--colour-white); font-weight: 400; width: 100%; margin-bottom: 5rem; position: relative; z-index: 2; } @media (min-width: 992px) { .slider_title { font-size: 5rem; line-height: 1.2; max-width: 57.29%; margin-left: auto; margin-right: auto; margin-bottom: 10rem; text-align: center; } } .slider_slide { position: relative; z-index: 2; } .slider_swiper { overflow: hidden; position: relative; width: 100%; max-width: 78.32%; margin-left: auto; margin-right: auto; } @media (min-width: 992px) { .slider_swiper { max-width: 50%; } } .slider_swiper-next, .slider_swiper-prev { background-image: url("imgs/slider-arrow.svg"); background-size: cover; position: absolute; height: 4.261rem; width: 1.687rem; z-index: 3; top: calc(50% - 2.131rem); cursor: pointer; } @media (min-width: 992px) { .slider_swiper-next, .slider_swiper-prev { height: 8.2rem; width: 3.2rem; top: calc(50% - 4.1rem); } } .slider_swiper-prev { left: 0; } @media (min-width: 992px) { .slider_swiper-prev { left: calc(25% - 10rem); } } .slider_swiper-next { right: 0; transform: scaleX(-1); transform: scaleX(-1); } @media (min-width: 992px) { .slider_swiper-next { right: calc(25% - 10rem); } } .slider_swiper img { border-radius: 5px; } .team { padding-top: 8rem; padding-bottom: 8rem; background-color: var(--colour-lightgray); } @media (min-width: 992px) { .team { padding-top: 10rem; padding-bottom: 10rem; } } .team_title { font-size: 3rem; font-weight: 400; line-height: 1.33; margin-bottom: 3rem; position: relative; z-index: 2; } @media (min-width: 992px) { .team_title { margin-bottom: 10rem; font-size: 6rem; line-height: 1; } } .team_members { position: relative; z-index: 2; } @media (min-width: 992px) { .team_members { display: grid; grid-template-columns: repeat(4, 1fr); grid-gap: 5rem; } } .team_members_member { background-color: var(--colour-darknavy); border-radius: 5px; } .team_members_member_image { border-top-left-radius: 5px; border-top-right-radius: 5px; width: 100%; height: 0; padding-bottom: 100%; position: relative; } .team_members_member_image img { width: 100%; height: 100%; object-fit: cover; border-top-left-radius: 5px; border-top-right-radius: 5px; display: block; position: absolute; top: 0; left: 0; right: 0; bottom: 0; } .team_members_member_content { padding: 2rem; } @media (min-width: 992px) { .team_members_member_content { padding: 3rem; } } .team_members_member_name { font-size: 2rem; font-weight: 400; line-height: 1; margin-bottom: 1rem; color: var(--colour-white); } @media (min-width: 992px) { .team_members_member_name { font-size: 3rem; } } .team_members_member_details { font-size: 1.6rem; font-weight: 400; line-height: 1; color: var(--colour-yellow); margin-bottom: 1.5rem; } @media (min-width: 992px) { .team_members_member_details { font-size: 2rem; line-height: 1; margin-bottom: 2rem; } } .team_pagination { display: flex; justify-content: center; margin-top: 3rem; position: relative; z-index: 2; } @media (min-width: 992px) { .team_pagination { margin-top: 9rem; margin-bottom: 10rem; } } .team_pagination .swiper-pagination-bullet { width: 1.971rem; height: 2.215rem; background-image: url("imgs/hex.svg"); background-repeat: no-repeat; background-size: cover; background-color: inherit; border-radius: 0; margin-right: 1.6rem; opacity: 0.5; } @media (min-width: 992px) { .team_pagination .swiper-pagination-bullet { width: 2.5rem; height: 2.9rem; margin-right: 2rem; } } .team_pagination .swiper-pagination-bullet:last-child { margin-right: 0; } .team_pagination .swiper-pagination-bullet-active { opacity: 1; } .team_swiper { overflow: hidden; position: relative; z-index: 2; } .titleAndContent { position: relative; z-index: 1; padding-top: 10rem; padding-bottom: 10rem; } @media (min-width: 992px) { .titleAndContent { padding-top: 10rem; padding-bottom: 10rem; background: white url("imgs/titleAndContent.svg") no-repeat center/cover; } } @media (min-width: 992px) and (max-width: 1279px) { .titleAndContent { background-position-x: -200px; } } .titleAndContent_title { font-size: 3rem; line-height: 1.33; font-weight: 400; margin-bottom: 5rem; width: 100%; position: relative; z-index: 2; } @media (min-width: 992px) { .titleAndContent_title { font-size: 4.5rem; line-height: 1.2; max-width: 77%; margin-bottom: 20rem; } } .titleAndContent_flex { display: flex; justify-content: flex-end; } .titleAndContent_content { width: 100%; position: relative; z-index: 2; } @media (min-width: 992px) { .titleAndContent_content { max-width: 50%; } } .titleAndContent_content_content { margin-bottom: 5rem; font-size: 1.6rem; line-height: 1.875; font-weight: 400; margin-bottom: 5rem; } @media (min-width: 992px) { .titleAndContent_content_content { font-size: 2rem; line-height: 2; font-weight: 300; } } .titleAndContent_content_title { font-weight: 400; font-size: 3rem; line-height: 1.33; margin-bottom: 3rem; } @media (min-width: 992px) { .titleAndContent_content_title { font-size: 4rem; line-height: 1.3; } } .titleAndContent_content_buttons { display: flex; flex-direction: column; } @media (min-width: 992px) { .titleAndContent_content_buttons { flex-direction: row; } } .titleAndContent_content_buttons_button { margin-bottom: 2rem; } .titleAndContent_content_buttons_button:last-child { margin-bottom: 0; } @media (min-width: 992px) { .titleAndContent_content_buttons_button { margin-right: 3rem; } .titleAndContent_content_buttons_button:last-child { margin-right: 0; } } .twoColumnIntro { position: relative; z-index: 1; background-color: white; padding-top: 8rem; padding-bottom: 8rem; } @media (min-width: 992px) { .twoColumnIntro { padding-top: 10rem; padding-bottom: 10rem; } } .twoColumnIntro_col { width: 100%; position: relative; z-index: 2; } @media (min-width: 992px) { .twoColumnIntro_col { max-width: 50.59%; } } .twoColumnIntro_title { font-size: 3rem; line-height: 1.33; font-weight: 400; margin-bottom: 3rem; position: relative; z-index: 2; } @media (min-width: 992px) { .twoColumnIntro_title { font-size: 5rem; line-height: 1.4; margin-bottom: 5rem; } } .twoColumnIntro_content { font-size: 1.6rem; line-height: 1.875; font-weight: 400; } @media (min-width: 992px) { .twoColumnIntro_content { font-size: 2rem; line-height: 2; font-weight: 300; } } .featuredResources { margin-bottom: 10rem; position: relative; z-index: 2; overflow: hidden; } @media (min-width: 992px) { .featuredResources { margin-bottom: 20rem; } } .featuredResources_title { font-size: 3rem; line-height: 1.33; font-weight: 400; margin-bottom: 5rem; position: relative; z-index: 2; } @media (min-width: 992px) { .featuredResources_title { font-size: 5rem; line-height: 1.4; } } .login { position: relative; z-index: 2; margin-top: 5rem; margin-bottom: 10rem; } @media (min-width: 992px) { .login { margin-top: 10rem; margin-bottom: 20rem; } } .login_title { font-size: 3rem; line-height: 1.33; font-weight: 400; margin-bottom: 3rem; text-align: center; } @media (min-width: 992px) { .login_title { font-size: 5rem; line-height: 1.4; margin-bottom: 5rem; } } .login_container { width: 100%; max-width: 102.4rem; margin-left: auto; margin-right: auto; } .login_fields { width: 100%; } @media (min-width: 992px) { .login_fields { display: grid; grid-template-columns: repeat(2, 1fr); grid-gap: 5rem; margin-bottom: 5rem; } } .login_error { color: red; font-size: 2rem; margin-bottom: 2rem; } .login_success { color: green; font-size: 2rem; margin-bottom: 2rem; } .login_field { margin-bottom: 2rem; } @media (min-width: 992px) { .login_field { margin-bottom: 0; } } .login_field_label { font-weight: 400; font-size: 1.8rem; line-height: 1; margin-bottom: 1rem; display: block; } @media (min-width: 992px) { .login_field_label { font-size: 2rem; margin-bottom: 2rem; } } .login_field_input { background-color: #F3F3F3; border-radius: 5px; font-weight: 400; font-size: 1.6rem; padding-left: 2rem; padding-right: 2rem; padding-top: 1rem; padding-bottom: 1rem; border: 1px solid #707070; width: 100%; } @media (min-width: 992px) { .login_field_input { font-size: 2rem; padding-left: 3rem; padding-right: 3rem; } } .login_field_input::placeholder { color: rgba(42, 42, 42, 0.5); } .login_submit { font-size: 2rem; line-height: 1; font-weight: 400; background-color: var(--colour-darkblue); color: var(--colour-white); display: inline-block; border-radius: 0.5rem; position: relative; margin-right: 1.9rem; cursor: pointer; transition-property: all; transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); transition-duration: 150ms; } .login_submit:after { content: ""; position: absolute; top: 0; right: -1.9rem; height: 100%; width: 2.2rem; background-image: url("imgs/btn-darkblue.svg"); background-size: cover; transition-property: all; transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); transition-duration: 150ms; } .login_submit:before { content: ""; position: absolute; top: 1.4rem; right: 0; height: 3.2rem; width: 3.6rem; background-image: url("imgs/btn-arrow.svg"); background-size: cover; background-repeat: no-repeat; z-index: 1; transition-property: all; transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); transition-duration: 150ms; } .login_submit:hover:before { transform: scale(1.5); } .login_submit input { position: relative; margin-bottom: 0; width: 100%; height: 100%; padding: 2.1rem 8.5rem 1.9rem 2rem; z-index: 2; } .login_forgot { text-decoration: underline; font-weight: 400; display: block; } @media (min-width: 992px) { .login_forgot { margin-left: 5rem; display: inline; } } .login_forgot:hover { text-decoration: none; } .login_signup { font-weight: 400; margin-top: 4rem; } .login_signup a { text-decoration: underline; } .login_signup a:hover { text-decoration: none; } .block-user { width: 100%; max-width: 102.4rem; margin-left: auto; margin-right: auto; } .block-user__logout { max-width: 102.4rem; margin-left: auto; margin-right: auto; margin-bottom: 3rem; text-align: left; } .block-user h1 { font-size: 5rem; font-weight: 400; margin-bottom: 3rem; } .block-user__details { display: flex; gap: 3rem; } @media (max-width: 992px) { .block-user__details { flex-direction: column; } } .block-user__details > div { flex: 1; } .block-user__details strong { font-weight: 500; } .block-user__details__image { width: 100%; height: 100%; max-width: 20rem; border-radius: 0.5rem; } .block-user__details a { color: var(--colour-darkblue); text-decoration: none; } .block-user__terms { margin-top: 3.5rem; background: #F3F3F3; border: 1px solid #707070; padding: 20px; border-radius: 10px; } .block-user__terms a { color: var(--colour-darkblue); text-decoration: underline; } .block-user__groups { margin-top: 4rem; } .block-user__groups__title { font-size: 3rem; font-weight: 400; margin-bottom: 2rem; } .flexible-blocks { display: flex; flex-direction: column; } .flexible-blocks .block { position: relative; } .flexible-blocks .block:not(:last-child) { margin-bottom: 8rem; } .flexible-blocks .block__actions { position: absolute; right: -1px; top: -33px; display: none; align-items: center; justify-content: space-between; width: 100%; } @media (max-width: 992px) { .flexible-blocks .block__actions { position: relative; order: 1; margin-bottom: 1rem; } } .flexible-blocks .block__actions--block-name { margin-right: 7.5px; font-size: 1.3rem; letter-spacing: 1px; opacity: 0.5; text-transform: uppercase; font-weight: 400; } .flexible-blocks .block__actions--inner { height: 30px; width: 100px; display: flex; background: white; border: 1px solid var(--colour-lightgray); border-radius: .5rem; color: var(--colour-group-main); line-height: normal; padding: 0 1rem; } .flexible-blocks .block__actions--action { display: flex; align-items: center; justify-content: center; padding: 0 1rem; cursor: pointer; height: 100%; } .flexible-blocks .block__actions--action:hover { color: var(--colour-group-accent); } .flexible-blocks .block__repeater-actions { width: 100px; position: absolute; right: -1px; top: -33px; height: 30px; background: white; border: 1px solid var(--colour-lightgray); border-radius: .5rem; color: var(--colour-group-main); line-height: normal; padding: 0 1rem; display: none; align-items: center; justify-content: center; } @media (max-width: 992px) { .flexible-blocks .block__repeater-actions { position: relative; order: 1; margin-bottom: 1rem; } } .flexible-blocks .block__repeater-actions--action { display: flex; align-items: center; justify-content: center; padding: 0 1rem; cursor: pointer; height: 100%; } .flexible-blocks .block__repeater-actions--action:hover { color: var(--colour-group-accent); } .flexible-blocks .block__repeater-actions { top: 0; } .flexible-blocks .block__title { font-size: 3rem; line-height: 1.2; margin-bottom: 1.5rem; font-weight: 400; } .flexible-blocks .block__intro { margin-bottom: 2.5rem; } .flexible-blocks .block .mce-tinymce, .flexible-blocks .block .mce-top-part::before { box-shadow: unset; -webkit-box-shadow: unset; } .flexible-blocks .block__repeater-wrapper { display: flex; flex-direction: column; row-gap: 1.5rem; } .flexible-blocks .block__repeater-item { position: relative; border: 1px solid var(--colour-lightgray); background: white; border-radius: 0.5rem; padding: 1.5rem; } @media (max-width: 992px) { .flexible-blocks .block__repeater-item { display: flex; flex-direction: column; } } .flexible-blocks .block__repeater-item--empty { display: none; } .flexible-blocks .block__repeater-item--inner { width: calc(100% - 100px); } @media (max-width: 992px) { .flexible-blocks .block__repeater-item--inner { order: 2; width: 100%; } } .flexible-blocks .block__repeater-item--inner input:last-child { margin-bottom: 0 !important; } .flexible-blocks .block__repeater-item__fields-row { display: flex; flex-direction: row; column-gap: 2rem; } @media screen and (max-width: 767px) { .flexible-blocks .block__repeater-item__fields-row { flex-direction: column; } } .flexible-blocks .block__repeater-item__field__hidden { display: none; } .flexible-blocks .block__mode-edit { display: none; } .blocks-add-update { display: flex; align-items: flex-start; justify-content: space-between; } @media screen and (max-width: 767px) { .blocks-add-update { flex-direction: column; align-items: flex-start; row-gap: 2rem; } } .blocks-add-update--top { margin-bottom: 8rem; } .blocks-add-update--bottom { display: flex; flex-direction: column; margin-top: 6rem; row-gap: 4rem; } .blocks-add-update .flexible-blocks__actions { display: flex; flex-direction: column; align-items: flex-end; } .blocks-add-update .flexible-blocks__actions--bottom { margin-left: auto; } .blocks-add-update .notify-members-field { margin-bottom: 1.5rem; display: flex; align-items: center; font-size: 1.8rem; } .blocks-add-update .notify-members-field .form-check-input { appearance: none; height: 3rem; } .blocks-add-update .notify-members-field .form-check-input:focus { outline: none; } .blocks-add-update .notify-members-field .form-check-input::before { margin-right: 1rem; content: ""; display: inline-block; width: 3rem; height: 3rem; background-color: white; border: 1px solid var(--colour-darkgray); border-radius: .5rem; } .blocks-add-update .notify-members-field .form-check-input:checked:before { content: "\f00c"; font-family: "Font Awesome 6 Pro"; font-weight: 900; display: flex; align-items: center; justify-content: center; font-size: 1.8rem; } .blocks-add-update .notify-members-field label { cursor: pointer; } body.mode-edit .flexible-blocks { row-gap: 8rem; } body.mode-edit .flexible-blocks .block { background: #8080801f; padding: 3rem; border-radius: .5rem; margin-bottom: 0; } @media screen and (max-width: 767px) { body.mode-edit .flexible-blocks .block { padding: 1.5rem; } } body.mode-edit .flexible-blocks .block__actions, body.mode-edit .flexible-blocks .block__repeater-actions { display: flex; } body.mode-edit .flexible-blocks .block__mode-preview { display: none; } body.mode-edit .flexible-blocks .block__mode-edit { display: block; } body.mode-edit .flexible-blocks label { font-weight: 400; } body.mode-edit .flexible-blocks span.field-description { display: block; font-size: 1.6rem; margin-bottom: 0.5rem; color: var(--colour-darkgray); } body.mode-edit .flexible-blocks .image-field-group { display: flex; column-gap: 10px; } body.mode-edit .flexible-blocks .jump-to-section-title-field { margin-top: 2rem; } body.mode-edit .flexible-blocks .safe-content-field { margin-top: 2rem; display: flex; align-items: center; } body.mode-edit .flexible-blocks .safe-content-field .form-check-input { appearance: none; height: 3rem; } body.mode-edit .flexible-blocks .safe-content-field .form-check-input:focus { outline: none; } body.mode-edit .flexible-blocks .safe-content-field .form-check-input::before { margin-right: 2rem; content: ""; display: inline-block; width: 3rem; height: 3rem; background-color: white; border: 1px solid var(--colour-darkgray); border-radius: .5rem; } body.mode-edit .flexible-blocks .safe-content-field .form-check-input:checked:before { content: "\f00c"; font-family: "Font Awesome 6 Pro"; font-weight: 900; display: flex; align-items: center; justify-content: center; font-size: 1.8rem; } body.mode-edit .flexible-blocks .safe-content-field label { cursor: pointer; } body.mode-edit .flexible-blocks input:not([type="checkbox"]), body.mode-edit .flexible-blocks textarea, body.mode-edit .flexible-blocks select { background-color: white; width: 100%; padding: 1rem; border: 1px solid var(--colour-darkgray); border-radius: .5rem; margin-bottom: 1.5rem; font-size: 1.8rem; } body.mode-edit .flexible-blocks select { background-image: url("imgs/hex-dropdown.svg"); background-size: 3rem; background-repeat: no-repeat; background-position: right 2rem center; font-size: 1.8rem; } body.mode-edit .flexible-blocks input[type="checkbox"] { all: revert; } .flexible-blocks__add-block-title { font-size: 3rem; } .jsAddBlock { position: relative; display: flex; line-height: 1.2; border: 1px solid var(--colour-lightgray); padding: 1.9rem 5rem 1.8rem 2rem; border-radius: .5rem; cursor: pointer; background: white url("imgs/btn-add.svg") no-repeat 95% 50%; background-size: 3.6rem; } .jsUpdateBlocks { cursor: pointer; } .block-image .block__mode-preview { display: flex; flex-direction: column; } .block-image__image { width: 100%; border-radius: .5rem; } .block-image .block__mode-edit .img-preview { max-width: 105px; width: 100%; aspect-ratio: 1 / 1; object-fit: cover; object-position: center; border-radius: 5px; } .block-contents .block__mode-preview { background-color: var(--colour-group-main); color: white; padding: 3rem; border-radius: 0.5rem; } @media (max-width: 992px) { .block-contents .block__mode-preview { padding: 2rem; } } .block-contents ul { margin-left: 2.3rem; } .block-contents ul li { position: relative; } .block-contents ul li a { display: flex; padding: .5rem 0; } .block-contents ul li::before { font-family: 'Font Awesome 6 Pro', sans-serif; content: '\f061'; font-size: 8px; line-height: 1.5; position: absolute; left: -15px; width: 8px; height: 15px; top: 14px; } .block-contents ul ul { margin-left: 2.5rem; } .block-contents ul ul li::before { display: none; } .block-video .block__mode-preview { display: flex; flex-direction: column; } .block-video .embed-responsive { position: relative; display: flex; } .block-video video { width: 100%; height: 100%; border-radius: .5rem; } .block-page-picker .block__mode-preview { background-color: var(--colour-lightgray); border-radius: 0.5rem; display: flex; flex-direction: row; } @media screen and (max-width: 767px) { .block-page-picker .block__mode-preview { flex-direction: column; } } .block-page-picker__image { width: 50%; aspect-ratio: 16 / 9; object-fit: cover; border-top-left-radius: .5rem; border-bottom-left-radius: .5rem; } @media screen and (max-width: 767px) { .block-page-picker__image { width: 100%; } } .block-page-picker__content { width: 50%; padding: 3rem; display: flex; flex-direction: column; row-gap: 1rem; } @media screen and (max-width: 767px) { .block-page-picker__content { width: 100%; padding: 2rem; } } .block-page-picker__content--title { font-size: 3rem; margin-bottom: 1rem; line-height: 1.2; font-weight: 400; } .block-page-picker__content--title.is-meeting { margin-bottom: 0rem; } .block-page-picker__content--description { line-height: 1.2; } .block-page-picker__content--btn { margin-top: auto; } .block-page-picker select { overflow-y: scroll; background-image: unset !important; } .block-page-picker select option:checked { background-color: var(--colour-lightgray); } .block-poll .block__mode-preview { background-color: var(--colour-lightgray); border-radius: 0.5rem; padding: 3rem; } @media (max-width: 992px) { .block-poll .block__mode-preview { padding: 2rem; } } .block-poll__description { margin-bottom: 2rem; line-height: 1.2; } .block-poll__voted { margin-bottom: 2.5rem; } .block-poll__voted--hidden { display: none; } .block-poll__answers { margin-bottom: 2.5rem; display: grid; grid-template-columns: 1fr 1fr; grid-gap: 2rem; } .block-poll__answers--hidden { display: none; } @media screen and (max-width: 767px) { .block-poll__answers { grid-template-columns: 1fr; } } .block-poll__answer { border-radius: .5rem; display: flex; align-items: center; } .block-poll__answer--label { background: white; display: block; padding: 1rem 1rem 1rem 5rem; width: calc(100% - 1.9rem); margin-left: 1.9rem; cursor: pointer; border-radius: .5rem; position: relative; } .block-poll__answer--label:before { content: ""; position: absolute; top: calc(50% - 1.6rem); left: 0; height: 3.2rem; width: 3.6rem; background-image: url(imgs/hex-checkbox__blue.svg); background-size: cover; background-repeat: no-repeat; z-index: 1; transition-property: all; transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); transition-duration: 150ms; } .block-poll__answer--label:after { content: ""; position: absolute; top: 0; left: -1.6rem; height: 100%; width: 2.2rem; background-image: url(imgs/btn.svg); background-size: 100% 100%; transition-property: all; transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); transition-duration: 150ms; transform: rotate(180deg); } .block-poll__answer--input { position: absolute; left: 0; top: 0; } .block-poll__answer--input:checked + .block-poll__answer--label:before { background-image: url(imgs/hex-checkbox-checked__blue.svg); } .block-poll .block__repeater-item--inner { display: flex; align-items: center; justify-content: space-between; } .block-poll .jsHidePollResults { display: none; } .block-poll__results { width: 100%; } .block-poll__results--admin .block-poll__results--table { display: none; } .block-poll__results--table { margin-top: 2rem; width: 100%; border-collapse: collapse; } @media screen and (max-width: 767px) { .block-poll__results--table tr { display: flex; flex-direction: column; margin-bottom: .5rem; } } .block-poll__results--table .poll-table__option { width: 27%; line-height: 1.2; padding: 7.5px 0; } @media screen and (max-width: 767px) { .block-poll__results--table .poll-table__option { width: 100%; } } .block-poll__results--table .poll-table__bar { position: relative; vertical-align: middle; } @media screen and (max-width: 767px) { .block-poll__results--table .poll-table__bar { width: 100%; } } .block-poll__results--table .poll-table__bar .poll-bar { background-color: white; border-radius: 0.5rem; position: relative; } .block-poll__results--table .poll-table__bar .poll-bar__fill { border-radius: 0.5rem; background-color: var(--colour-group-accent); height: 20px; } .block-poll__results--table .poll-table__bar .poll-bar__text { position: absolute; top: 50%; left: 10px; transform: translate(0, -50%); color: #003356; } .block-poll .jsPollSubmit:not([disabled]) { cursor: pointer; } .block-poll .jsPollSubmit--hidden { display: none; } .block-related-groups .span-note { font-size: 1.5rem; font-weight: 400; margin-bottom: 1rem; } .block-related-groups__list-source { background: white; border: 1px solid var(--colour-darkgray); border-radius: .5rem; padding: 1rem; max-height: 200px; height: 100%; overflow-y: scroll; } .block-related-groups__list-source li { width: 100%; cursor: pointer; display: flex; align-items: center; justify-content: space-between; } .block-related-groups__list-source li.isSelected { display: none; } .block-related-groups__list-selected { display: flex; flex-direction: column; } .block-related-groups__list-selected li { border-top: 1px solid white; padding: 1rem 0; cursor: pointer; display: flex; align-items: center; justify-content: space-between; } .block-related-groups__list-selected li span.jsRemoveFromRelatedList { color: red; } .block-resources__title { font-size: 3rem; line-height: 1.2; font-weight: 400; margin-bottom: 1.5rem; } .block-resources .block__mode-preview .resources { display: flex; flex-direction: column; row-gap: 2rem; margin-top: 4rem; } .block-resources .block__mode-preview .resources .resource { background: var(--colour-lightgray); border-radius: 0.5rem; } .block-resources .block__mode-preview .resources .resource a { padding: 2rem; display: flex; align-items: center; column-gap: 2rem; text-decoration: none; } .block-resources .block__mode-preview .resources .resource__icon { display: flex; align-items: center; } .block-resources .block__mode-preview .resources .resource__icon img { max-width: 40px; width: 100%; max-height: 45px; height: 100%; margin-right: 2rem; } .block-resources .block__mode-edit .block__repeater-item { padding-top: 1rem; } .block-resources .block__mode-edit .block__repeater-item .resource-file-src { display: flex; font-size: 1.7rem; line-height: 1.2; } .block-cta .block__mode-preview { background-color: var(--colour-lightgray); border-radius: 0.5rem; display: flex; flex-direction: row; } @media screen and (max-width: 767px) { .block-cta .block__mode-preview { flex-direction: column; } } .block-cta__image { width: 50%; aspect-ratio: 16 / 9; object-fit: cover; border-top-left-radius: .5rem; border-bottom-left-radius: .5rem; } @media screen and (max-width: 767px) { .block-cta__image { width: 100%; } } .block-cta__content { width: 50%; padding: 3rem; display: flex; flex-direction: column; row-gap: 1rem; } @media screen and (max-width: 767px) { .block-cta__content { width: 100%; padding: 2rem; } } .block-cta__content--title { font-size: 3rem; margin-bottom: 1rem; line-height: 1.2; font-weight: 400; } .block-cta__content--snippet { line-height: 1.2; } .block-cta__content--btn { margin-top: auto; } .block-cta .block__mode-edit .img-preview { max-width: 105px; width: 100%; aspect-ratio: 1 / 1; object-fit: cover; object-position: center; border-radius: 5px; } .resourceCategoryBanner { background-color: var(--colour-darkblue); display: flex; align-items: center; padding-top: 5rem; padding-bottom: 10rem; background-image: url("imgs/svgs/resourceCategories_mobile.svg"); background-position: top right; background-repeat: no-repeat; } @media (min-width: 992px) { .resourceCategoryBanner { padding-top: 10rem; padding-bottom: 15rem; background-size: 100%; background-image: url("imgs/svgs/resourceCategories.svg"); } } .resourceCategoryBanner_title { color: var(--colour-white); font-size: 4rem; font-weight: 700; margin-bottom: 3rem; line-height: 1; width: 100%; position: relative; z-index: 2; } @media (min-width: 992px) { .resourceCategoryBanner_title { font-size: 6rem; font-weight: 500; line-height: 1.25; max-width: 83.45%; margin-bottom: 1.2rem; } } .resourceCategoryBanner_intro { color: var(--colour-white); font-size: 1.8rem; font-weight: 400; margin-bottom: 1.2rem; line-height: 1.33; width: 100%; max-width: 80.45%; position: relative; z-index: 2; } @media (min-width: 992px) { .resourceCategoryBanner_intro { max-width: 53%; font-size: 3rem; } } .resourceCategory { padding-top: 2rem; } .resourceCategory-search { background-color: var(--colour-lightgray); } @media (min-width: 992px) { .resourceCategory { padding-top: 10rem; padding-bottom: 10rem; } } .resourceCategory_grid { position: relative; z-index: 2; margin-bottom: 10rem; } @media (min-width: 768px) { .resourceCategory_grid { display: grid; grid-template-columns: repeat(2, 1fr); grid-gap: 2rem; } } @media (min-width: 992px) { .resourceCategory_grid { grid-gap: 5rem; } } .resourceCategory_swiper .swiper-slide { height: auto; } .resourceCategory_resource { background-color: #023253; border-radius: 5px; display: flex; flex-wrap: wrap; height: 100%; margin-bottom: 2rem; } @media (min-width: 992px) { .resourceCategory_resource { height: auto; margin-bottom: 0; } } .resourceCategory_resource:last-child { margin-bottom: 0; } .resourceCategory_resource_column { width: 100%; } @media (min-width: 992px) { .resourceCategory_resource_column:first-child { max-width: 45.76%; } .resourceCategory_resource_column:last-child { max-width: 54.24%; } } .resourceCategory_resource_column-media:first-child { max-width: 100%; } .resourceCategory_resource_column-media:last-child { max-width: 100%; } .resourceCategory_resource_image { border-top-left-radius: 5px; border-bottom-left-radius: 5px; width: 100%; height: 0; position: relative; padding-bottom: 107%; } @media (min-width: 992px) { .resourceCategory_resource_image { padding-bottom: 129%; } } .resourceCategory_resource_image-media { padding-bottom: 56%; } .resourceCategory_resource_image img { width: 100%; height: 100%; object-fit: cover; object-position: top center; border-top-left-radius: 5px; border-bottom-left-radius: 5px; display: block; position: absolute; top: 0; left: 0; right: 0; bottom: 0; } @media (min-width: 992px) { .resourceCategory_resource_image img { object-position: center; } } .resourceCategory_resource_content { padding: 2rem; display: flex; flex-direction: column; justify-content: space-between; height: 100%; } @media (min-width: 992px) { .resourceCategory_resource_content { padding: 3.5rem; } } .resourceCategory_resource_content_content { margin-bottom: 2rem; } .resourceCategory_resource_tag { color: #D1DC00; font-size: 1.4rem; line-height: 1; font-weight: 400; margin-bottom: 1rem; } @media (min-width: 992px) { .resourceCategory_resource_tag { font-size: 1.6rem; } } .resourceCategory_resource_title { color: #fff; font-size: 1.6rem; line-height: 1.25; font-weight: 400; margin-bottom: 1rem; } @media (min-width: 992px) { .resourceCategory_resource_title { font-size: 2.5rem; line-height: 1.2; margin-bottom: 2rem; } } .resourceCategory_resource_description { color: #fff; font-size: 1.4rem; line-height: 1.25; font-weight: 400; margin-bottom: 1.8rem; } @media (min-width: 992px) { .resourceCategory_resource_description { font-size: 1.6rem; } } .resourceCategory_resource_resource:last-child .resourceCategory_resource_resource_link { margin-bottom: 0; } .resourceCategory_resource_resource_link { display: flex; align-items: center; margin-bottom: 2rem; } .resourceCategory_resource_resource_link_icon { background-image: url("imgs/hex-yellow.svg"); height: 4.1rem; width: 4.5rem; display: flex; justify-content: center; align-items: center; margin-right: 1rem; } .resourceCategory_resource_resource_link i { color: #023253; font-size: 1.9rem; } .resourceCategory_resource_resource_link span { color: #D1DC01; font-size: 1.6rem; } .resourceCategory_results-found { text-align: center; margin-bottom: 2rem; } .resourceCategory_pagination { display: flex; align-items: center; justify-content: center; text-align: center; } .resourceCategory_pagination a { font-size: 2rem; line-height: 1; font-weight: 400; background-color: var(--colour-darkblue); color: var(--colour-white); padding-top: 2.1rem; display: inline-block; padding-bottom: 1.9rem; border-radius: 0.5rem; position: relative; margin: 0 2.5rem; z-index: 2; transition: all 150ms cubic-bezier(0.4, 0, 0.2, 1); } .resourceCategory_pagination_next a { padding-left: 2rem; padding-right: 8.5rem; } .resourceCategory_pagination_next a:before { content: ""; position: absolute; top: calc(50% - 1.6rem); right: 0; height: 3.2rem; width: 3.6rem; background-image: url(imgs/btn-arrow.svg); background-size: cover; background-repeat: no-repeat; z-index: 1; transition: all 150ms cubic-bezier(0.4, 0, 0.2, 1); } .resourceCategory_pagination_next a:after { content: ""; position: absolute; top: 0; right: -1.6rem; height: 100%; width: 2.2rem; background-image: url(imgs/btn-darkblue.svg); background-size: 100% 100%; transition: all 150ms cubic-bezier(0.4, 0, 0.2, 1); } .resourceCategory_pagination_prev a { padding-right: 2rem; padding-left: 8.5rem; } .resourceCategory_pagination_prev a:before { content: ""; position: absolute; top: calc(50% - 1.6rem); left: 0; height: 3.2rem; width: 3.6rem; background-image: url(imgs/btn-arrow.svg); background-size: cover; background-repeat: no-repeat; z-index: 1; transition: all 150ms cubic-bezier(0.4, 0, 0.2, 1); transform: scaleX(-1); } .resourceCategory_pagination_prev a:after { content: ""; position: absolute; top: 0; left: -1.6rem; height: 100%; width: 2.2rem; background-image: url(imgs/btn-darkblue.svg); background-size: 100% 100%; transition: all 150ms cubic-bezier(0.4, 0, 0.2, 1); transform: scaleX(-1); } .resourceCategory_mobile_pagination { display: flex; justify-content: center; margin-top: 3rem; position: relative; z-index: 2; } @media (min-width: 992px) { .resourceCategory_mobile_pagination { margin-top: 9rem; margin-bottom: 10rem; } } .resourceCategory_mobile_pagination .swiper-pagination-bullet { width: 1.971rem; height: 2.215rem; background-image: url("imgs/hex.svg"); background-repeat: no-repeat; background-size: cover; background-color: inherit; border-radius: 0; margin-right: 1.6rem; opacity: 0.5; } @media (min-width: 992px) { .resourceCategory_mobile_pagination .swiper-pagination-bullet { width: 2.5rem; height: 2.9rem; margin-right: 2rem; } } .resourceCategory_mobile_pagination .swiper-pagination-bullet:last-child { margin-right: 0; } .resourceCategory_mobile_pagination .swiper-pagination-bullet-active { opacity: 1; } .archiveGroups { background: #F8F8F8; padding-bottom: 10rem; } .archiveGroups__banner { background-color: var(--colour-darkblue); padding-top: 5rem; padding-bottom: 5rem; margin-bottom: 6rem; } .archiveGroups__banner .container { display: flex; align-items: center; justify-content: space-between; } @media (max-width: 992px) { .archiveGroups__banner .container { width: 100%; flex-direction: column; align-items: flex-start; } } .archiveGroups__banner .page_title { color: white; } .archiveGroups__createGroup { padding-top: 8rem; } .archiveGroups__load-more { width: 100%; display: flex; align-items: center; justify-content: center; } .archiveGroups__load-more .jsLoadMoreGroups { margin: 4rem auto 0 auto; cursor: pointer; } .groupsSection { margin-top: 4rem; } .groupsSection__title { font-size: 4rem; font-weight: 400; margin-bottom: 3rem; display: flex; align-items: center; justify-content: space-between; line-height: 1.2; } @media (max-width: 992px) { .groupsSection__title { flex-direction: column; align-items: flex-start; row-gap: 2rem; } } .groupsSection select.jsFilterGroups { position: relative; display: flex; line-height: 1.2; border: 1px solid var(--colour-lightgray); padding: 1.9rem 7rem 1.8rem 2rem; border-radius: .5rem; cursor: pointer; background: white url("imgs/hex-dropdown.svg") no-repeat 95% 50%; background-size: 3.6rem; margin-bottom: 3rem; } .groupsSection hr { border: 0; width: 100%; height: 2px; background: #DEDEDE; margin-top: 6rem; } .groupBanner { background-color: var(--colour-group-main); padding-top: 5rem; padding-bottom: 5rem; } .groupBanner .container { display: flex; align-items: center; justify-content: space-between; } .groupBanner_title { color: var(--colour-white); font-size: 4rem; font-weight: 400; line-height: 1.3; } .groupBanner_title_link { display: flex; align-items: center; background: url(imgs/arrow-left.svg) no-repeat left center; background-size: 2rem; padding-left: 4.5rem; } .groupBanner__type-badge { background-color: white; color: var(--colour-darkblue); text-transform: uppercase; font-size: 11px; letter-spacing: 0.5px; font-weight: 400; padding: 2px 5px; line-height: 1; border-radius: 5px; } .groupNav_inner { background-color: var(--colour-lightgray); border-bottom-left-radius: 0.5rem; border-bottom-right-radius: 0.5rem; padding: 3rem; display: flex; align-items: center; justify-content: space-between; } @media (max-width: 992px) { .groupNav_inner { flex-direction: column; align-items: flex-start; padding: 2rem; } } .groupNav_wrap { display: flex; align-items: center; column-gap: 2rem; } @media (max-width: 992px) { .groupNav_wrap { width: 100%; } } .groupNav_menu { display: flex; column-gap: .25rem; } .groupNav_menu > li { position: relative; } .groupNav_menu > li > a { display: flex; background-color: var(--colour-group-tabs); color: var(--colour-darkgrey); padding: 2.1rem 4rem 1.9rem 4rem; line-height: 1; } .groupNav_menu > li > a.current { color: white; background-color: var(--colour-group-main); } .groupNav_menu > li > a .members-count-pending { position: absolute; top: 5px; right: 5px; background: red; color: white; font-size: 11px; font-weight: 400; border-radius: 50px; display: flex; align-items: center; justify-content: center; padding: 2px 4px; } .groupNav_menu > li:first-child > a { border-top-left-radius: 0.5rem; border-bottom-left-radius: 0.5rem; } .groupNav_menu > li:last-child > a { border-top-right-radius: 0.5rem; border-bottom-right-radius: 0.5rem; } .groupNav_menu > li:hover > a { color: white; background-color: var(--colour-group-main); } .groupNav_menu > li:hover > .groupNav_submenu { display: flex; } .groupNav_menu > li > .groupNav_submenu { display: none; flex-direction: column; padding: 3rem; position: absolute; top: 100%; left: 0; width: 290px; background: white; border: 1px solid #DEDEDE; border-radius: .5rem; z-index: 3; } .groupNav_menu > li > .groupNav_submenu.isToggled { display: flex; } .groupNav_menu > li > .groupNav_submenu a:hover { color: var(--colour-darkblue); } .groupNav_menu > li > .groupNav_submenu ul { padding-left: 3rem !important; } @media (max-width: 992px) { .groupNav_menu { flex-direction: column; row-gap: 0.25rem; width: 100%; margin-bottom: 2rem; } .groupNav_menu > li a { border-radius: 0.5rem; } } .groupNav_edit-btn { display: flex; align-items: center; } .groupNav_edit-btn img { max-width: 5rem; } .groupBreadcrumbs_inner { display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid var(--colour-lightgray); padding: 2.5rem 0; } .groupBreadcrumbs_inner .breadcrumbs i { color: var(--colour-lightgray); font-size: 1.7rem; padding: 0 1rem; } .groupSearchForm_form { display: flex; align-items: center; } .groupSearchForm_input { background-color: white; font-weight: 400; line-height: 1; padding: 2rem; border-radius: 5px; height: 6.8rem; width: auto; max-width: calc(100% - 5.2rem); } .groupSearchForm_input::placeholder { color: #A5A5A5; } .groupSearchForm_button { background-image: url(imgs/submit-search.svg); background-size: cover; background-repeat: no-repeat; height: 6.8rem; text-indent: -9999px; width: 6rem; margin-left: -1rem; cursor: pointer; } .groupSearch { display: flex; flex-direction: column; width: 100%; } .groupSearch_title { font-size: 4rem; font-weight: 400; margin-bottom: 3rem; display: flex; align-items: center; justify-content: space-between; line-height: 1.2; } @media (max-width: 992px) { .groupSearch_title { flex-direction: column; row-gap: 2rem; align-items: flex-start; } } .groupSearch_title span { font-size: 3rem; font-weight: 400; line-height: 1.2; color: var(--colour-darkgray); opacity: 0.5; } .groupSearch_tabs { display: flex; flex-direction: row; column-gap: .5rem; margin-bottom: 6rem; width: 100%; } .groupSearch_tabs li { width: 100%; } .groupSearch_tabs li a { display: flex; align-items: center; justify-content: center; background: var(--colour-group-tabs); color: var(--colour-darkgrey); padding: 2.1rem 4rem 1.9rem 4rem; line-height: 1; } .groupSearch_tabs li a.active { background: var(--colour-group-main); color: white; } .groupSearch_tabs li:first-child a { border-top-left-radius: .5rem; border-bottom-left-radius: .5rem; } .groupSearch_tabs li:last-child a { border-top-right-radius: .5rem; border-bottom-right-radius: .5rem; } @media (max-width: 992px) { .groupSearch_tabs { flex-direction: column; row-gap: .5rem; } .groupSearch_tabs li a { border-radius: .5rem; } } .groupSearch_results { display: flex; flex-direction: column; width: 100%; } .groupSearch_results_section { display: none; } .groupSearch_results_section.active { display: flex; } .groupsSearch__title { font-size: 4rem; font-weight: 400; margin-bottom: 3rem; display: flex; align-items: center; line-height: 1.2; } .groupMain { margin: 10rem 0; } .groupMain .container { display: flex; flex-direction: row; align-items: flex-start; column-gap: 10rem; } @media (max-width: 992px) { .groupMain .container { flex-direction: column; } } .groupMain_sidebar { background-color: var(--colour-lightgray); border-radius: 0.5rem; padding: 3rem; width: 30%; } @media (max-width: 992px) { .groupMain_sidebar { width: 100%; margin-top: 4rem; padding: 2rem; } } .groupMain_sidebar__title { font-size: 3rem; line-height: 1; margin-bottom: 3rem; font-weight: 400; } .groupMain_sidebar__nav { display: flex; flex-direction: column; row-gap: 2rem; } .groupMain_sidebar__nav a { width: calc(100% - 1.5rem); } .groupMain_content { width: 70%; } @media (max-width: 992px) { .groupMain_content { width: 100%; } } .groupMain_content__owner { margin-bottom: 4em; } .groupMain_content__owner_title { font-size: 3rem; line-height: 1.2; margin-bottom: 2rem; font-weight: 400; } .groupMain_content__description__title { font-size: 3rem; line-height: 1.2; margin-bottom: 2rem; font-weight: 400; } .groupMain_editOptions { margin-bottom: 4rem; } .groupMain_editOptions label { font-size: 2rem; font-weight: 400; } .groupMain_editOptions input, .groupMain_editOptions select { background-color: white; width: 100%; padding: 1rem; border: 1px solid var(--colour-darkgray); border-radius: .5rem; margin-bottom: 1.5rem; } .groupSubpage_title { font-size: 4rem; font-weight: 400; margin-bottom: 3rem; } .groupCard, .groupSubpageCard { background-color: var(--colour-lightgray); border-radius: .5rem; display: flex; flex-direction: column; position: relative; } .groupCard__owner-badge, .groupSubpageCard__owner-badge { position: absolute; top: 1rem; left: 1rem; background-color: var(--colour-yellow); color: var(--colour-darkblue); text-transform: uppercase; font-size: 11px; letter-spacing: 0.5px; font-weight: 400; z-index: 10; padding: 2px 5px; line-height: 1; border-radius: 5px; } .groupCard__type-badge, .groupSubpageCard__type-badge { background-color: white; color: var(--colour-darkblue); text-transform: uppercase; font-size: 11px; letter-spacing: 0.5px; font-weight: 400; z-index: 10; padding: 2px 5px; line-height: 1; border-radius: 5px; display: inline; } .groupCard__hidden, .groupSubpageCard__hidden { display: none; } .groupCard__image, .groupSubpageCard__image { height: 200px; } .groupCard__image img, .groupSubpageCard__image img { width: 100%; height: 200px; object-fit: cover; border-top-left-radius: .5rem; border-top-right-radius: .5rem; } .groupCard__content, .groupSubpageCard__content { padding: 2rem; } .groupCard__content__title, .groupSubpageCard__content__title { font-size: 3rem; line-height: 1.2; margin-bottom: .5rem; } .groupCard__content__description, .groupSubpageCard__content__description { line-height: 1.2; margin-top: 2rem; } .groupCard__note, .groupSubpageCard__note { font-size: 1.8rem; line-height: 1.2; padding: 0 2rem; margin-bottom: 2rem; color: red; } .groupCard__note--in-content, .groupSubpageCard__note--in-content { margin-bottom: 0; padding: 1rem 0 0 0; } .groupCard__buttons, .groupSubpageCard__buttons { display: flex; justify-content: space-between; column-gap: 1rem; padding: 0 2rem 2rem 2rem; margin-top: auto; } .groupCard__buttons .btn-accept, .groupCard__buttons .btn-decline, .groupSubpageCard__buttons .btn-accept, .groupSubpageCard__buttons .btn-decline { width: 58%; } .groupCard__buttons a, .groupSubpageCard__buttons a { padding-right: 4rem !important; } .groupCard__buttons__vertical, .groupSubpageCard__buttons__vertical { display: flex; flex-direction: column; row-gap: 1rem; width: calc(100% - 1.5rem); } .groupSettings { width: 100%; } .groupSettings_wrapper { display: flex; flex-direction: row; column-gap: 10rem; } @media (max-width: 992px) { .groupSettings_wrapper { flex-direction: column; row-gap: 3rem; } } .groupSettings_pageTitle { font-size: 4rem; font-weight: 400; margin-bottom: 3rem; display: flex; align-items: center; justify-content: space-between; } .groupSettings_main { width: 70%; display: flex; flex-direction: column; row-gap: 5rem; } @media (max-width: 992px) { .groupSettings_main { width: 100%; } } .groupSettings_main_section { background: var(--colour-lightgray); padding: 3rem; border-radius: .5rem; } @media (max-width: 992px) { .groupSettings_main_section { padding: 2rem; } } .groupSettings_main_section_title { line-height: 1.2; font-size: 3rem; font-weight: 400; margin-bottom: 1rem; display: flex; align-items: center; column-gap: 4rem; } @media (max-width: 992px) { .groupSettings_main_section_title { flex-direction: column; align-items: flex-start; row-gap: 2rem; } } .groupSettings_sidebar { width: 30%; display: flex; flex-direction: column; row-gap: 3rem; } @media (max-width: 992px) { .groupSettings_sidebar { width: 100%; } } .groupSettings_sidebar_section { background: var(--colour-lightgray); padding: 3rem; border-radius: .5rem; } @media (max-width: 992px) { .groupSettings_sidebar_section { padding: 2rem; } } .groupSettings_sidebar_section_p { line-height: normal; margin-bottom: 3rem; display: block; } .groupSettings_sidebar_section_title { line-height: 1.2; font-size: 3rem; font-weight: 400; margin-bottom: 3rem; display: flex; align-items: center; column-gap: 4rem; } .groupSettings_pagesList { display: flex; flex-direction: column; } .groupSettings_pagesList li .listItem { display: flex; align-items: center; justify-content: space-between; padding: 1rem 2.5rem; background: white; border-radius: .5rem; line-height: 1.2; transition: all .3s; margin-top: 2rem; font-weight: 400; } @media (max-width: 992px) { .groupSettings_pagesList li .listItem { margin-top: 0.5rem; padding: 1rem 1rem 1rem 2rem; } } .groupSettings_pagesList li .listItem_main { background: var(--colour-group-main); color: white; } .groupSettings_pagesList li .listItem_actions { display: flex; flex-direction: row; align-items: center; column-gap: 1.5rem; padding-left: 1.5rem; position: relative; } @media (max-width: 992px) { .groupSettings_pagesList li .listItem_actions { column-gap: .5rem; } } .groupSettings_pagesList li .listItem_actions a { display: flex; } .groupSettings_pagesList li .listItem_actions .btn-edit img, .groupSettings_pagesList li .listItem_actions .btn-delete img { width: 6rem; } .groupSettings_pagesList ul { display: flex; flex-direction: column; padding-left: 2rem; } @media (max-width: 992px) { .groupSettings_pagesList ul { padding-left: 1rem; } } .groupSettings_usersList { display: flex; flex-direction: column; } .groupSettings_usersList li .listItem { display: flex; align-items: center; justify-content: space-between; padding: 1rem; background: white; border-radius: .5rem; line-height: 1.2; transition: all .3s; margin-top: 2rem; } .groupSettings_usersList li .listItem_who { display: flex; align-items: center; column-gap: 2rem; width: 35%; } .groupSettings_usersList li .listItem_who .label-external { display: block; font-size: 1.6rem; margin-bottom: 0.5rem; color: var(--colour-darkgray); } .groupSettings_usersList li .listItem_who img { border-radius: .5rem; width: 7rem; } .groupSettings_usersList li .listItem_memberOrganisationRole { margin-right: auto; } .groupSettings_usersList li .listItem_actions { display: flex; flex-direction: row; align-items: center; column-gap: 2rem; padding-left: 1.5rem; position: relative; } .groupSettings_inviteMembers { display: none; } .groupSettings_inviteMembers.isToggled { display: flex; flex-direction: column; } .groupSettings_inviteMembers .jsToInviteList { color: var(--colour-group-main); text-decoration: underline; } .groupSettings_inviteMembers__externalEmails { margin-top: 2rem; } .groupSettings_inviteMembers__externalEmails__form { display: flex; align-items: center; column-gap: 2rem; } @media (max-width: 992px) { .groupSettings_inviteMembers__externalEmails__form { flex-direction: column; align-items: flex-start; } } .groupSettings_inviteMembers__externalEmails__form input.external_emails { flex: 1; width: 100%; max-width: 100%; padding: 1rem; background: white; border-radius: .5rem; border: 1px solid var(--colour-darkgray); margin-bottom: 0.5rem; } .groupSettings_inviteMembers__externalEmails .jsExternalEmailsToInviteList { display: block; color: var(--colour-group-main); text-decoration: underline; } .groupSettings_inviteMembers_newInvites { margin-top: 2rem; margin-bottom: 2rem; display: none; } .groupSettings_inviteMembers_newInvites.isToggled { display: block; } .groupSettings_inviteMembers_newInvites-list { display: flex; flex-direction: row; column-gap: 0.5rem; row-gap: 0.5rem; flex-wrap: wrap; margin-bottom: 2rem; } .groupSettings_inviteMembers_newInvites-list li { font-size: 1.7rem; background: white; padding: 0.5rem 1.5rem; border-radius: 0.5rem; display: flex; align-items: center; column-gap: 1rem; cursor: pointer; } .groupSettings_inviteMembers_newInvites-list li span { color: red; } .groupSettings_inviteMembers__invited-list { margin-bottom: 2rem; } .groupSettings .jsResetGroupColours { display: none; color: red; } .groupSettings .jsResetGroupColours.isCustomised { display: block; } .groupSettings .jsUpdateGroupColours { display: none; margin-top: 2rem; } .groupSettings .jsUpdateGroupColours.isActive { display: inline-block; } .groupSettings .groupColoursContrastRatio { display: none; color: red; margin-bottom: 3rem; line-height: normal; } .groupSettings .groupColoursContrastRatio.isLowContrast { display: block; } .groupColourPicker { position: relative; margin-bottom: 1.5rem; width: calc(100% - 2rem); font-size: 2rem; line-height: 1; font-weight: 400; background-color: var(--colour-white); color: var(--colour-darkgray); display: flex; align-items: center; column-gap: 2rem; padding: 1.8rem 1rem 1.7rem 0; border-radius: 0.5rem; margin-left: 2rem; cursor: pointer; } .groupColourPicker:before { content: ""; position: absolute; top: 0; left: -2rem; height: 100%; width: 2.2rem; background-image: url(imgs/btn.svg); background-size: 100% 100%; transform: rotate(180deg); } .groupColourPicker .minicolors { background: whitesmoke; height: 100%; display: flex !important; align-items: center !important; } .groupColourPicker .minicolors-swatch { top: unset !important; left: -1.2rem !important; width: 5.5rem !important; height: 5rem !important; mask: url("imgs/dropdown-hex.svg") no-repeat center; -webkit-mask: url("imgs/dropdown-hex.svg") no-repeat center; mask-size: contain; -webkit-mask-size: contain; cursor: pointer; } .groupColourPicker .minicolors-input { font-size: 12px; padding-left: 38px !important; } .groupColourPicker .minicolors-panel { top: 6rem !important; } .groupCreatePage { width: 100%; } .groupCreatePage .gform_wrapper.gform_wrapper.gravity-theme .gform_footer { background-color: var(--colour-group-main) !important; } .groupMeetings { width: 100%; } .groupMeetings_pageTitle { font-size: 4rem; font-weight: 400; margin-bottom: 3rem; display: flex; align-items: center; justify-content: space-between; line-height: 1.2; } @media (max-width: 992px) { .groupMeetings_pageTitle { flex-direction: column; row-gap: 2rem; align-items: flex-start; } } .groupMeetings__createMeeting { margin-bottom: 4rem; display: flex; justify-content: flex-end; } .meetingCard { background: var(--colour-lightgray); border-radius: .5rem; padding: 3rem; position: relative; } .meetingCard__live-badge { position: absolute; top: 1rem; right: 1rem; background-color: green; color: white; text-transform: uppercase; font-size: 11px; letter-spacing: 0.5px; font-weight: 400; z-index: 10; padding: 2px 5px; line-height: 1; border-radius: 5px; display: flex; align-items: center; justify-content: center; column-gap: 0.5rem; } @keyframes blink { 0% { opacity: 1; } 50% { opacity: 0.5; } 100% { opacity: 1; } } .meetingCard__live-badge span { width: 5px; height: 5px; background-color: white; border-radius: 50px; animation: blink 1s infinite; } .meetingCard_title { font-size: 3rem; font-weight: 400; line-height: 1.2; } .meetingCard .btn, .meetingCard .bbpress-wrapper .button.submit, .bbpress-wrapper .meetingCard .button.submit, .meetingCard .bbpress-wrapper .subscription-toggle, .bbpress-wrapper .meetingCard .subscription-toggle { margin-top: 2rem; width: auto; } .groupMeeting { width: 100%; display: flex; flex-direction: row; column-gap: 10rem; } @media (max-width: 992px) { .groupMeeting { flex-direction: column; row-gap: 3rem; } } .groupMeeting_main { width: 70%; } @media (max-width: 992px) { .groupMeeting_main { width: 100%; } } .groupMeeting_title { font-size: 4rem; font-weight: 400; display: flex; align-items: center; justify-content: space-between; line-height: 1.2; } @media (max-width: 992px) { .groupMeeting_title { flex-direction: column; align-items: flex-start; row-gap: 2rem; margin-bottom: 3rem; } } .groupMeeting_date-and-time { font-size: 3rem; font-weight: 400; margin-bottom: 2rem; line-height: 1.2; } .groupMeeting_sidebar { width: 30%; background-color: var(--colour-lightgray); border-radius: 0.5rem; padding: 3rem; display: flex; flex-direction: column; row-gap: 2rem; } @media (max-width: 992px) { .groupMeeting_sidebar { width: 100%; } } .groupMeeting_sidebar a { width: 100%; } .groupCreateMeeting, .groupEditMeeting { width: 100%; } .groupCreateMeeting .gform_title, .groupEditMeeting .gform_title { font-size: 4rem; font-weight: 400; margin-bottom: 3rem; display: flex; align-items: center; justify-content: space-between; } .groupCreateMeeting .dateTimeDurationField, .groupEditMeeting .dateTimeDurationField { display: flex; flex-direction: row; column-gap: 2rem; } @media (max-width: 992px) { .groupCreateMeeting .dateTimeDurationField, .groupEditMeeting .dateTimeDurationField { flex-direction: column; } } .groupCreateMeeting .dateTimeDurationField > div, .groupEditMeeting .dateTimeDurationField > div { width: 50%; } @media (max-width: 992px) { .groupCreateMeeting .dateTimeDurationField > div, .groupEditMeeting .dateTimeDurationField > div { width: 100%; } } .groupCreateMeeting .dateTimeDurationField_duration, .groupEditMeeting .dateTimeDurationField_duration { display: flex; flex-direction: row; align-items: center; column-gap: 2rem; } .groupCreateMeeting .dateTimeDurationField_duration div, .groupEditMeeting .dateTimeDurationField_duration div { display: flex; flex-direction: row; align-items: center; column-gap: 1rem; } .groupCreateMeeting .specificMembersField label, .groupEditMeeting .specificMembersField label { margin-bottom: 0; } .groupCreateMeeting .specificMembersField__selected-list, .groupEditMeeting .specificMembersField__selected-list { display: flex; flex-direction: row; column-gap: 0.5rem; flex-wrap: wrap; margin-top: 2rem; } .groupCreateMeeting .specificMembersField__selected-list li, .groupEditMeeting .specificMembersField__selected-list li { font-size: 1.7rem; background: var(--colour-lightgray); padding: 0.5rem 1.5rem; border-radius: 0.5rem; display: flex; align-items: center; column-gap: 1rem; cursor: pointer; } .groupCreateMeeting .specificMembersField__selected-list li span, .groupEditMeeting .specificMembersField__selected-list li span { color: red; } .groupCreateMeeting .specificMembersField .jsToMeetingMembersList, .groupEditMeeting .specificMembersField .jsToMeetingMembersList { color: var(--colour-group-main); text-decoration: underline; } .groupCreateMeeting .gform_wrapper.gform_wrapper.gravity-theme .gform_footer, .groupEditMeeting .gform_wrapper.gform_wrapper.gravity-theme .gform_footer { background-color: var(--colour-group-main) !important; } .groupCreateMeeting__confirmation { text-align: center; } .meetingDelete { width: 100%; max-width: 102.4rem; margin-left: auto; margin-right: auto; } .meetingDelete .jsDeleteMeeting { display: inline-flex; color: red; margin-bottom: 4rem; } .forumMain { width: 100%; margin-top: 4rem; margin-bottom: 4rem; } .forumMain_title { font-size: 4rem; font-weight: 400; margin-bottom: 1rem; display: flex; align-items: center; justify-content: space-between; line-height: 1.2; } .bbpress-wrapper input[type="text"], .bbpress-wrapper input[type="textarea"], .bbpress-wrapper select { margin-top: 5px !important; } .bbpress-wrapper select { padding: 1.5rem 2rem !important; } .bbpress-wrapper input[type="checkbox"] { appearance: none; height: 3rem; } .bbpress-wrapper input[type="checkbox"]:before { content: ""; display: inline-block; width: 3rem; height: 3rem; background-color: #E2DCD4; margin-right: 1.8rem; border-radius: 5px; } @media (min-width: 992px) { .bbpress-wrapper input[type="checkbox"]:before { margin-right: 3.5rem; } } .bbpress-wrapper input[type="checkbox"]:checked:before { content: "\f00c"; font-family: "Font Awesome 6 Pro"; font-weight: 900; display: flex; align-items: center; justify-content: center; font-size: 1.8rem; } .bbpress-wrapper .button.submit { cursor: pointer; } .bbpress-wrapper .subscription-toggle { margin-bottom: 1rem; } #bbpress-forums, #bbpress-forums ul.bbp-forums, #bbpress-forums ul.bbp-lead-topic, #bbpress-forums ul.bbp-replies, #bbpress-forums ul.bbp-search-results, #bbpress-forums ul.bbp-topics, div.bbp-template-notice li, div.bbp-template-notice p, #bbpress-forums .bbp-forum-info .bbp-forum-content, #bbpress-forums p.bbp-topic-meta { font-size: unset; } #bbpress-forums li.bbp-header, #bbpress-forums li.bbp-footer { font-weight: 400; } .bbp_form_checkbox_p { display: flex; align-items: center; column-gap: 1rem; } .bbp_form_checkbox_p input { margin-bottom: 0 !important; } .bbp_topic_toc a { color: var(--colour-darkblue); text-decoration: underline; } .groupMembers { width: 100%; } .groupMembers_pageTitle { font-size: 4rem; font-weight: 400; margin-bottom: 3rem; display: flex; align-items: center; justify-content: space-between; line-height: 1.2; } .groupMembers_pageTitle span { font-size: 3rem; font-weight: 400; line-height: 1.2; color: var(--colour-darkgray); opacity: 0.5; } @media (max-width: 992px) { .groupMembers_pageTitle { flex-direction: column; align-items: flex-start; gap: 1rem; } } .groupMembers_joinRequests { background: var(--colour-lightgray); padding: 3rem; border-radius: .5rem; margin-bottom: 5rem; } .groupMembers_joinRequests_usersList { display: flex; flex-direction: column; } .groupMembers_joinRequests_usersList li .listItem { display: flex; align-items: center; justify-content: space-between; padding: 1rem; background: white; border-radius: .5rem; line-height: 1.2; transition: all .3s; margin-top: 2rem; } .groupMembers_joinRequests_usersList li .listItem_who { display: flex; align-items: center; column-gap: 2rem; width: 35%; } .groupMembers_joinRequests_usersList li .listItem_who .label-external { display: block; font-size: 1.6rem; margin-bottom: 0.5rem; color: var(--colour-darkgray); } .groupMembers_joinRequests_usersList li .listItem_who img { border-radius: .5rem; width: 7rem; } .groupMembers_joinRequests_usersList li .listItem_memberOrganisationRole { margin-right: auto; } .groupMembers_joinRequests_usersList li .listItem_actions { display: flex; flex-direction: row; align-items: center; column-gap: 2rem; padding-left: 1.5rem; position: relative; } .groupMemberCard { background: var(--colour-lightgray); border-radius: .5rem; padding: 3rem; display: flex; gap: 3rem; position: relative; align-items: flex-start; flex-wrap: wrap; } .groupMemberCard__admin { border: 1px solid var(--colour-group-main); } .groupMemberCard__badge { position: absolute; top: 5px; left: 5px; text-transform: uppercase; font-size: 11px; letter-spacing: 0.5px; font-weight: 400; padding: 2px 5px; line-height: 1; border-radius: 5px; } .groupMemberCard__badge--owner { background: var(--colour-group-main); color: white; } .groupMemberCard__badge--admin { background: var(--colour-group-accent); color: var(--colour-group-main); } .groupMemberCard__badge--editor { background: white; color: var(--colour-group-main); } .groupMemberCard__editMember { position: absolute; top: 1rem; right: 1rem; cursor: pointer; } .groupMemberCard__editMember .btn-edit { display: block; width: 5rem; height: 4rem; } .groupMemberCard_picture { flex: 0 0 30%; max-width: 150px; aspect-ratio: 1 / 1; border-radius: .5rem; overflow: hidden; display: flex; align-items: center; justify-content: center; } .groupMemberCard_picture_inner { width: 100%; height: 100%; background: var(--colour-group-main); border-radius: 0.5rem; } .groupMemberCard_picture_inner img { width: 100%; height: 100%; object-fit: cover; border-radius: .5rem; } .groupMemberCard_info { flex: 1; display: flex; flex-direction: column; overflow: hidden; min-width: 0; } .groupMemberCard_info p { margin: 1rem 0; line-height: 1.2; } .groupMemberCard_info_name { font-size: 3rem; font-weight: 400; line-height: 1.2; } .groupMemberCard_info_socials { display: flex; align-items: center; column-gap: 2rem; margin-top: 1rem; } .groupMemberCard_info_socials a { display: flex; align-items: center; } .groupMemberCard_info_socials a img { width: 3rem; } .groupMemberCard_removeLink { color: red; font-size: 1.7rem; margin-top: 1rem; } @media (max-width: 992px) { .groupMemberCard { flex-direction: column; align-items: center; text-align: center; } .groupMemberCard_picture { flex: unset; max-width: 200px; } .groupMemberCard_info { width: 100%; text-align: center; } } .memberPermissionsForm__title { font-size: 2.5rem; font-weight: 400; border-bottom: 2px solid var(--colour-lightgray); padding-bottom: 2rem; margin-bottom: 2rem; } .memberPermissionsForm__field { margin-bottom: 1.5rem; display: flex; } .memberPermissionsForm label { display: flex; font-weight: 400; line-height: normal; } .memberPermissionsForm input[type="checkbox"] { appearance: none; height: 3rem; } .memberPermissionsForm input[type="checkbox"]:before { content: ""; display: inline-block; width: 3rem; height: 3rem; background-color: #F3F3F3; border: 1px solid #707070; margin-right: 1.8rem; border-radius: 5px; } @media (min-width: 992px) { .memberPermissionsForm input[type="checkbox"]:before { margin-right: 2rem; } } .memberPermissionsForm input[type="checkbox"]:checked:before { content: "\f00c"; font-family: "Font Awesome 6 Pro"; font-weight: 900; display: flex; align-items: center; justify-content: center; font-size: 1.8rem; } .memberPermissionsForm #member_specific_pages { display: flex; flex-direction: column; row-gap: 5px; margin-bottom: 2rem; border: 1px solid grey; border-radius: 5px; padding: 5px; } .memberPermissionsForm #member_specific_pages label { font-weight: 300; }