@charset "UTF-8"; @import url(../node_modules/@fortawesome/fontawesome-pro/css/all.min.css); @import url("https://fonts.googleapis.com/css2?family=Montserrat:wght@400;600&display=swap"); @import url("https://use.typekit.net/grj6vda.css"); :root { --colourwhite: #fff9f2; --colourblack: #000000; --colourdarkgrey: #232323; --colourmediumdarkgrey: #707070; --colouryellow: #EDB04A; --colourorange: #FAAD29; --colourwarmorange:#FBAB3A; --colourblue: #457DBF; --colournavy: #14293A; --colourpink: #F59797; --colourputty: #FEF7EE; --colourgreen: #005C54; --colourgrayblue: #D1D4D9; --font-size-xxxs: 1.6rem; --font-size-xxs: 1.8rem; --font-size-xs: 2.0rem; --font-size-sm: 2.2rem; --font-size-base: 2.5rem; --font-size-base2: 3.0rem; --font-size-md: 4.0rem; --font-size-lg: 6.0rem; --font-size-xl: 12.0rem; --font-family-Montserrat: 'Montserrat', sans-serif; --font-family-jubilat: "jubilat", serif; } /*** 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, iframe, canvas, img, svg, video, audio):not(svg *, 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 { font-size: 62.5% !important; } @media (min-width: 1800px) { html { font-size: 62.5% !important; } } body { background-color: var(--colourputty); zoom: 100%; } @media (min-width: 992px) { body { zoom: 70%; } } @media (min-width: 1650px) { body { zoom: 100%; } } html { overflow-x: hidden; } .container { max-width: 1500px; padding: 0 20px; margin: 0 auto; } @media (min-width: 1024px) { .container { padding: 0 100px; } } @media (min-width: 1700px) { .container { max-width: 1700px; padding: 0 10px; } } .vs_flexibleContent { font-family: var(--font-family-Montserrat); font-size: var(--font-size-xs); font-weight: 400; line-height: 30px; color: var(--colourdarkgrey); position: relative; } .vs_absolute_background_image_container { width: 100%; max-width: 1760px; position: absolute; right: 0; display: flex; justify-content: flex-end; } .vs_absolute_background_image_wrapper { width: 100%; max-width: calc(50% + 5px); padding-left: 13%; } @media (min-width: 1700px) { .vs_absolute_background_image_wrapper { max-width: calc(calc((100vw - 1760px) / 2) + calc(1760px - 63%)); padding-left: 0; } } .vs_absolute_background_image { width: 100%; position: relative; z-index: 1; display: none; } @media (min-width: 992px) { .vs_absolute_background_image { display: block; } } .vs_flexibleContent p { margin: 0; padding-bottom: 40px; } .vs_container-small { width: 100%; padding: 0 20px; max-width: 1080px; } .vs_container-medium { width: 100%; padding: 0 20px; max-width: 1395px; } .vs_container-half { width: 100%; } @media (min-width: 992px) { .vs_container-half { width: 50%; max-width: calc(100% - 706px); } } .vs_container { width: 100%; padding: 0 20px; max-width: 1760px; display: flex; flex-wrap: wrap; position: relative; } .vs_position-center { margin: 0 auto; } .vs_background { position: relative; display: flex; flex-direction: column; background-size: cover; } .vs_background_container { position: relative; width: 100%; z-index: 1; } .vs_background_image { width: 100%; display: none; /*display: block;*/ } .vs_justify_end { justify-content: flex-end; } .vs_justify_center { justify-content: center; } .vs_justify_start { justify-content: flex-start; } .vs_text_center { text-align: center; } .vs_minHeight { position: relative; width: 100%; } .vs_btn { background-color: var(--colourblue); width: 100%; color: var(--colourwhite); text-align: center; cursor: pointer; border-radius: 62px; font-size: var(--font-size-xxs); display: inline-block; width: auto; font-weight: 300; padding: 16px 40px; } @media (min-width: 768px) { .vs_btn { padding: 20px 40px; } } .vs_btn:hover, .vs_btn:visited, .vs_btn:active, .vs_btn:focus { background-color: var(--colourblue); color: var(--colourwhite); } .vs_btn-large { padding: 24px 40px; min-width: 100%; font-size: var(--font-size-xxs); } @media (min-width: 768px) { .vs_btn-large { min-width: 550px; font-size: var(--font-size-sm); padding: 28px 40px; } } .vs_btn-border { border-style: solid; border-width: 4px; padding-top: 16px; padding-bottom: 16px; } .vs_btn-green { background-color: var(--colourgreen); color: var(--colourwhite); } .vs_btn-green:hover, .vs_btn-green:visited, .vs_btn-green:active { background-color: var(--colourgreen); color: var(--colourwhite); } .vs_btn-warmorange { background-color: var(--colourwarmorange); color: var(--colourdarkgrey); } .vs_btn-warmorange:hover, .vs_btn-warmorange:visited, .vs_btn-warmorange:active { background-color: var(--colourwarmorange); color: var(--colourdarkgrey); } .vs_btn-white { background-color: var(--colourwhite); color: var(--colourdarkgrey); } .vs_btn-white:hover, .vs_btn-white:visited, .vs_btn-white:active { background-color: var(--colourwhite); color: var(--colourdarkgrey); } .vs_btn-full { width: 100%; } .vs_btn-rightmargin { margin-right: 10px; margin-bottom: 10px; } .row { display: flex; flex-wrap: wrap; margin: 0 -10px; align-items: center; } .row > * { padding: 0 10px; } .transition { transition: all 0.3s ease; } .spacer-0 { height: 0px; } .spacer-5 { height: 5px; } .spacer-10 { height: 10px; } .spacer-15 { height: 15px; } .spacer-20 { height: 20px; } .spacer-25 { height: 25px; } .spacer-30 { height: 30px; } .spacer-35 { height: 35px; } .spacer-40 { height: 40px; } .spacer-45 { height: 45px; } .spacer-50 { height: 50px; } .spacer-55 { height: 55px; } .spacer-60 { height: 60px; } .spacer-65 { height: 65px; } .spacer-70 { height: 70px; } .spacer-75 { height: 75px; } .spacer-80 { height: 80px; } .spacer-85 { height: 85px; } .spacer-90 { height: 90px; } .spacer-95 { height: 95px; } .spacer-100 { height: 100px; } @media (min-width: 768px) { .spacer-md-0 { height: 0px; } } @media (min-width: 768px) { .spacer-md-5 { height: 5px; } } @media (min-width: 768px) { .spacer-md-10 { height: 10px; } } @media (min-width: 768px) { .spacer-md-15 { height: 15px; } } @media (min-width: 768px) { .spacer-md-20 { height: 20px; } } @media (min-width: 768px) { .spacer-md-25 { height: 25px; } } @media (min-width: 768px) { .spacer-md-30 { height: 30px; } } @media (min-width: 768px) { .spacer-md-35 { height: 35px; } } @media (min-width: 768px) { .spacer-md-40 { height: 40px; } } @media (min-width: 768px) { .spacer-md-45 { height: 45px; } } @media (min-width: 768px) { .spacer-md-50 { height: 50px; } } @media (min-width: 768px) { .spacer-md-55 { height: 55px; } } @media (min-width: 768px) { .spacer-md-60 { height: 60px; } } @media (min-width: 768px) { .spacer-md-65 { height: 65px; } } @media (min-width: 768px) { .spacer-md-70 { height: 70px; } } @media (min-width: 768px) { .spacer-md-75 { height: 75px; } } @media (min-width: 768px) { .spacer-md-80 { height: 80px; } } @media (min-width: 768px) { .spacer-md-85 { height: 85px; } } @media (min-width: 768px) { .spacer-md-90 { height: 90px; } } @media (min-width: 768px) { .spacer-md-95 { height: 95px; } } @media (min-width: 768px) { .spacer-md-100 { height: 100px; } } @media (min-width: 1024px) { .spacer-xl-0 { height: 0px; } } @media (min-width: 1024px) { .spacer-xl-5 { height: 5px; } } @media (min-width: 1024px) { .spacer-xl-10 { height: 10px; } } @media (min-width: 1024px) { .spacer-xl-15 { height: 15px; } } @media (min-width: 1024px) { .spacer-xl-20 { height: 20px; } } @media (min-width: 1024px) { .spacer-xl-25 { height: 25px; } } @media (min-width: 1024px) { .spacer-xl-30 { height: 30px; } } @media (min-width: 1024px) { .spacer-xl-35 { height: 35px; } } @media (min-width: 1024px) { .spacer-xl-40 { height: 40px; } } @media (min-width: 1024px) { .spacer-xl-45 { height: 45px; } } @media (min-width: 1024px) { .spacer-xl-50 { height: 50px; } } @media (min-width: 1024px) { .spacer-xl-55 { height: 55px; } } @media (min-width: 1024px) { .spacer-xl-60 { height: 60px; } } @media (min-width: 1024px) { .spacer-xl-65 { height: 65px; } } @media (min-width: 1024px) { .spacer-xl-70 { height: 70px; } } @media (min-width: 1024px) { .spacer-xl-75 { height: 75px; } } @media (min-width: 1024px) { .spacer-xl-80 { height: 80px; } } @media (min-width: 1024px) { .spacer-xl-85 { height: 85px; } } @media (min-width: 1024px) { .spacer-xl-90 { height: 90px; } } @media (min-width: 1024px) { .spacer-xl-95 { height: 95px; } } @media (min-width: 1024px) { .spacer-xl-100 { height: 100px; } } .ml-0 { margin-left: 0px; } .ml-5 { margin-left: 5px; } .ml-10 { margin-left: 10px; } .ml-15 { margin-left: 15px; } .ml-20 { margin-left: 20px; } .ml-25 { margin-left: 25px; } .ml-30 { margin-left: 30px; } .ml-35 { margin-left: 35px; } .ml-40 { margin-left: 40px; } .ml-45 { margin-left: 45px; } .ml-50 { margin-left: 50px; } .ml-55 { margin-left: 55px; } .ml-60 { margin-left: 60px; } .ml-65 { margin-left: 65px; } .ml-70 { margin-left: 70px; } .ml-75 { margin-left: 75px; } .ml-80 { margin-left: 80px; } .ml-85 { margin-left: 85px; } .ml-90 { margin-left: 90px; } .ml-95 { margin-left: 95px; } .ml-100 { margin-left: 100px; } @media (min-width: 768px) { .ml-md-0 { margin-left: 0px; } } @media (min-width: 768px) { .ml-md-5 { margin-left: 5px; } } @media (min-width: 768px) { .ml-md-10 { margin-left: 10px; } } @media (min-width: 768px) { .ml-md-15 { margin-left: 15px; } } @media (min-width: 768px) { .ml-md-20 { margin-left: 20px; } } @media (min-width: 768px) { .ml-md-25 { margin-left: 25px; } } @media (min-width: 768px) { .ml-md-30 { margin-left: 30px; } } @media (min-width: 768px) { .ml-md-35 { margin-left: 35px; } } @media (min-width: 768px) { .ml-md-40 { margin-left: 40px; } } @media (min-width: 768px) { .ml-md-45 { margin-left: 45px; } } @media (min-width: 768px) { .ml-md-50 { margin-left: 50px; } } @media (min-width: 768px) { .ml-md-55 { margin-left: 55px; } } @media (min-width: 768px) { .ml-md-60 { margin-left: 60px; } } @media (min-width: 768px) { .ml-md-65 { margin-left: 65px; } } @media (min-width: 768px) { .ml-md-70 { margin-left: 70px; } } @media (min-width: 768px) { .ml-md-75 { margin-left: 75px; } } @media (min-width: 768px) { .ml-md-80 { margin-left: 80px; } } @media (min-width: 768px) { .ml-md-85 { margin-left: 85px; } } @media (min-width: 768px) { .ml-md-90 { margin-left: 90px; } } @media (min-width: 768px) { .ml-md-95 { margin-left: 95px; } } @media (min-width: 768px) { .ml-md-100 { margin-left: 100px; } } @media (min-width: 768px) { .min-height-0 { min-height: 0px; } } @media (min-width: 768px) { .min-height-50 { min-height: 50px; } } @media (min-width: 768px) { .min-height-100 { min-height: 100px; } } @media (min-width: 768px) { .min-height-150 { min-height: 150px; } } @media (min-width: 768px) { .min-height-200 { min-height: 200px; } } @media (min-width: 768px) { .min-height-250 { min-height: 250px; } } @media (min-width: 768px) { .min-height-300 { min-height: 300px; } } @media (min-width: 768px) { .min-height-350 { min-height: 350px; } } @media (min-width: 768px) { .min-height-400 { min-height: 400px; } } @media (min-width: 768px) { .min-height-450 { min-height: 450px; } } @media (min-width: 768px) { .min-height-500 { min-height: 500px; } } @media (min-width: 768px) { .min-height-550 { min-height: 550px; } } @media (min-width: 768px) { .min-height-600 { min-height: 600px; } } @media (min-width: 768px) { .min-height-650 { min-height: 650px; } } @media (min-width: 768px) { .min-height-700 { min-height: 700px; } } @media (min-width: 768px) { .min-height-750 { min-height: 750px; } } @media (min-width: 768px) { .min-height-800 { min-height: 800px; } } @media (min-width: 768px) { .min-height-850 { min-height: 850px; } } @media (min-width: 768px) { .min-height-900 { min-height: 900px; } } @media (min-width: 768px) { .min-height-950 { min-height: 950px; } } @media (min-width: 768px) { .min-height-1000 { min-height: 1000px; } } .mobile-only { display: block; width: 100%; } @media (min-width: 768px) { .mobile-only { display: none; } } .desktop-only { display: none; } @media (min-width: 768px) { .desktop-only { display: flex; width: 100%; } } .mobile-xl-only { display: block; width: 100%; } @media (min-width: 1024px) { .mobile-xl-only { display: none; } } .xl-only { display: none; } @media (min-width: 1024px) { .xl-only { display: flex; width: 100%; } } .laptop-mobile-only { display: block; width: 100%; } @media (min-width: 992px) { .laptop-mobile-only { display: none; } } .laptop-only { display: none; } @media (min-width: 992px) { .laptop-only { display: flex; width: 100%; } } .desktop-only-block { display: none; } @media (min-width: 768px) { .desktop-only-block { display: block; width: 100%; } } input[type="text"].vs_input, input[type="email"].vs_input, input[type="url"].vs_input, input[type="password"].vs_input, input[type="search"].vs_input { padding: 20px 40px; background-color: var(--colourwhite); border-radius: 30px; font-family: var(--font-family-Montserrat); font-size: var(--font-size-xxs); color: var(--colourdarkgrey); width: 100%; } .vs_checkbox { all: revert; height: 25px; width: 25px; margin-right: 10px; } .vs_label { font-family: var(--font-family-Montserrat); font-size: var(--font-size-xxxs); color: var(--colourdarkgrey); display: flex; align-items: center; } .vs_image_one { position: absolute; top: 0; left: 0; width: 30%; z-index: 1; } @media (min-width: 640px) { .vs_image_one { width: 15%; } } @media (min-width: 1024px) { .vs_image_one { width: 20%; } } .vs_image_one-alt { bottom: 0; top: auto; } .vs_image_two { position: absolute; bottom: 0; right: 0; width: 47%; z-index: 1; } @media (min-width: 640px) { .vs_image_two { width: 15%; } } @media (min-width: 1024px) { .vs_image_two { width: 20%; } } .vs_image_two-alt { top: 0; bottom: auto; } #vs_image_one-189278 { width: 65%; } @media (min-width: 640px) { #vs_image_one-189278 { width: 60%; } } @media (min-width: 992px) { #vs_image_one-189278 { width: 20%; } } #vs_image_two-189279 { width: 70%; } @media (min-width: 640px) { #vs_image_two-189279 { width: 65%; } } @media (min-width: 992px) { #vs_image_two-189279 { width: 20%; } } #vs_image_one-189281 { width: 54%; } @media (min-width: 640px) { #vs_image_one-189281 { width: 25%; } } @media (min-width: 1024px) { #vs_image_one-189281 { width: 20%; } } #vs_image_two-189282 { width: 38%; } @media (min-width: 640px) { #vs_image_two-189282 { width: 25%; } } @media (min-width: 1024px) { #vs_image_two-189282 { width: 20%; } } .vs_left_hand_side_image { width: 100%; } @media (min-width: 992px) { .vs_left_hand_side_image { position: absolute; left: 0; top: 0; width: auto; height: 100%; } } .vs_right_hand_side_image { width: 100%; } @media (min-width: 992px) { .vs_right_hand_side_image { position: absolute; right: 0; top: 0; width: auto; height: 100%; } } .vs_container-half-189311 { width: 100%; } @media (min-width: 992px) { .vs_container-half-189311 { width: 60%; } } .vs_right_hand_side_image_absolute { position: absolute; right: 0; top: 0; width: 61%; } @media (min-width: 992px) { .vs_right_hand_side_image_absolute { width: 50%; } } .vs_sub_heading_heading { margin-bottom: 20px; } @media (min-width: 992px) { .vs_sub_heading_heading { margin-bottom: 30px; } } .vs_sub_heading_details { margin-bottom: 20px; } @media (min-width: 992px) { .vs_sub_heading_details { margin-bottom: 30px; } } .has-ahep-blue-background-color { background-color: #447CBF !important; } .has-ahep-blue-color { color: #447CBF !important; } .has-ahep-orange-background-color { background-color: #EE7248 !important; } .has-ahep-orange-color { color: #EE7248 !important; } .page-template-template-approvalforms .gform_wrapper.gf_browser_chrome ul.gform_fields li.gfield select { background-image: url("../img/chevron-down-solid.svg"); background-repeat: no-repeat; background-size: 14px; background-position: right 5px center; } .page-template-template-approvalforms .ui-datepicker { width: 269px !important; } .page-template-template-approvalforms .ui-datepicker .ui-datepicker-prev span, .page-template-template-approvalforms .ui-datepicker .ui-datepicker-next span { display: none; } li#field_145_6 { visibility: hidden; } .vs_header { background-color: var(--colournavy); padding: 20px 0; } @media (min-width: 1000px) { .vs_header { padding: 10px 0; } } .vs_header_logo { width: 152px; height: auto; } @media (min-width: 1000px) { .vs_header_logo { width: 232px; } } .vs_header_menu { display: flex; align-items: center; margin: 0; padding: 0; flex-direction: column; margin-bottom: 10px; } @media (min-width: 1000px) { .vs_header_menu { flex-direction: row; margin-right: 50px; margin-bottom: 0; } } .vs_header_menu_wrapper { display: none; align-items: center; position: absolute; left: 0; width: 100%; flex-direction: column; z-index: 9999; top: 73px; background-color: var(--colournavy); padding: 0 20px 20px; } @media (min-width: 1000px) { .vs_header_menu_wrapper { display: flex !important; position: relative; width: auto; flex-direction: row; padding: 20px; top: 0; } } .vs_header_menu_item { margin: 0; padding: 0; } @media (min-width: 1000px) { .vs_header_menu_item { margin-left: 25px; margin-right: 25px; } .vs_header_menu_item:first-child { margin-left: 0; } .vs_header_menu_item:last-child { margin-right: 0; } } @media (min-width: 1000px) { .vs_header_menu_item:hover .vs_header_submenu { opacity: 1; visibility: visible; display: block; } } .vs_header_menu_link { color: var(--colourwhite); font-size: var(--font-size-sm); letter-spacing: 0.5px; font-weight: 300; padding: 17px; display: inline-block; width: 100%; text-align: center; font-weight: 500; } @media (min-width: 1000px) { .vs_header_menu_link { font-size: var(--font-size-xxs); padding: 0; width: auto; text-align: left; } } .vs_header_menu_link:hover, .vs_header_menu_link:focus, .vs_header_menu_link:active, .vs_header_menu_link:visited { color: var(--colourwhite); } .vs_header_menu_link_chevron { font-size: var(--font-size-xxxs); color: var(--colourorange); margin-left: 3px; } .vs_header_btn { text-align: center; } @media (min-width: 1000px) { .vs_header_btn { text-align: left; margin-bottom: 0; } } .vs_header_btn_left, .vs_header_btn_right { margin-bottom: 10px; } .vs_header_btn_left { margin-right: 5px; } .vs_header_btn_right { margin-left: 5px; } .vs_header_btn .vs_btn { font-weight: 500; } .vs_header_wrapper { display: flex; justify-content: center; align-items: center; width: 100%; } @media (min-width: 1000px) { .vs_header_wrapper { justify-content: space-between; } } .vs_header_submenu { display: none; background-color: var(--colournavy); margin: 0; } @media (min-width: 1000px) { .vs_header_submenu { position: absolute; top: 68px; display: flex; flex-direction: column; opacity: 0; visibility: hidden; transition: all .3s ease-in-out; width: 261px; z-index: 3; padding: 20px 20px 10px; } } .vs_header_submenu .vs_header_menu_item { margin: 0; padding: 0; padding-bottom: 10px; text-align: center; } @media (min-width: 1000px) { .vs_header_submenu .vs_header_menu_item { text-align: left; } } .vs_header_submenu .vs_header_menu_link { font-size: var(--font-size-xxs); padding-top: 10px; padding-bottom: 10px; } @media (min-width: 1000px) { .vs_header_submenu .vs_header_menu_link { padding-top: 17px; padding-bottom: 17px; } } .vs_header_button { position: absolute; left: 5px; top: 0; z-index: 9999; height: 55px; width: 65px; transition: all .3s ease; cursor: pointer; } @media (min-width: 1000px) { .vs_header_button { display: none; } } .vs_header_button_top, .vs_header_button_middle, .vs_header_button_bottom { position: absolute; background: var(--colourwhite); border: none; height: 3px; width: 50%; left: 50%; transform: translateX(-50%); transition: all .3s ease; } .vs_header_button_top { top: 16px; } .vs_header_button_middle { top: 27px; } .vs_header_button_bottom { top: 38px; } .vs_header_button-active .vs_header_button_top { transform: translateY(11px) translateX(-50%) rotate(45deg); background: var(--colourwhite); } .vs_header_button-active .vs_header_button_middle { opacity: 0; background: var(--colourwhite); } .vs_header_button-active .vs_header_button_bottom { transform: translateY(-9px) translateX(-50%) rotate(-45deg); background: var(--colourwhite); } .vs_signup { background-color: var(--colourwarmorange); padding-top: 100px; padding-bottom: 100px; } .vs_signup_wrapper { display: flex; width: 100%; flex-wrap: wrap; justify-content: space-between; } .vs_signup_col { width: 100%; display: flex; flex-wrap: wrap; flex-direction: column; } @media (min-width: 1536px) { .vs_signup_col:first-child { padding-right: 65px; max-width: 37%; } .vs_signup_col:last-child { padding-left: 65px; max-width: 63%; } } .vs_signup_col_col { display: flex; justify-content: space-between; align-items: flex-start; } .vs_signup_title { font-weight: 300; color: var(--colourdarkgrey); padding-bottom: 20px; font-family: var(--font-family-jubilat); line-height: 1; font-size: var(--font-size-md); } @media (min-width: 992px) { .vs_signup_title { font-size: var(--font-size-lg); } } .vs_signup_content p { font-family: var(--font-family-Montserrat); line-height: 1.3; color: var(--colourdarkgrey); font-size: var(--font-size-xs); margin-bottom: 50px; } @media (min-width: 992px) { .vs_signup_content p { font-size: var(--font-size-base); margin-bottom: 20px; } } .vs_signup_firstName { width: 20%; } .vs_signup_lastName { width: 20%; } .vs_signup_email { width: 40%; } .vs_signup_button { width: 20%; } .vs_signup .gform_wrapper { background: inherit; width: 100%; max-width: 100%; margin: 0; padding: 0; } @media (min-width: 1536px) { .vs_signup .gform_wrapper { padding-left: 65px; max-width: 63%; } } .vs_signup .gfield_label { display: none !important; } .vs_signup .gform_wrapper li.gfield { margin-top: 0 !important; margin-bottom: 20px !important; } @media (min-width: 992px) { .vs_signup .gform_wrapper li.gfield { margin-bottom: 10px !important; margin-top: 0 !important; } } .vs_signup .gform_wrapper li.gfield input, .vs_signup .gform_wrapper li.gfield select, .vs_signup .gform_wrapper li.gfield textarea { text-indent: 0; padding: 20px 40px !important; background-color: var(--colourwhite); border-radius: 30px; font-family: var(--font-family-Montserrat) !important; font-size: var(--font-size-xxs) !important; color: var(--colourdarkgrey); width: 100% !important; border: 0; line-height: 1.3 !important; min-height: auto !important; } .vs_signup .gform_wrapper li.gfield input[type="checkbox"] { all: revert; height: 25px; width: 25px !important; margin-right: 10px; } .vs_signup .gform_wrapper .gfield_checkbox li { display: flex; flex-wrap: wrap; align-items: flex-start; } @media (min-width: 992px) { .vs_signup .gform_wrapper .gfield_checkbox li { align-items: center; } } .vs_signup .gform_wrapper .gfield_checkbox label { font-family: var(--font-family-Montserrat); font-size: var(--font-size-xxxs); color: var(--colourdarkgrey); line-height: 1.5; width: calc(100% - 45px); font-weight: 300 !important; } .vs_signup .gform_wrapper .button { background-color: var(--colourblue); padding: 20px 40px; width: 100% !important; color: var(--colourwhite); text-align: center; cursor: pointer; border-radius: 62px; font-size: var(--font-size-xxs) !important; display: inline-block !important; font-weight: 300; border: 0; } .vs_signup .gform_wrapper form { display: flex; flex-wrap: wrap; width: 100%; } .vs_signup .gform_wrapper .gform_body { width: 100%; } @media (min-width: 992px) { .vs_signup .gform_wrapper .gform_body { max-width: 80%; } } .vs_signup .gform_wrapper .gform_footer { width: 100%; padding-top: 0; margin-top: 0; } @media (min-width: 992px) { .vs_signup .gform_wrapper .gform_footer { max-width: calc(20% - 15px); margin-left: 15px; } } .vs_signup .gform_wrapper .gform_fields { width: 100%; display: flex; flex-wrap: wrap; } @media (min-width: 992px) { .vs_signup .gform_wrapper .gform_fields #field_145_1 { width: calc(30% - 30px); margin-left: 15px !important; margin-right: 15px !important; } .vs_signup .gform_wrapper .gform_fields #field_145_2 { width: calc(30% - 30px); margin-left: 15px !important; margin-right: 15px !important; } .vs_signup .gform_wrapper .gform_fields #field_145_3 { width: calc(40% - 30px); margin-left: 15px !important; margin-right: 15px !important; } .vs_signup .gform_wrapper .gform_fields #field_145_5 { width: 100%; margin-left: 15px !important; margin-right: 15px !important; margin-top: 15px !important; } } @media (min-width: 992px) and (min-width: 992px) { .vs_signup .gform_wrapper .gform_fields #field_145_5 .ginput_container { width: 130%; } } .vs_signup .gform_wrapper li.gfield div.ginput_container { margin-top: 0; } .vs_signup .validation_error { font-family: var(--font-family-Montserrat); line-height: 1.3; color: red !important; font-size: var(--font-size-xs) !important; margin-bottom: 50px !important; font-weight: 700 !important; border: 0 !important; padding: 0 !important; text-align: left !important; } .vs_signup .gform_wrapper li.gfield_error { background: inherit !important; border: 0 !important; padding: 10px !important; } .vs_signup .validation_message { font-family: var(--font-family-Montserrat) !important; line-height: 1.3 !important; color: red !important; font-size: var(--font-size-xxxs) !important; font-weight: 700 !important; padding: 0 !important; } .vs_signup .gform_confirmation_wrapper p { color: var(--colourdarkgrey) !important; } .vs_footer { background-color: var(--colournavy); background-image: url("../img/footer_mobile.svg"); background-repeat: no-repeat; background-position: bottom right; padding: 100px 0 45px; font-family: var(--font-family-Montserrat); } @media (min-width: 992px) { .vs_footer { background-image: url("../img/footer.svg"); } } .vs_footer_container { flex-direction: column; } .vs_footer_wrapper { display: flex; flex-wrap: wrap; justify-content: space-between; } .vs_footer_col { width: 100%; display: flex; flex-wrap: wrap; } @media (min-width: 768px) { .vs_footer_col { flex-wrap: nowrap; } } @media (min-width: 992px) { .vs_footer_col { width: 50%; } } @media (min-width: 992px) { .vs_footer_col:first-child { padding-right: 50px; } } @media (min-width: 992px) { .vs_footer_col:last-child { padding-left: 50px; } } .vs_footer_col_col { width: 100%; max-width: 100%; margin-bottom: 50px; } @media (min-width: 768px) { .vs_footer_col_col { max-width: 50%; } } @media (min-width: 992px) { .vs_footer_col_col { max-width: 100%; margin-bottom: 0; } } @media (min-width: 768px) { .vs_footer_col_col:first-child { margin-right: 25px; } } @media (min-width: 992px) { .vs_footer_col_col:first-child { margin-right: 0; } } @media (min-width: 768px) { .vs_footer_col_col:last-child { margin-left: 25px; } } @media (min-width: 992px) { .vs_footer_col_col:last-child { margin-left: 125px; } } .vs_footer_title { color: var(--colourwhite); font-size: var(--font-size-base2); font-family: var(--font-family-jubilat); margin-bottom: 20px; font-weight: 700; } .vs_footer_contact { margin: 0; } .vs_footer_contact_bullet { color: var(--colourwhite); font-size: var(--font-size-xxxs); display: flex; line-height: 1.3; } .vs_footer_contact_bullet_icon { font-size: var(--font-size-xxs); color: var(--colourwarmorange); margin-right: 10px; } .vs_footer_contact_bullet a { color: var(--colourwhite); } .vs_footer_contact_bullet a:hover, .vs_footer_contact_bullet a:focus, .vs_footer_contact_bullet a:active, .vs_footer_contact_bullet a:visited { color: var(--colourwhite); } .vs_footer_socials { display: flex; margin: 0; } .vs_footer_socials_bullet { margin-right: 30px; } .vs_footer_socials_bullet:last-child { margin-right: 0; } .vs_footer_socials_icon { font-size: var(--font-size-md); color: var(--colourblue); } .vs_footer_socials_icon:hover { color: var(--colourblue); } .vs_footer_bullets { margin: 0; } .vs_footer_bullets:first-child { margin-right: 50px; } .vs_footer_other { margin: 0; } .vs_footer_links { display: flex; } .vs_footer_link { font-size: var(--font-size-xxs); color: var(--colourwhite); } .vs_footer_link:hover, .vs_footer_link:focus, .vs_footer_link:active, .vs_footer_link:visited { color: var(--colourwhite); } .vs_footer_copy { font-size: var(--font-size-xxxs); color: var(--colourwhite); } @media (min-width: 992px) { .vs_footer_copy { margin-top: 85px; } } .vs_wysiwyg h1 { font-family: var(--font-family-jubilat); font-size: var(--font-size-md); color: var(--colourdarkgrey); margin: 0; padding: 0; padding-bottom: 20px; line-height: 1; padding-top: 50px; } @media (min-width: 992px) { .vs_wysiwyg h1 { font-size: var(--font-size-lg); padding-top: 100px; line-height: 1.3; } } .vs_wysiwyg h2 { font-family: var(--font-family-jubilat); font-size: var(--font-size-base2); color: var(--colourdarkgrey); margin: 0; padding: 0; padding-top: 20px; padding-bottom: 20px; line-height: 1.3; } @media (min-width: 992px) { .vs_wysiwyg h2 { font-size: var(--font-size-md); } } .vs_wysiwyg h3 { font-family: var(--font-family-Montserrat); color: var(--colourdarkgrey); line-height: 1.5; margin: 0; padding: 0; padding-bottom: 30px; font-size: var(--font-size-sm); } @media (min-width: 992px) { .vs_wysiwyg h3 { font-size: var(--font-size-base); } } .vs_wysiwyg h4 { font-family: var(--font-family-Montserrat); color: var(--colourdarkgrey); font-size: var(--font-size-sm); } @media (min-width: 992px) { .vs_wysiwyg h4 { font-size: var(--font-size-base); } } .vs_wysiwyg h5 { font-family: var(--font-family-Montserrat); color: var(--colourdarkgrey); font-size: var(--font-size-sm); } @media (min-width: 992px) { .vs_wysiwyg h5 { font-size: var(--font-size-base); } } .vs_wysiwyg h6 { font-family: var(--font-family-Montserrat); color: var(--colourdarkgrey); font-size: var(--font-size-sm); } @media (min-width: 992px) { .vs_wysiwyg h6 { font-size: var(--font-size-base); } } .vs_wysiwyg p { font-family: var(--font-family-Montserrat); font-size: var(--font-size-xxs); color: var(--colourdarkgrey); line-height: 1.8; margin: 0; padding: 0; padding-bottom: 30px; } @media (min-width: 992px) { .vs_wysiwyg p { font-size: var(--font-size-xs); line-height: 1.5; } } .vs_wysiwyg ul { margin: 0; padding: 0; } .vs_wysiwyg ol { margin: 0; padding: 0; } .vs_wysiwyg li { font-family: var(--font-family-Montserrat); font-size: var(--font-size-xs); color: var(--colourdarkgrey); line-height: 1.5; position: relative; padding-left: 25px; } @media (min-width: 992px) { .vs_wysiwyg li { font-size: var(--font-size-xs); line-height: 1.3; } } .vs_wysiwyg li:before { font-family: "Font Awesome 5 Pro"; font-weight: 900; content: "\f00c"; font-size: var(--font-size-xxxs); margin-top: 3px; color: var(--colourgreen); position: absolute; margin-left: -25px; } .wp-block-coblocks-accordion-item__title { background: rgba(140, 140, 151, 0.1); border-radius: 4px; padding: 10px 15px; font-size: 19px; position: relative; margin: 10px; } .wp-block-aua-blocks-quote-carousel .quote_slide, .wp-block-aua-blocks-quote-carousel .wp-block-aua-blocks-quote { background-color: #14293A; width: 100%; } .wp-block-file:not(.wp-element-button) { font-size: 1.8em; } body .w-100, body .w-100 .wp-block-button__link { width: 95%; } h5 { font-size: 20px; line-height: 30px; font-size: 1.8rem; line-height: 1.875rem; font-family: 'jubilat'; } .page_with_sidebar .pageIntro p { font-size: 16px; line-height: 1.5; font-family: 'Montserrat'; } .page_sections .pageIntro h2 { padding-bottom: 20px; font-family: 'jubilat'; } .heroHome .heroText h1 { font-weight: 500; font-family: 'jubilat'; } b, strong { font-weight: 700; font-family: 'Montserrat'; } .heroHome .heroText a { color: #fff; z-index: 10; position: absolute; font-family: 'Montserrat'; } .sectionDetails label, .sectionDetails span { font-size: 24px; padding: 20px 0 20px 20px; display: block; font-weight: 300; font-family: 'jubilat'; word-spacing: 3px; } .page_with_sidebar .sticky-nav a span { color: #494B52 !important; font-family: 'Montserrat'; font-size: 1.5rem; } .page_sections .pageIntro p { font-size: 1.2em; line-height: 1.6; font-family: 'Montserrat'; } .ul { font-size: 16px; margin-bottom: 10px; font-family: 'Montserrat'; line-height: 1.5; } .page_sections .pageIntro { padding: 20px; border-left: 12px solid #494B52; font-family: 'Montserrat'; } .sticky-nav { text-align: center; white-space: nowrap; background-color: #fff; background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAADUlEQVR42mP09A76DwADsgHn2Mh0qAAAAABJRU5ErkJggg==); background-repeat: repeat-x; background-size: 1px 6px; background-position: bottom; position: sticky; top: 0; overflow-x: auto; -webkit-overflow-scrolling: touch; -ms-overflow-style: -ms-autohiding-scrollbar; z-index: 99; font-family: 'Montserrat'; } .vs_content { position: relative; z-index: 2; } .vs_content_content { width: 100%; } .vs_content_content p { line-height: 1.5; color: inherit; font-size: var(--font-size-xxs); font-family: var(--font-family-Montserrat); } @media (min-width: 992px) { .vs_content_content p { font-size: var(--font-size-base); } } .vs_content_content-small p { font-size: var(--font-size-xxs); line-height: 1.8; } @media (min-width: 992px) { .vs_content_content-small p { font-size: var(--font-size-xs); line-height: 1.5; } } .vs_content .gform_wrapper { background-color: inherit; margin: 0; padding: 0; padding-top: 50px; } .vs_content .gform_wrapper .description_above .gfield_description { line-height: 1.5; color: inherit; color: black; font-size: var(--font-size-xxs); font-family: var(--font-family-Montserrat); margin-bottom: 30px; } @media (min-width: 992px) { .vs_content .gform_wrapper .description_above .gfield_description { font-size: var(--font-size-sm); margin-bottom: 50px; } } .vs_content .gform_wrapper .gf_progressbar_wrapper { display: none; } .vs_content .gform_wrapper .top_label .gfield_label { font-family: var(--font-family-jubilat); line-height: 1.1; margin: 0; padding-bottom: 20px; width: 100%; font-size: var(--font-size-md); color: var(--colourblack); } @media (min-width: 992px) { .vs_content .gform_wrapper .top_label .gfield_label { font-size: var(--font-size-lg); } } .vs_content .gform_wrapper .gform_page_footer { border: 0; } .vs_content .gform_wrapper .gform_page_footer .button { background-color: var(--colourblue); width: 100%; color: var(--colourwhite); text-align: center; cursor: pointer; border-radius: 62px; font-size: var(--font-size-xxs); display: inline-block; width: auto; font-weight: 300; padding: 16px 40px; border: 0; } .vs_content .gform_wrapper .gform_page_footer .button.gform_previous_button { background-color: var(--colourgreen); color: var(--colourwhite); } .vs_content .gform_wrapper ul li label { line-height: 1.5; color: inherit; font-size: var(--font-size-xxs); font-family: var(--font-family-Montserrat); } @media (min-width: 992px) { .vs_content .gform_wrapper ul li label { font-size: var(--font-size-sm); } } .vs_content .gform_wrapper .gfield_checkbox li input[type=checkbox], .vs_content .gform_wrapper ul.gform_fields li input[type=radio] { all: revert; height: 25px; width: 25px !important; margin-right: 10px; } .vs_content .gform_wrapper .gfield_checkbox li, .vs_content .gform_wrapper .gfield_radio li { display: flex; margin-bottom: 16px; } .vs_content .gform_wrapper .gfield_checkbox li label, .vs_content .gform_wrapper .gfield_radio li label { margin: 0; margin-top: -4px; } .vs_content .gform_wrapper .gfield_checkbox li input, .vs_content .gform_wrapper .gfield_checkbox li input[type=checkbox], .vs_content .gform_wrapper .gfield_radio li input[type=radio] { margin-top: 0 !important; } .vs_content #gform_confirmation_wrapper_148 { height: 500px; display: flex; width: 100%; max-width: 100%; flex-direction: column; align-items: center; } .vs_content #gform_confirmation_wrapper_148 #gform_confirmation_message_148 { margin-top: 100px; } .vs_bullets { margin: 0; padding: 0; position: relative; z-index: 2; } .vs_bullets_wrapper { display: flex; flex-wrap: wrap; width: 100%; } .vs_bullets_bullets { width: 100%; margin: 0; } @media (min-width: 992px) { .vs_bullets_bullets { max-width: 50%; padding-bottom: 20px; } .vs_bullets_bullets:first-child { padding-right: 20px; } .vs_bullets_bullets:last-child { padding-left: 20px; } } .vs_bullets_bullet { margin: 0; padding-bottom: 25px; display: flex; } @media (min-width: 992px) { .vs_bullets_bullet { padding-bottom: 30px; } } .vs_bullets_bullet_text { margin-left: 10px; line-height: 1.2; font-size: var(--font-size-xxxs); } @media (min-width: 992px) { .vs_bullets_bullet_text { font-size: var(--font-size-xs); } } .vs_bullets_bullet:before { font-family: "Font Awesome 5 Pro"; font-weight: 900; content: "\f00c"; font-size: 13px; margin-top: 3px; color: var(--colouryellow); } @media (min-width: 992px) { .vs_bullets_bullet:before { font-size: var(--font-size-xxxs); } } .vs_button { position: relative; z-index: 2; } .vs_heading { position: relative; z-index: 2; } .vs_heading_title { font-family: var(--font-family-jubilat); line-height: 1.1; margin: 0; padding-bottom: 20px; width: 100%; font-size: var(--font-size-md); } @media (min-width: 992px) { .vs_heading_title { font-size: var(--font-size-lg); } } .vs_sub_heading { position: relative; z-index: 2; } .vs_sub_heading_title { line-height: 1.5; margin: 0; padding-bottom: 20px; font-size: var(--font-size-xxs); } @media (min-width: 992px) { .vs_sub_heading_title { font-size: var(--font-size-base); } } .vs_text_area { position: relative; z-index: 2; } .vs_text_area_content { line-height: 1.5; padding-bottom: 30px; font-size: var(--font-size-xxs); } @media (min-width: 992px) { .vs_text_area_content { font-size: var(--font-size-xs); } } .vs_three_column_block { display: flex; flex-wrap: wrap; padding: 6px 3px; position: relative; z-index: 2; } .vs_three_column_block_block { background-color: var(--colournavy); width: 100%; padding: 65px 25px; margin: 0 3px 6px; } .vs_three_column_block_block-link { transition-property: all; transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); transition-duration: 300ms; } .vs_three_column_block_block-link:hover { background-color: var(--colourblue); } .vs_three_column_block_block-link:hover .vs_three_column_block_block_icon { margin-top: -10px; } .vs_three_column_block_block-link:hover .vs_three_column_block_block_title { margin-top: 10px; } .vs_three_column_block_block-link:hover .vs_three_column_block_block_content { margin-top: 10px; } @media (min-width: 768px) { .vs_three_column_block_block { max-width: calc(33.333333% - 6px); } } @media (min-width: 992px) { .vs_three_column_block_block { padding: 100px 100px 60px; margin: 0 3px; } } .vs_three_column_block_block_icon { width: 80px; height: auto; margin-bottom: 30px; transition-property: all; transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); transition-duration: 300ms; } .vs_three_column_block_block_title { font-family: var(--font-family-jubilat); color: var(--colourwhite); font-size: var(--font-size-base2); margin-bottom: 20px; transition-property: all; transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); transition-duration: 300ms; } @media (min-width: 992px) { .vs_three_column_block_block_title { font-size: var(--font-size-md); margin-bottom: 25px; } } .vs_three_column_block_block_content { transition-property: all; transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); transition-duration: 300ms; } .vs_three_column_block_block_content p { font-family: var(--font-family-Montserrat); color: var(--colourwhite); line-height: 1.5; font-size: var(--font-size-xxxs); } @media (min-width: 992px) { .vs_three_column_block_block_content p { font-size: var(--font-size-xs); } } .vs_quotes { background-color: var(--colourgreen); padding: 100px 0 200px; position: relative; z-index: 2; } @media (min-width: 992px) { .vs_quotes { padding: 100px 150px; } } @media (min-width: 1024px) { .vs_quotes { padding: 100px; } } .vs_quotes_icon { color: var(--colourwhite); font-size: var(--font-size-xl); opacity: 0.5; } .vs_quotes_quote { color: var(--colourwhite); font-size: var(--font-size-xs); font-family: var(--font-family-Montserrat); line-height: 1.5; margin-bottom: 30px; } @media (min-width: 992px) { .vs_quotes_quote { font-size: var(--font-size-base); } } .vs_quotes_name { color: var(--colourwhite); font-family: var(--font-family-Montserrat); font-weight: 600; font-size: var(--font-size-xxxs); display: inline; line-height: 1.5; } @media (min-width: 992px) { .vs_quotes_name { font-size: var(--font-size-xs); display: block; } } .vs_quotes_title { color: var(--colourwhite); font-family: var(--font-family-Montserrat); font-weight: 600; margin-left: 5px; font-size: var(--font-size-xxxs); display: inline; line-height: 1.5; } @media (min-width: 992px) { .vs_quotes_title { font-size: var(--font-size-xs); display: block; } } .vs_quotes_company { color: var(--colourwhite); font-family: var(--font-family-Montserrat); font-weight: 600; margin-left: 5px; font-size: var(--font-size-xxxs); display: inline; line-height: 1.5; } @media (min-width: 992px) { .vs_quotes_company { font-size: var(--font-size-xs); display: block; } } @media (min-width: 992px) { .vs_quotes_info { display: flex; } } .vs_quotes .swiper-slide { width: 100%; padding: 0 20px; max-width: 1080px; margin: 0 auto; opacity: 0.1; transition: opacity 0.3s ease-in-out; } .vs_quotes .swiper-slide.swiper-slide-active { opacity: 1; } .vs_quotes .swiper-button-prev, .vs_quotes .swiper-button-next { border: 4px solid var(--colourwhite); border-radius: 50%; top: auto; width: 69px; height: 69px; margin-top: 50px; } @media (min-width: 992px) { .vs_quotes .swiper-button-prev, .vs_quotes .swiper-button-next { top: 50%; width: 100px; height: 100px; margin-top: auto; } } .vs_quotes .swiper-button-prev:after, .vs_quotes .swiper-button-next:after { color: var(--colourwhite); font-family: "Font Awesome 5 Pro"; font-weight: 300; font-size: var(--font-size-xs); } @media (min-width: 992px) { .vs_quotes .swiper-button-prev:after, .vs_quotes .swiper-button-next:after { font-size: var(--font-size-base2); } } .vs_quotes .swiper-button-prev { left: calc(50% - 79px); } @media (min-width: 992px) { .vs_quotes .swiper-button-prev { left: 3%; } } @media (min-width: 1024px) { .vs_quotes .swiper-button-prev { left: 6%; } } .vs_quotes .swiper-button-next { right: calc(50% - 79px); } @media (min-width: 992px) { .vs_quotes .swiper-button-next { right: 3%; } } @media (min-width: 1024px) { .vs_quotes .swiper-button-next { right: 6%; } } .vs_quotes .swiper-button-prev:after { content: "\f060"; } .vs_quotes .swiper-button-next:after { content: "\f061"; } .vs_partners { position: relative; z-index: 2; overflow: hidden; } .vs_partners_partners { display: flex; flex-wrap: wrap; margin: 0 -25px; justify-content: center; } @media (min-width: 1024px) { .vs_partners_partners { margin: 0 -75px; } } .vs_partners_partners_partner { width: 100%; max-width: 33.33333%; padding: 0 25px; margin-bottom: 25px; } @media (min-width: 992px) { .vs_partners_partners_partner { max-width: 20%; } } @media (min-width: 1024px) { .vs_partners_partners_partner { padding: 0 75px; } } .vs_partners_partners_logo { width: 100%; max-width: 100%; height: auto; } .vs_partners .swiper-slide { width: 100%; max-width: 67%; } .vs_partners .swiper-slide .vs_partners_partners_partner { width: 100%; max-width: 100%; margin: 0; height: 100%; } .vs_job_listings { position: relative; z-index: 2; overflow: hidden; } .vs_job_listings_jobs { display: flex; flex-wrap: wrap; } .vs_job_listings_job { width: 100%; max-width: calc(50% - 20px); margin: 0 10px; background-color: var(--colournavy); padding: 25px; display: flex; flex-direction: column; justify-content: space-between; background-image: url(../img/job_listing_mobile.svg); background-repeat: no-repeat; background-position: bottom right; margin-bottom: 20px; } @media (min-width: 768px) { .vs_job_listings_job { padding: 30px; background-image: url(../img/job_listing.svg); } } @media (min-width: 992px) { .vs_job_listings_job { max-width: calc(25% - 20px); } } .vs_job_listings_job_title { color: var(--colourwhite); font-size: var(--font-size-base); font-family: var(--font-family-Montserrat); margin-bottom: 40px; font-size: var(--font-size-xs); } @media (min-width: 768px) { .vs_job_listings_job_title { margin-bottom: 66px; font-size: var(--font-size-base); } } .vs_job_listings_job_organisation { color: var(--colourwhite); font-size: var(--font-size-xxs); font-weight: 600; font-family: var(--font-family-Montserrat); width: calc(100% - 41px); } @media (min-width: 768px) { .vs_job_listings_job_organisation { width: calc(100% - 61px); } } .vs_job_listings_job_closing { color: var(--colourwhite); font-size: var(--font-size-xxxs); font-family: var(--font-family-Montserrat); margin-top: 15px; } .vs_job_listings .swiper-slide { width: 100%; max-width: 90%; } .vs_job_listings .swiper-slide .vs_job_listings_job { width: 100%; max-width: 100%; margin: 0; height: 100%; } .vs_content_with_side { position: relative; z-index: 2; } .vs_content_with_side_wrapper { display: flex; flex-wrap: wrap; } .vs_content_with_side_content { width: 100%; } @media (min-width: 992px) { .vs_content_with_side_content { max-width: 50%; } } .vs_content_with_side_side { width: 100%; display: none; } @media (min-width: 992px) { .vs_content_with_side_side { margin-top: auto; max-width: 50%; padding-left: 13%; } } .vs_content_with_side_side_also { background: var(--colourgreen); padding: 50px 60px; margin-bottom: 50px; display: none; } @media (min-width: 992px) { .vs_content_with_side_side_also { display: block; } } .vs_content_with_side_side_also_title { font-family: var(--font-family-jubilat); color: var(--colourputty); line-height: 1.3; font-size: var(--font-size-md); font-weight: 600; padding-bottom: 15px; } .vs_content_with_side_side_also_bullets { margin: 0; padding: 0; } .vs_content_with_side_side_also_bullet { padding: 0; margin: 0; padding-bottom: 20px; } .vs_content_with_side_side_also_bullet:last-child { padding-bottom: 0; } .vs_content_with_side_side_also_link { font-family: var(--font-family-Montserrat); font-size: var(--font-size-xs); color: var(--colourputty); line-height: 1.5; margin: 0; padding: 0; } .vs_content_with_side_side_also_link:hover, .vs_content_with_side_side_also_link:focus, .vs_content_with_side_side_also_link:active, .vs_content_with_side_side_also_link:visited { color: var(--colourputty); } .vs_content_with_side_side_banner { background-color: var(--colourblue); background-image: url("../img/kick-starting.png"); background-size: cover; padding: 30px; margin-bottom: 50px; } @media (min-width: 992px) { .vs_content_with_side_side_banner { padding: 50px 60px; } } .vs_content_with_side_side_banner_title { font-family: var(--font-family-jubilat); color: var(--colourputty); line-height: 1.3; font-size: var(--font-size-base2); font-weight: 600; padding-bottom: 15px; padding-top: 90px; } @media (min-width: 992px) { .vs_content_with_side_side_banner_title { font-size: var(--font-size-md); padding-top: 70px; } } .vs_title_and_content_blocks { position: relative; z-index: 2; } .vs_title_and_content_blocks_blocks { display: flex; flex-wrap: wrap; width: 100%; } @media (min-width: 992px) { .vs_title_and_content_blocks_blocks { margin-left: -25px; margin-right: -25px; width: auto; } } .vs_title_and_content_blocks_block { background-color: var(--colournavy); width: 100%; max-width: 100%; padding: 40px 30px 30px; margin-bottom: 20px; } @media (min-width: 992px) { .vs_title_and_content_blocks_block { max-width: calc(33.33333% - 50px); margin-left: 25px; margin-right: 25px; margin-bottom: 50px; padding: 60px 50px 50px; } } .vs_title_and_content_blocks_block_title { color: var(--colourputty); font-family: var(--font-family-jubilat); font-size: var(--font-size-base2); line-height: 1.3; font-weight: 600; padding-bottom: 20px; } @media (min-width: 992px) { .vs_title_and_content_blocks_block_title { font-size: var(--font-size-md); } } .vs_title_and_content_blocks_block_content { color: var(--colourputty); font-size: var(--font-size-xxs); } .vs_membership_tiers { overflow-x: auto; position: relative; z-index: 2; } .vs_membership_tiers_table { width: 100%; } @media (min-width: 1350px) { .vs_membership_tiers_table { table-layout: fixed; } } .vs_membership_tiers_table_cell { padding: 30px 25px; border-left: 14px solid var(--colourputty); border-right: 14px solid var(--colourputty); border-bottom: 4px solid var(--colourputty); vertical-align: middle; } .vs_membership_tiers_table_cell:first-child { border-left: 0; } .vs_membership_tiers_table_cell:last-child { border-right: 0; } .vs_membership_tiers_table_cell-heading { padding: 40px 25px; vertical-align: top; } .vs_membership_tiers_table_cell-title { vertical-align: middle; } .vs_membership_tiers_table_cell_heading_title { color: var(--colourputty); font-family: var(--font-family-jubilat); font-size: var(--font-size-md); line-height: 1.3; margin-bottom: 20px; } .vs_membership_tiers_table_cell_heading_description { color: var(--colourputty); font-family: var(--font-family-Montserrat); font-size: var(--font-size-xs); line-height: 1.3; font-weight: 300; } .vs_membership_tiers_table_cell_title { color: var(--colourdarkgrey); font-family: var(--font-family-Montserrat); font-size: var(--font-size-xs); line-height: 1.3; font-weight: 300; } .vs_membership_tiers_table_cell_content { color: var(--colourputty); font-family: var(--font-family-Montserrat); font-size: var(--font-size-xxs); line-height: 1.5; font-weight: 300; } .vs_membership_tiers_table_cell_tick { color: var(--colourputty); font-size: var(--font-size-base2); line-height: 1.5; font-weight: 300; text-align: center; } .vs_our_services { position: relative; z-index: 2; overflow: hidden; } .vs_our_services_services { display: flex; flex-wrap: wrap; position: relative; width: 100%; } .vs_our_services_service { width: 100%; max-width: calc(50% - 70px); margin-left: 35px; margin-right: 35px; margin-bottom: 35px; display: flex; flex-direction: column; justify-content: space-between; position: relative; } @media (min-width: 992px) { .vs_our_services_service { max-width: calc(25% - 70px); } } .vs_our_services_service-link:hover .vs_our_services_service_svg path { fill: var(--colourblue); } .vs_our_services_service-link:hover .vs_our_services_service_icon { margin-top: -10px; } .vs_our_services_service-link:hover .vs_our_services_service_link { margin-top: 10px; } .vs_our_services_service_svg path { transition-property: all; transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); transition-duration: 300ms; } .vs_our_services_service_content { position: absolute; top: 0; left: 0; right: 0; bottom: 0; display: flex; flex-direction: column; justify-content: center; align-items: center; padding-bottom: 20%; padding-left: 20%; padding-right: 20%; padding-top: 15%; } .vs_our_services_service_icon { padding-left: 22%; padding-right: 22%; padding-bottom: 15px; transition-property: all; transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); transition-duration: 300ms; } .vs_our_services_service_link { font-family: var(--font-family-jubilat); font-weight: 700; font-size: var(--font-size-base2); line-height: 1; color: var(--colourputty); text-align: center; transition-property: all; transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); transition-duration: 300ms; } @media (min-width: 768px) { .vs_our_services_service_link { font-size: var(--font-size-md); } } @media (min-width: 768px) { .vs_our_services_service_link { font-size: var(--font-size-base2); } } @media (min-width: 1279px) { .vs_our_services_service_link { font-size: var(--font-size-md); } } .vs_our_services .swiper-slide { width: 100%; max-width: 70%; } .vs_our_services .swiper-slide .vs_our_services_service { width: 100%; max-width: 100%; margin-left: 0; margin-right: 0; margin-bottom: 0; } .vs_events_container { display: flex; flex-wrap: wrap; width: 100%; } @media (min-width: 992px) { .vs_events_container { margin-left: -25px; margin-right: -25px; width: auto; } } .vs_events_container_event { background-color: var(--colournavy); background-size: cover; background-repeat: no-repeat; width: 100%; max-width: 100%; padding: 25px 30px 30px; margin-bottom: 20px; display: flex; flex-direction: column; justify-content: space-between; } @media (min-width: 992px) { .vs_events_container_event { max-width: calc(50% - 50px); margin-left: 25px; margin-right: 25px; margin-bottom: 50px; padding: 60px 50px 50px; } } .vs_events_container_event_title { font-family: var(--font-family-jubilat); color: var(--colourputty); line-height: 1.3; font-size: var(--font-size-base2); font-weight: 600; padding-bottom: 15px; } @media (min-width: 992px) { .vs_events_container_event_title { font-size: var(--font-size-md); } } .vs_events_container_event_location { font-family: var(--font-family-jubilat); color: var(--colourputty); line-height: 1.3; font-size: var(--font-size-xxs); font-weight: 600; padding-bottom: 15px; } @media (min-width: 992px) { .vs_events_container_event_location { font-size: var(--font-size-base2); } } .vs_events_container_event_date { font-family: var(--font-family-jubilat); color: var(--colourputty); line-height: 1.3; font-size: var(--font-size-xxxs); font-weight: 600; } @media (min-width: 992px) { .vs_events_container_event_date { font-size: var(--font-size-xs); } } .vs_events_pagination { margin-bottom: 20px; font-size: var(--font-size-xxs); font-family: var(--font-family-Montserrat); } @media (min-width: 992px) { .vs_events_pagination { margin-bottom: 30px; } } .vs_blogs_container { display: flex; flex-wrap: wrap; width: 100%; } .vs_blogs_blog { width: 100%; max-width: 100%; } @media (min-width: 992px) { .vs_blogs_blog { max-width: calc(66.666666% - 50px); margin-right: 50px; } } .vs_blogs_blog_post { background-color: var(--colourgrayblue); margin-bottom: 20px; display: flex; flex-wrap: wrap; } @media (min-width: 992px) { .vs_blogs_blog_post { margin-bottom: 30px; } } .vs_blogs_blog_post_image { width: 100%; } @media (min-width: 992px) { .vs_blogs_blog_post_image { max-width: 33.333333%; } } .vs_blogs_blog_post_image img { height: 100%; width: 100%; object-fit: cover; } .vs_blogs_blog_post_content { padding: 30px; width: 100%; display: flex; flex-direction: column; justify-content: space-between; } @media (min-width: 992px) { .vs_blogs_blog_post_content { max-width: 66.666666%; } } @media (min-width: 992px) { .vs_blogs_blog_post_content { padding: 50px 65px; } } .vs_blogs_blog_post_content_title { font-family: var(--font-family-jubilat); font-size: var(--font-size-base2); font-weight: 400; margin-bottom: 20px; color: var(--colourdarkgrey); font-weight: 600; line-height: 1.3; } @media (min-width: 992px) { .vs_blogs_blog_post_content_title { font-size: var(--font-size-md); } } .vs_blogs_blog_post_content_excerpt { font-family: var(--font-family-Montserrat); font-size: var(--font-size-xxxs); font-weight: 400; color: var(--colourdarkgrey); line-height: 1.3; margin-bottom: 20px; } @media (min-width: 992px) { .vs_blogs_blog_post_content_excerpt { font-size: var(--font-size-xs); margin-bottom: 30px; } } .vs_blogs_blog_post_content_details { display: flex; justify-content: space-between; } .vs_blogs_blog_post_content_details_date { font-family: var(--font-family-Montserrat); font-size: var(--font-size-xxxs); font-weight: 400; color: var(--colourdarkgrey); line-height: 1.3; opacity: 0.5; } @media (min-width: 992px) { .vs_blogs_blog_post_content_details_date { font-size: var(--font-size-xs); } } .vs_blogs_blog_post_content_details_readmore { font-family: var(--font-family-Montserrat); font-size: var(--font-size-xxxs); font-weight: 400; color: var(--colourdarkgrey); line-height: 1.3; } @media (min-width: 992px) { .vs_blogs_blog_post_content_details_readmore { font-size: var(--font-size-xs); } } .vs_blogs_blog_post_content_details_readmore i { margin-left: 10px; } .vs_blogs_side { width: 100%; max-width: 100%; } @media (min-width: 992px) { .vs_blogs_side { max-width: calc(33.333333% - 50px); margin-left: 50px; } } .vs_blogs_side_categories { background-color: var(--colourgreen); padding: 30px; margin-bottom: 20px; } @media (min-width: 992px) { .vs_blogs_side_categories { padding: 50px 65px; margin-bottom: 30px; } } .vs_blogs_side_categories_title { font-family: var(--font-family-jubilat); font-size: var(--font-size-base2); font-weight: 600; margin-bottom: 20px; color: var(--colourputty); line-height: 1.3; } @media (min-width: 992px) { .vs_blogs_side_categories_title { font-size: var(--font-size-md); } } .vs_blogs_side_categories_link { font-family: var(--font-family-Montserrat); font-size: var(--font-size-xxs); color: var(--colourputty); line-height: 1.3; } @media (min-width: 992px) { .vs_blogs_side_categories_link { font-size: var(--font-size-base); } } .vs_blogs_side_categories_link:hover, .vs_blogs_side_categories_link:focus, .vs_blogs_side_categories_link:active, .vs_blogs_side_categories_link:visited { color: var(--colourputty); } .vs_blogs_side_categories_bullets { margin: 0; padding: 0; } .vs_blogs_side_event { background: var(--colournavy); padding: 40px 30px 30px; margin-bottom: 50px; } @media (min-width: 992px) { .vs_blogs_side_event { padding: 50px 60px; } } .vs_blogs_side_event_title { font-family: var(--font-family-jubilat); color: var(--colourputty); line-height: 1.3; font-size: var(--font-size-base2); font-weight: 600; padding-bottom: 15px; } @media (min-width: 992px) { .vs_blogs_side_event_title { font-size: var(--font-size-md); } } .vs_blogs_side_event_location, .vs_blogs_side_event_details, .vs_blogs_side_event_start, .vs_blogs_side_event_end { font-family: var(--font-family-Montserrat); color: var(--colourputty); line-height: 1.3; font-size: var(--font-size-xxs); font-weight: 400; padding-bottom: 15px; display: flex; flex-wrap: wrap; } .vs_blogs_side_event_location i, .vs_blogs_side_event_details i, .vs_blogs_side_event_start i, .vs_blogs_side_event_end i { margin-right: 10px; margin-bottom: 10px; width: 20px; } .vs_blogs_side_event_location div, .vs_blogs_side_event_details div, .vs_blogs_side_event_start div, .vs_blogs_side_event_end div { width: calc(100% - 30px); } .vs_blogs_pagination { margin-bottom: 20px; font-size: var(--font-size-xxs); font-family: var(--font-family-Montserrat); } @media (min-width: 992px) { .vs_blogs_pagination { margin-bottom: 30px; } } .wheel { width: 100%; max-width: 720px; margin: 0 auto; margin-bottom: 50px; } .wheel_container { position: relative; height: 0; padding-bottom: 100%; } .circle { width: 71.88%; height: 71.88%; position: absolute; top: 14.06%; left: 14.06%; background-color: #14293A; border-radius: 50%; display: flex; justify-content: center; align-items: center; } .circle_details { width: 65%; } .wheel svg path { cursor: pointer; } .wheel_1, .wheel_2, .wheel_3, .wheel_4, .wheel_5, .wheel_6, .wheel_7, .wheel_8 { transition-property: all; transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); transition-duration: 200ms; } .wheel_1 img, .wheel_2 img, .wheel_3 img, .wheel_4 img, .wheel_5 img, .wheel_6 img, .wheel_7 img, .wheel_8 img { cursor: pointer; } .wheel_1.inactive, .wheel_2.inactive, .wheel_3.inactive, .wheel_4.inactive, .wheel_5.inactive, .wheel_6.inactive, .wheel_7.inactive, .wheel_8.inactive { opacity: 0.5; } .wheel_1 { position: absolute; width: 35.16%; height: 24.28%; left: 50%; top: 0; } .wheel_1:hover, .wheel_1.active { left: 50.5%; top: -1%; } .wheel_2 { position: absolute; width: 24.32%; height: 35.12%; right: 0; top: 14.64%; } .wheel_2:hover, .wheel_2.active { right: -1%; top: 14.14%; } .wheel_3 { position: absolute; width: 24.32%; height: 35.12%; right: 0; top: 49.76%; } .wheel_3:hover, .wheel_3.active { right: -1%; top: 50.26%; } .wheel_4 { position: absolute; width: 35.16%; height: 24.28%; bottom: 0; left: 50%; } .wheel_4:hover, .wheel_4.active { left: 50.5%; bottom: -1%; } .wheel_5 { position: absolute; width: 35.16%; height: 24.28%; bottom: 0; right: 50%; } .wheel_5:hover, .wheel_5.active { bottom: -1%; right: 50.5%; } .wheel_6 { position: absolute; width: 24.32%; height: 35.12%; left: 0; top: 49.76%; } .wheel_6:hover, .wheel_6.active { left: -1%; top: 50.26%; } .wheel_7 { position: absolute; width: 24.32%; height: 35.12%; left: 0; top: 14.64%; } .wheel_7:hover, .wheel_7.active { left: -1%; top: 14.14%; } .wheel_8 { position: absolute; width: 35.16%; height: 24.28%; top: 0; right: 50%; } .wheel_8:hover, .wheel_8.active { right: 50.5%; top: -1%; } .wheel_details { background-color: green; left: 0; right: 0; padding: 30px 25px; display: none; position: relative; } @media (min-width: 992px) { .wheel_details { position: absolute; padding: 60px 50px; top: 0; width: 100%; max-width: 470px; left: 25%; } } @media (min-width: 992px) { .wheel_details-right { right: 20px; left: auto; } } @media (min-width: 992px) { .wheel_details-left { left: 20px; right: auto; } } .wheel_details_title { color: var(--colourwhite); font-size: var(--font-size-base2); font-family: var(--font-family-jubilat); margin-bottom: 20px; font-weight: 700; } .wheel_details_information { line-height: 1.5; color: var(--colourwhite); font-size: var(--font-size-xxs); font-family: var(--font-family-Montserrat); } .wheel_details_information p { line-height: 1.5; color: var(--colourwhite); font-size: var(--font-size-xxs); font-family: var(--font-family-Montserrat); } .wheel_details_close { color: var(--colourwhite); font-size: var(--font-size-base2); position: absolute; top: 30px; right: 25px; cursor: pointer; } @media (min-width: 992px) { .wheel_details_close { top: 60px; right: 50px; } } .vs_third_heading { position: relative; z-index: 2; } .vs_third_heading_title { line-height: 1.5; margin: 0; padding-bottom: 20px; font-size: var(--font-size-xs); font-family: var(--font-family-juilat); font-weight: 300; } @media (min-width: 992px) { .vs_third_heading_title { font-size: var(--font-size-md); } } .vs_coloured_blocks { width: 100%; margin-bottom: 15px; margin-top: 10px; } .vs_coloured_blocks_wrapper { display: flex; flex-wrap: wrap; justify-content: space-between; width: 100%; } .vs_coloured_blocks_block { width: 100%; margin-bottom: 15px; padding: 15px; font-size: var(--font-size-xs); color: var(--colourputty); text-align: center; font-weight: 300; } @media (min-width: 992px) { .vs_coloured_blocks_block { max-width: calc(25% - 12px); padding: 25px; font-size: var(--font-size-base); } } .vs_image { display: flex; justify-content: center; } .vs_image_image { width: 100%; max-width: 500px; } .page_sections .pageIntro p { font-size: 1.2em; line-height: 1.6; font-family: 'Montserrat'; } .ul { font-size: 16px; margin-bottom: 10px; font-family: 'Montserrat'; line-height: 1.5; } .page_sections .pageIntro { padding: 20px; border-left: 12px solid #494b52; font-family: 'Montserrat'; } .sticky-nav { text-align: center; white-space: nowrap; background-color: #fff; background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAADUlEQVR42mP09A76DwADsgHn2Mh0qAAAAABJRU5ErkJggg==); background-repeat: repeat-x; background-size: 1px 6px; background-position: bottom; position: sticky; top: 0; overflow-x: auto; -webkit-overflow-scrolling: touch; -ms-overflow-style: -ms-autohiding-scrollbar; z-index: 99; font-family: 'Montserrat'; } .hero--overlay { background-image: url(../../img/overlay-hex-right.png); background-size: cover; background-repeat: no-repeat; } .account__header { padding: 25px 0; margin-bottom: 50px; background-color: #447cbf; color: #fff; } .account .articles footer a { display: block; text-decoration: none; color: #fff; background-color: #005b54; padding: 15px; width: calc(100% + (15px * 2)); margin: 0 -15px; position: relative; } .account .articles ul a { color: #005b54; } .account .cpd-membership .cpd footer a { display: block; text-decoration: none; color: #fff; background-color: #ee7248; padding: 15px; width: calc(100% + (15px * 2)); margin: 0 -15px; position: relative; } .one-quarter .my-invoices a { display: block; text-decoration: none; color: #fff; background-color: #ee7248; padding: 15px; width: calc(100% + (15px * 2)); margin: -15px; position: relative; } .account .cpd-membership header a { display: block; text-transform: uppercase; text-decoration: none; color: inherit; letter-spacing: .2em; background-color: #ee7248; text-align: center; padding: 5px 0; width: calc(100% + (15px * 2)); margin: 0 -15px; } .page_member_data .hero--overlay { display: flex; align-items: center; height: 200px; padding: 0 30px; background-color: #447cbf; } .page_member_data .form--wrapper .fill { text-align: center; background-color: #005b54; color: #fff; border-radius: 0; -webkit-appearance: none; -moz-appearance: none; appearance: none; border: 0; padding: 15px; margin-bottom: 30px; font-weight: 600; font-size: 1.2em; margin-top: 20px; margin-left: 0; margin-right: 0; width: 100%; } .page_member_data .hero--overlay .hero__submit { float: right; -webkit-appearance: none; -moz-appearance: none; appearance: none; background-color: #005b54; color: #fff; padding: 16px 56px; border: 0; font-weight: 500; font-size: 1.3rem; } .page_member_data .member_data_table .contain { background: #fff; padding: 20px; font-size: 1.5rem; } .entry_content h5, .h6, h6 { font-size: 16px; line-height: 24px; font-size: 1.5rem; line-height: 1.5rem; } .page_member_data .member_data_table .fullwidth a { background: #005b54; color: #fff; padding: 7px 20px; text-decoration: none; margin-top: 10px; margin-bottom: 10px; display: inline-block; } .account .cpd-membership .cpd footer a { display: block; text-decoration: none; color: #fff; background-color: #ee7248; padding: 15px; width: calc(100% + (15px * 2)); margin: 0 -15px; position: relative; font-size: 1.8rem; } .account .cpd-membership .count-hex { background-color: #494b52; color: #fff; width: 142px; height: 82.36px; margin: 41.18px 0; font-size: 1.8rem; } .account .cpd-membership .cpd .cpd-subtitle { font-size: 1.5rem; padding-bottom: 1em; } .account .cpd-membership .cpd h3 { border-bottom: 0 !important; font-weight: 500; font-size: 1.8rem; } .account .events, .account .next-event { padding-bottom: 0 !important; background-color: #447cbf !important; color: #fff; font-size: 1.8rem; } .page-account section > div h3:first-of-type { border-bottom: 2px solid #616365; font-size: 1.2em; padding: 0 0 7px; margin: 0; margin-bottom: 10px; line-height: 1; font-size: 1.8rem; } .one-quarter .my-invoices a { display: block; text-decoration: none; color: #fff; background-color: #ee7248; padding: 15px; width: calc(100% + (15px * 2)); margin: -15px; position: relative; font-size: 1.8rem; } .account .networks li div span { margin-left: 0.8em; font-size: 1.3rem; } .btn { display: inline-block; -webkit-appearance: none; -moz-appearance: none; appearance: none; font-size: 2rem; font-family: 'Montserrat'; border: 0; border-radius: 6px; background: #005b54; color: #fff; line-height: 1.3; margin-top: 10px; padding: 10px 60px; letter-spacing: 3px; text-align: center; text-transform: uppercase; text-decoration: none; cursor: pointer; } .heroHome { height: 100%; min-height: initial; background-repeat: no-repeat !important; background-position: left center !important; background-size: cover !important; position: relative; background-color: #00a599; /* background-image: unset !important; */ background: #005C54 !important; } .hero-overlay { background: unset; min-width: 100%; top: -5px; bottom: 0; right: 0; position: absolute; transform: scaleX(-1); background-repeat: no-repeat; opacity: .4; background-size: cover; z-index: 1; } .errorContainer .good { color: #fff; background: #005C54; padding: 20px; margin-top: 10px; } .login-error.green { background-color: #005C54; color: #fff; font-weight: 600; padding: 30px 10px; font-family: 'Montserrat'; } .login-form-container .forgot-password, .password-lost-form .forgot-password, .password-reset-form .forgot-password { color: #009d90 !important; font-size: 1.3rem; color: white !important; font-family: 'Montserrat'; } .login-form-container #rememberme + label, .password-lost-form #rememberme + label, .password-reset-form #rememberme + label { display: inline-block; font-weight: 400; font-size: 1.3rem; color: white !important; font-family: 'Montserrat'; } .login-form-container, .password-lost-form, .password-reset-form { background: #005c54; padding: 20px; margin: 0 auto; margin-top: 30px; margin-bottom: 30px; max-width: 400px; font-family: 'Montserrat'; } .form_wrapper { background: #f1f3f2; max-width: 1000px; margin: 0 auto; padding: 20px; line-height: 1; white-space: normal; font-family: 'Montserrat'; font-weight: 400; line-height: 1.3; } .login-form-container #user_login, .login-form-container #user_pass, .login-form-container .user_pass, .password-lost-form #user_login, .password-lost-form #user_pass, .password-lost-form .user_pass, .password-reset-form #user_login, .password-reset-form #user_pass, .password-reset-form .user_pass { width: 100%; font-size: 14px; height: 40px; background: white; text-indent: 5px; } .user_member_profile .get-membership { background-color: #fff; margin-bottom: 10px; width: 85%; margin-top: 20px; font-size: 1.8rem; color: #005c54; } .user_member_profile .edit-profile { background-color: #fff; margin-bottom: 10px; width: 85%; margin-top: 20px; font-size: 1.8rem; color: #005c54; } .user_member_profile .my-invoices { background-color: #fff; margin-bottom: 10px; width: 85%; margin-top: 20px; font-size: 1.8rem; color: #005c54; } .user_member_profile .aua-events { background-color: #fff; margin-bottom: 10px; width: 85%; margin-top: 20px; font-size: 1.8rem; color: #005c54; } .singleSearchResult .title a { text-decoration: none; color: #005C54; text-transform: capitalize; font-size: 24px; } .news a { color: #005C54; } .vs_content .gform_wrapper .gfield_checkbox li label, .vs_content .gform_wrapper .gfield_radio li label { margin: 0; margin-top: -4px; color: black; } .searchFilter .liveSearchBtn, .searchFilter .liveSearchSubmit { height: 40px; color: white; background: #005C54; border: 3px solid #005C54; border-radius: 25px; outline: 0; margin-bottom: 10px; margin-top: 10px; text-align: center; font-weight: 300; font-size: 20px; padding: 6px; max-width: 250px; width: 100%; } body.page-booking-confirmation .hero--overlay { height: 450px; background-color: #005c54; } body.page-booking-confirmation .hero--overlay .get-my-invoices a { display: block; text-decoration: none; color: #005c54; background-color: #fff; padding: 15px; position: relative; font-size: 1.5rem; } .lapsed__banner .page-edit .hero--overlay .contain .icon .fa, .lapsed__banner .page-edit .hero--overlay .page-volunteering-application .wrapper--container .icon .fa, .lapsed__banner .page-edit .hero--overlay .site_header--container .icon .fa, .lapsed__banner .page-edit .hero--overlay .site_menu--container .icon .fa, .lapsed__banner .page-my-events .hero--overlay .contain .icon .fa, .lapsed__banner .page-my-events .hero--overlay .page-volunteering-application .wrapper--container .icon .fa, .lapsed__banner .page-my-events .hero--overlay .site_header--container .icon .fa, .lapsed__banner .page-my-events .hero--overlay .site_menu--container .icon .fa, .lapsed__banner .page-pay-invoices .hero--overlay .contain .icon .fa, .lapsed__banner .page-pay-invoices .hero--overlay .page-volunteering-application .wrapper--container .icon .fa, .lapsed__banner .page-pay-invoices .hero--overlay .site_header--container .icon .fa, .lapsed__banner .page-pay-invoices .hero--overlay .site_menu--container .icon .fa, .lapsed__banner body.page-booking-confirmation .hero--overlay .contain .icon .fa, .lapsed__banner body.page-booking-confirmation .hero--overlay .page-volunteering-application .wrapper--container .icon .fa, .lapsed__banner body.page-booking-confirmation .hero--overlay .site_header--container .icon .fa, .lapsed__banner body.page-booking-confirmation .hero--overlay .site_menu--container .icon .fa, .page-edit .hero--overlay .contain h1 .fa, .page-edit .hero--overlay .lapsed__banner .contain .icon .fa, .page-edit .hero--overlay .lapsed__banner .page-volunteering-application .wrapper--container .icon .fa, .page-edit .hero--overlay .lapsed__banner .site_header--container .icon .fa, .page-edit .hero--overlay .lapsed__banner .site_menu--container .icon .fa, .page-edit .hero--overlay .page-volunteering-application .wrapper--container h1 .fa, .page-edit .hero--overlay .site_header--container h1 .fa, .page-edit .hero--overlay .site_menu--container h1 .fa, .page-my-events .hero--overlay .contain h1 .fa, .page-my-events .hero--overlay .lapsed__banner .contain .icon .fa, .page-my-events .hero--overlay .lapsed__banner .page-volunteering-application .wrapper--container .icon .fa, .page-my-events .hero--overlay .lapsed__banner .site_header--container .icon .fa, .page-my-events .hero--overlay .lapsed__banner .site_menu--container .icon .fa, .page-my-events .hero--overlay .page-volunteering-application .wrapper--container h1 .fa, .page-my-events .hero--overlay .site_header--container h1 .fa, .page-my-events .hero--overlay .site_menu--container h1 .fa, .page-pay-invoices .hero--overlay .contain h1 .fa, .page-pay-invoices .hero--overlay .lapsed__banner .contain .icon .fa, .page-pay-invoices .hero--overlay .lapsed__banner .page-volunteering-application .wrapper--container .icon .fa, .page-pay-invoices .hero--overlay .lapsed__banner .site_header--container .icon .fa, .page-pay-invoices .hero--overlay .lapsed__banner .site_menu--container .icon .fa, .page-pay-invoices .hero--overlay .page-volunteering-application .wrapper--container h1 .fa, .page-pay-invoices .hero--overlay .site_header--container h1 .fa, .page-pay-invoices .hero--overlay .site_menu--container h1 .fa, .page-volunteering-application .lapsed__banner .page-edit .hero--overlay .wrapper--container .icon .fa, .page-volunteering-application .lapsed__banner .page-my-events .hero--overlay .wrapper--container .icon .fa, .page-volunteering-application .lapsed__banner .page-pay-invoices .hero--overlay .wrapper--container .icon .fa, .page-volunteering-application .lapsed__banner body.page-booking-confirmation .hero--overlay .wrapper--container .icon .fa, .page-volunteering-application .page-edit .hero--overlay .lapsed__banner .wrapper--container .icon .fa, .page-volunteering-application .page-edit .hero--overlay .wrapper--container h1 .fa, .page-volunteering-application .page-my-events .hero--overlay .lapsed__banner .wrapper--container .icon .fa, .page-volunteering-application .page-my-events .hero--overlay .wrapper--container h1 .fa, .page-volunteering-application .page-pay-invoices .hero--overlay .lapsed__banner .wrapper--container .icon .fa, .page-volunteering-application .page-pay-invoices .hero--overlay .wrapper--container h1 .fa, .page-volunteering-application body.page-booking-confirmation .hero--overlay .lapsed__banner .wrapper--container .icon .fa, .page-volunteering-application body.page-booking-confirmation .hero--overlay .wrapper--container h1 .fa, body.page-booking-confirmation .hero--overlay .contain h1 .fa, body.page-booking-confirmation .hero--overlay .lapsed__banner .contain .icon .fa, body.page-booking-confirmation .hero--overlay .lapsed__banner .page-volunteering-application .wrapper--container .icon .fa, body.page-booking-confirmation .hero--overlay .lapsed__banner .site_header--container .icon .fa, body.page-booking-confirmation .hero--overlay .lapsed__banner .site_menu--container .icon .fa, body.page-booking-confirmation .hero--overlay .page-volunteering-application .wrapper--container h1 .fa, body.page-booking-confirmation .hero--overlay .site_header--container h1 .fa, body.page-booking-confirmation .hero--overlay .site_menu--container h1 .fa { color: #005c54; padding-left: 15px; padding-right: 15px; background-color: #fff; height: auto; text-align: center; margin-right: 15px; } .page-edit .hero--overlay, .page-my-events .hero--overlay, .page-pay-invoices .hero--overlay, body.page-booking-confirmation .hero--overlay { display: flex; align-items: center; height: 200px; padding: 0 30px; color: red; } .hero--overlay { background-image: url(../../img/overlay-hex-right.png); background-size: cover; background-repeat: no-repeat; background-color: #005c54; } label { border: 0; font-family: inherit; font-size: 100%; font-style: inherit; font-weight: inherit; margin: 0; outline: 0; padding: 0; font-size: 1.5rem; font-family: 'Montserrat'; vertical-align: baseline; } .pill--outer table tr td, .pill--outer table tr th { padding-bottom: 15px; font-size: 1.5rem; font-family: 'Montserrat'; } .pill--outer h3 { font-size: 1.2em; border-bottom: 2px solid #494b52; font-weight: 600; font-size: 2rem; font-family: 'Montserrat'; } .pill--outer table input:not([type=radio]):not([type=checkbox]), .pill--outer table label.checkbox, .pill--outer table label.radio, .pill--outer table select, .pill--outer table textarea { display: block; width: 100%; background-color: #eaeaea; color: #494b52; border: 0; -webkit-appearance: none; -moz-appearance: none; appearance: none; padding: 5px 10px; line-height: 1; border-radius: 0; font-size: 1.3rem; font-family: 'Montserrat'; } .pill--outer table label.file { background-color: #005c54; color: #fff; width: 100%; text-align: center; padding: 10px; display: block; font-size: 1.2em; } .account--edit .fill { text-align: center; background-color: #005c54; color: #fff; border-radius: 0; -webkit-appearance: none; -moz-appearance: none; appearance: none; border: 0; padding: 15px; margin-bottom: 30px; font-weight: 600; font-size: 1.2em; } .page-edit .hero--overlay .hero__submit, .page-my-events .hero--overlay .hero__submit, .page-pay-invoices .hero--overlay .hero__submit, body.page-booking-confirmation .hero--overlay .hero__submit { float: right; -webkit-appearance: none; -moz-appearance: none; appearance: none; background-color: #fff; color: #005c54; padding: 16px 56px; border: 0; font-weight: 500; font-size: 1.5rem; } .login-form-container #user_login, .login-form-container #user_pass, .login-form-container .user_pass, .password-lost-form #user_login, .password-lost-form #user_pass, .password-lost-form .user_pass, .password-reset-form #user_login, .password-reset-form #user_pass, .password-reset-form .user_pass { width: 100%; font-size: 14px; height: 40px; background: white; text-indent: 5px; color: black; } .login-form-container button.g-recaptcha, .login-form-container input[type=submit], .password-lost-form button.g-recaptcha, .password-lost-form input[type=submit], .password-reset-form button.g-recaptcha, .password-reset-form input[type=submit] { border: 0; background: #fff; width: 90%; padding: 10px; font-size: 14px; margin: 0 0 30px 0; outline-color: #009d90; width: 100%; color: black; margin: 10px 0; } .errorContainer { padding: 10px 0 0; margin: 0 auto; max-width: 400px; } .password-lost-form, .password-reset-form { background: #005c54; padding: 20px; margin: 0 auto; margin-top: 30px; margin-bottom: 30px; max-width: 400px; font-family: 'Montserrat'; } /* CSS code */ .option input[type="radio"]:checked + span { color: #fbab3a; /* Change this to your desired text color */ font-weight: 600; } .gform_wrapper ul.gfield_checkbox li label, .gform_wrapper ul.gfield_radio li label { display: -moz-inline-stack; display: inline-block; letter-spacing: inherit; vertical-align: middle; cursor: pointer; font-size: 16px; } .gform_wrapper .field_sublabel_below .ginput_complex.ginput_container label, .gform_wrapper .field_sublabel_below div[class*=gfield_time_].ginput_container label { margin: 1px 0 9px 1px; font-size: 20px; } .gform_wrapper div.validation_error { font-size: 2rem !important; color: #ff0e0e; font-size: 1em; font-weight: 700; margin-bottom: 25px; border-top: 2px solid #790000; border-bottom: 2px solid #790000; padding: 16px 0; clear: both; width: 100%; text-align: center; } .gform_wrapper li.gfield.gfield_error, .gform_wrapper li.gfield.gfield_error.gfield_contains_required.gfield_creditcard_warning { background-color: #ffacae4f; margin-bottom: 0.375em !important; padding: 0; border-top: 1px solid #c89797; border-bottom: 1px solid #c89797; } .aua-gutenberg .gform_wrapper .gform_footer input.button, .aua-gutenberg .gform_wrapper .gform_page_footer input.button { border: 0; background: #005b54; color: #fff; display: block; width: 100%; padding: 8px; border-radius: 0; line-height: 2; min-height: 2rem; font-size: 2rem; } .aua-gutenberg p:not([class]) { margin-top: 1em; font-size: 2.3rem; font-family: 'Montserrat'; } .aua-gutenberg li { font-size: 1.8rem; list-style-type: disc; } h1 { font-size: 35px; line-height: 52.5px; font-size: 5.5rem; line-height: 3.28125rem; font-family: 'jubilat'; } h2 { font-size: 35px; line-height: 52.5px; font-size: 5rem; line-height: 3.28125rem; font-family: 'jubilat'; } h3 { font-size: 35px; line-height: 52.5px; font-size: 4.5rem; line-height: 3.28125rem; font-family: 'jubilat'; } h4 { font-size: 35px; line-height: 52.5px; font-size: 4.25rem; line-height: 3.28125rem; font-family: 'jubilat'; } h5 { font-size: 35px; line-height: 52.5px; font-size: 4rem; line-height: 3.28125rem; font-family: 'jubilat'; } .has-aua-putty-background-color { background-color: #fff9f2 !important; } .has-aua-putty-color { color: #fff9f2 !important; } .checkbox-row { margin-bottom: 10px; } .showonweb .checkbox-row_span { color: #616365; font-size: 1.4rem; position: absolute; left: 3em; top: 1.6em; line-height: 1.5; margin-bottom: 10px; display: inline-block; } body.page-booking-confirmation .hero--overlay { height: auto !important; padding: 50px 0; } body.page-booking-confirmation .hero--overlay h1 { margin-bottom: 40px; } body.page-booking-confirmation .hero--overlay h4 { margin-bottom: 30px; } body.page-booking-confirmation .hero--overlay p { color: var(--colourwhite); font-size: var(--font-size-xs); font-family: var(--font-family-Montserrat); line-height: 1.5; margin-bottom: 30px; } body.page-booking-confirmation .hero--overlay p a { color: var(--colourwhite); text-decoration: underline; } body.page-booking-confirmation .hero--overlay p a:hover { color: var(--colourwhite); text-decoration: none; } .page-approval .aua-gutenberg { padding-top: 50px; } .page-approval .gform_confirmation_message { max-width: 900px; margin: 0 auto; font-size: 16px; margin-top: 50px; margin-bottom: 50px; } .page-approval td, .page-approval th { padding: 10px; border: 2px solid #000; } .page-approval .vs_approvalForms { padding-top: 100px; padding-bottom: 100px; } .page-approval .vs_approvalForms_container { max-width: 960px; margin: 0 auto; } .page-approval .vs_approvalForms_intro { margin-bottom: 30px; } .page-approval .vs_approvalForms_intro p { font-size: 2rem; } .page-approval .vs_approvalForms_title { margin-bottom: 20px; line-height: 1; } .page-approval .vs_approvalForms_content { margin-bottom: 30px; } .page-approval .vs_approvalForms_content p { font-size: 1.6rem; } .page-approval .vs_approvalForms_sections { width: 100%; } .page-approval .vs_approvalForms_section { margin-bottom: 50px; } .page-approval .vs_approvalForms_button { margin-bottom: 15px; } .page-approval .vs_approvalForms_table_wrap { padding-left: 20px; padding-right: 20px; padding-bottom: 50px; background: white; margin-bottom: 15px; } .page-approval .vs_approvalForms_table { max-width: 100%; margin: 0 auto; font-size: 16px; border: 0; } .page-approval .vs_approvalForms_table td, .page-approval .vs_approvalForms_table th { padding: 15px; border: 0; border-bottom: 1px solid #616365; } .page-approval .vs_approvalForms_submitbutton { float: right; } .page-approval .modal { position: fixed; top: 0; left: 0; right: 0; bottom: 0; background-color: rgba(0, 0, 0, 0.71); display: none; justify-content: center; align-items: center; z-index: 9999; padding: 20px; } .page-approval .modal-active { display: flex; } .page-approval .modal__container { background-color: #fff; border-radius: 30px; width: 856px; padding: 50px; position: relative; } .page-approval .modal__close { position: absolute; top: 25px; right: 25px; cursor: pointer; font-size: 25px; width: 25px; height: 25px; color: #000; } .application_form_table { max-width: 900px; margin: 0 auto; padding: 0 20px; font-size: 16px; border: 2px solid #000; margin-bottom: 50px; } .application_form_table td, .application_form_table th { padding: 10px; border: 2px solid #000; } .vs_account_header { background-color: #005C54; padding-top: 25px; padding-bottom: 75px; font-family: "jubilat", serif; background-image: url("/img/account_header.png"); background-size: 100%; background-repeat: no-repeat; background-position: right top; } .vs_account_header_profile { width: 100%; } @media (min-width: 768px) { .vs_account_header_profile { max-width: 25%; margin-right: 100px; } } .vs_account_header_details { width: 100%; } @media (min-width: 768px) { .vs_account_header_details { max-width: 50%; display: flex; align-items: center; } } .vs_account_header_avatar { position: relative; margin-bottom: 50px; } .vs_account_header_avatar_details { background-color: #fff; width: 152px; height: 152px; position: absolute; bottom: 0; right: 0; border-radius: 50%; display: flex; justify-content: center; align-items: center; font-size: 2rem; padding: 28px; text-align: center; } .vs_account_header_avatar_image { width: 100%; height: 100%; border-radius: 50%; border: 10px solid #fff; } .vs_account_header_fullName { font-size: 6rem; line-height: 1; color: #fff; font-weight: 300; } .vs_account_header_jobTitle { font-size: 4rem; line-height: 1; color: #fff; font-weight: 300; margin-bottom: 12px; } .vs_account_header_company { font-size: 4rem; line-height: 1; color: #fff; font-weight: 300; margin-bottom: 35px; } .vs_account_header_status { font-size: 1.6rem; line-height: 1; color: #fff; font-weight: 300; margin-bottom: 50px; font-family: 'Montserrat', sans-serif; display: flex; align-items: center; } .vs_account_header_status:before { content: ''; display: inline-block; width: 20px; height: 20px; margin-right: 10px; background-color: greenyellow; border-radius: 20px; } .vs_account_header_status-lapsed:before { background-color: orangered; } .vs_account_header_status-invalid:before { background-color: coral; } .vs_account_header_membership { font-size: 4rem; line-height: 1; color: #fff; font-weight: 300; } .vs_account_details { padding-top: 50px; padding-bottom: 50px; } @media (min-width: 992px) { .vs_account_details { padding-top: 100px; padding-bottom: 100px; } } .vs_account_details_membership { margin-bottom: 15px; } .vs_account_details_membership_details { background-color: #14293A; padding: 25px; } .vs_account_details_membership_title { color: #fff; font-size: 4rem; font-weight: 600; line-height: 1.5; margin-bottom: 12px; } .vs_account_details_membership_remaining { color: #fff; font-size: 2.5rem; line-height: 1; margin-bottom: 12px; } .vs_account_details_membership_expires { color: #fff; font-size: 2rem; line-height: 1; } .vs_account_details_membership_renew { color: #fff; font-size: 2.5rem; line-height: 1; display: block; text-align: center; background-color: #457DBF; padding: 25px; } .vs_account_details_membership_renew:visited, .vs_account_details_membership_renew:hover { color: #fff; } .vs_account_details_invoice { margin-bottom: 25px; } .vs_account_details_invoice_view { color: #fff; font-size: 2.5rem; line-height: 1; display: block; text-align: center; background-color: #DD7952; padding: 25px; } .vs_account_details_invoice_view:visited, .vs_account_details_invoice_view:hover { color: #fff; } .vs_account_details_container { justify-content: space-between; } .vs_account_details_twitter { max-height: 699px; overflow-y: scroll; } .vs_account_details_forums { margin-bottom: 25px; } .vs_account_details_forums_details { background-color: #fff; padding: 25px; } .vs_account_details_forums_title { font-size: 4rem; font-weight: 600; line-height: 1.5; margin-bottom: 25px; } .vs_account_details_forums_view { color: #fff; font-size: 2.5rem; line-height: 1; display: block; text-align: center; background-color: #005C54; padding: 25px; } .vs_account_details_forums_link { padding-bottom: 25px; border-bottom: 2px solid #14293A; margin-bottom: 25px; display: block; } .vs_account_details_forums_link:last-child { border-bottom: none; margin-bottom: 25px; } .vs_account_details_forums_link:visited, .vs_account_details_forums_link:hover { color: #fff; } .vs_account_details_forums_link_title { color: #232323; font-size: 2rem; line-height: 2; padding-bottom: 20px; } .vs_account_details_forums_link_details { display: flex; align-items: center; } .vs_account_details_forums_link_image { height: 40px; width: 40px; border-radius: 50%; margin-right: 20px; } .vs_account_details_forums_link_title { width: calc(100% - 60px); } .vs_account_details_wheel { position: relative; } .vs_account_details_wheel .wheel_details { margin-bottom: 25px; } @media (min-width: 992px) { .vs_account_details_wheel .wheel { zoom: 0.875; margin: 0; margin-bottom: 50px; } .vs_account_details_wheel .wheel_details-right { right: 0; left: auto; max-width: 430px; padding: 25px; } .vs_account_details_wheel .wheel_details-left { right: 0; left: auto; max-width: 430px; padding: 25px; } .vs_account_details_wheel .wheel_details_close { top: 10px; right: 10px; } } .vs_account_details_events { margin-bottom: 50px; } @media (min-width: 992px) { .vs_account_details_events { margin-bottom: 95px; } } .vs_account_details_events_title { font-size: var(--font-size-md); font-weight: 300; line-height: 1; margin-bottom: 20px; } @media (min-width: 992px) { .vs_account_details_events_title { margin-bottom: 50px; font-size: var(--font-size-lg); } } .vs_account_details_events_content p { font-size: var(--font-size-base); } .vs_account_details_events_container { display: flex; flex-wrap: wrap; width: 100%; } .vs_account_details_events_container_event { background-color: var(--colournavy); background-size: cover; background-repeat: no-repeat; width: 100%; max-width: 100%; padding: 25px 30px 30px; margin-bottom: 20px; display: flex; flex-direction: column; justify-content: space-between; height: 100%; } @media (min-width: 992px) { .vs_account_details_events_container_event { padding: 60px 50px 50px; } } .vs_account_details_events_container_event_title { font-family: var(--font-family-jubilat); color: var(--colourputty); line-height: 1.3; font-size: var(--font-size-base2); font-weight: 600; padding-bottom: 15px; } @media (min-width: 992px) { .vs_account_details_events_container_event_title { font-size: var(--font-size-md); } } .vs_account_details_events_container_event_location { font-family: var(--font-family-jubilat); color: var(--colourputty); line-height: 1.3; font-size: var(--font-size-xxs); font-weight: 600; padding-bottom: 15px; } @media (min-width: 992px) { .vs_account_details_events_container_event_location { font-size: var(--font-size-base2); } } .vs_account_details_events_container_event_date { font-family: var(--font-family-jubilat); color: var(--colourputty); line-height: 1.3; font-size: var(--font-size-xxxs); font-weight: 600; } @media (min-width: 992px) { .vs_account_details_events_container_event_date { font-size: var(--font-size-xs); } } .vs_account_details_articles { margin-bottom: 50px; position: relative; } .vs_account_details_articles_title { font-size: var(--font-size-md); font-weight: 300; line-height: 1; margin-bottom: 20px; } @media (min-width: 992px) { .vs_account_details_articles_title { margin-bottom: 50px; font-size: var(--font-size-lg); } } .vs_account_details_articles_swiper { overflow: hidden; margin-bottom: 20px; position: relative; } .vs_account_details_articles_swiper .swiper-slide { height: auto; } .vs_account_details_articles_post { background-color: #fff; margin-bottom: 20px; display: flex; flex-wrap: wrap; height: 100%; } @media (min-width: 992px) { .vs_account_details_articles_post { height: 100%; } } .vs_account_details_articles_post_image { width: 100%; } @media (min-width: 992px) { .vs_account_details_articles_post_image { max-width: 33.333333%; } } .vs_account_details_articles_post_image img { height: 100%; width: 100%; object-fit: cover; } .vs_account_details_articles_post_content { padding: 20px; width: 100%; display: flex; flex-direction: column; justify-content: space-between; } @media (min-width: 992px) { .vs_account_details_articles_post_content { max-width: 66.666666%; padding: 25px; } } .vs_account_details_articles_post_content_title { font-family: var(--font-family-jubilat); font-size: var(--font-size-xs); font-weight: 400; margin-bottom: 20px; color: var(--colourdarkgrey); font-weight: 600; line-height: 1.3; } @media (min-width: 992px) { .vs_account_details_articles_post_content_title { font-size: var(--font-size-base2); } } .vs_account_details_articles_post_content_excerpt { font-family: var(--font-family-Montserrat); font-size: var(--font-size-xxxs); font-weight: 400; color: var(--colourdarkgrey); line-height: 1.3; margin-bottom: 20px; } @media (min-width: 992px) { .vs_account_details_articles_post_content_excerpt { font-size: var(--font-size-xs); margin-bottom: 30px; } } .vs_account_details_articles_post_content_details { display: flex; justify-content: space-between; } .vs_account_details_articles_post_content_details_date { font-family: var(--font-family-Montserrat); font-size: var(--font-size-xxxs); font-weight: 400; color: var(--colourdarkgrey); line-height: 1.3; opacity: 0.5; } @media (min-width: 992px) { .vs_account_details_articles_post_content_details_date { font-size: var(--font-size-xs); } } .vs_account_details_articles_post_content_details_readmore { font-family: var(--font-family-Montserrat); font-size: var(--font-size-xxxs); font-weight: 400; color: var(--colourdarkgrey); line-height: 1.3; } @media (min-width: 992px) { .vs_account_details_articles_post_content_details_readmore { font-size: var(--font-size-xs); } } .vs_account_details_articles_post_content_details_readmore i { margin-left: 10px; } .vs_account_details_articles_content { margin-bottom: 50px; } .vs_account_details_articles .swiper-pagination { position: relative; margin-bottom: 20px; padding-top: 20px; } .vs_account_details_articles .swiper-pagination-bullet-active { background-color: #444444 !important; } .vs_account_details_articles .swiper-pagination-bullet { background-color: #929292; width: 25px; height: 25px; margin-left: 5px; margin-right: 5px; opacity: 1; } .vs_account_details_articles .swiper-button-next:after, .vs_account_details_articles .swiper-container-rtl .swiper-button-prev:after, .vs_account_details_articles .swiper-button-prev:after, .vs_account_details_articles .swiper-container-rtl .swiper-button-next:after { color: #444444; } .vs_account_details_articles .swiper-button-prev, .vs_account_details_articles .swiper-container-rtl .swiper-button-next { bottom: -8px; top: auto; z-index: 999; } .vs_account_details_articles .swiper-button-next, .vs_account_details_articles .swiper-container-rtl .swiper-button-prev { bottom: -8px; top: auto; z-index: 999; } .vs_membership { display: grid; grid-template-columns: repeat(3, 1fr); grid-gap: 2rem; margin-bottom: 2rem; position: relative; } .vs_membership_overlay { position: absolute; top: 0; left: 0; bottom: 0; right: 0; background: rgba(255, 255, 255, 0.85); display: flex; justify-content: center; align-items: center; font-size: 2rem; } .vs_membership_button { background: #f1f3f2; color: #616365; border: 0; border-radius: 0; font-size: 20px; line-height: 1; padding: 10px 0; width: 100%; text-align: center; } .vs_membership_loader { position: relative; } .vs_membership_loader_spin { justify-content: center; width: 30px; height: 30px; display: flex; align-items: center; position: absolute; top: calc(50% - 10px); left: 0; animation: spin 2s infinite linear; /* Adjust the animation duration and timing function as needed */ } .vs_membership_loader_title { margin-left: 40px; font-size: 20px; padding-top: 8px; } @keyframes spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } }