.ct-section { width:100%; background-size:cover; background-repeat:repeat; } .ct-section>.ct-section-inner-wrap { display:flex; flex-direction:column; align-items:flex-start; } .ct-div-block { display:flex; flex-wrap:nowrap; flex-direction:column; align-items:flex-start; } .ct-new-columns { display:flex; width:100%; flex-direction:row; align-items:stretch; justify-content:center; flex-wrap:wrap; } .ct-link-text { display:inline-block; } .ct-link { display:flex; flex-wrap:wrap; text-align:center; text-decoration:none; flex-direction:column; align-items:center; justify-content:center; } .ct-link-button { display:inline-block; text-align:center; text-decoration:none; } .ct-link-button { background-color: #1e73be; border: 1px solid #1e73be; color: #ffffff; padding: 10px 16px; } .ct-image { max-width:100%; } .ct-fancy-icon>svg { width:55px;height:55px;} .ct-inner-content { width:100%; } .ct-slide { display:flex; flex-wrap:wrap; text-align:center; flex-direction:column; align-items:center; justify-content:center; } .ct-nestable-shortcode { display:flex; flex-wrap:nowrap; flex-direction:column; align-items:flex-start; } .oxy-comments { width:100%; text-align:left; } .oxy-comment-form { width:100%; } .oxy-login-form { width:100%; } .oxy-search-form { width:100%; } .oxy-tabs-contents { display:flex; width:100%; flex-wrap:nowrap; flex-direction:column; align-items:flex-start; } .oxy-tab { display:flex; flex-wrap:nowrap; flex-direction:column; align-items:flex-start; } .oxy-tab-content { display:flex; width:100%; flex-wrap:nowrap; flex-direction:column; align-items:flex-start; } .oxy-testimonial { width:100%; } .oxy-icon-box { width:100%; } .oxy-pricing-box { width:100%; } .oxy-posts-grid { width:100%; } .oxy-gallery { width:100%; } .ct-slider { width:100%; } .oxy-tabs { display:flex; flex-wrap:nowrap; flex-direction:row; align-items:stretch; } .ct-modal { flex-direction:column; align-items:flex-start; } .ct-span { display:inline-block; text-decoration:inherit; } .ct-widget { width:100%; } .oxy-dynamic-list { width:100%; } @media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) { .ct-div-block, .oxy-post-content, .ct-text-block, .ct-headline, .oxy-rich-text, .ct-link-text { max-width: 100%; } img { flex-shrink: 0; } body * { min-height: 1px; } } .oxy-testimonial { flex-direction: row; align-items: center; } .oxy-testimonial .oxy-testimonial-photo-wrap { order: 1; } .oxy-testimonial .oxy-testimonial-photo { width: 125px; height: 125px; margin-right: 20px; } .oxy-testimonial .oxy-testimonial-photo-wrap, .oxy-testimonial .oxy-testimonial-author-wrap, .oxy-testimonial .oxy-testimonial-content-wrap { align-items: flex-start; text-align: left; } .oxy-testimonial .oxy-testimonial-text { margin-bottom:8px;font-size: 21px; line-height: 1.4; -webkit-font-smoothing: subpixel-antialiased; } .oxy-testimonial .oxy-testimonial-author { font-size: 18px; -webkit-font-smoothing: subpixel-antialiased; } .oxy-testimonial .oxy-testimonial-author-info { font-size: 12px; -webkit-font-smoothing: subpixel-antialiased; } .oxy-icon-box { text-align: left; flex-direction: column; } .oxy-icon-box .oxy-icon-box-icon { margin-bottom: 12px; align-self: flex-start; } .oxy-icon-box .oxy-icon-box-heading { font-size: 21px; margin-bottom: 12px; } .oxy-icon-box .oxy-icon-box-text { font-size: 16px; margin-bottom: 12px;align-self: flex-start; } .oxy-icon-box .oxy-icon-box-link { margin-top: 20px; } /* GLOBALS */ .oxy-pricing-box .oxy-pricing-box-section { padding-top: 20px; padding-left: 20px; padding-right: 20px; padding-bottom: 20px; text-align: center; } .oxy-pricing-box .oxy-pricing-box-section.oxy-pricing-box-price { justify-content: center; } /* IMAGE */ .oxy-pricing-box .oxy-pricing-box-section.oxy-pricing-box-graphic { justify-content: center; } /* TITLE */ .oxy-pricing-box .oxy-pricing-box-title-title { font-size: 48px; } .oxy-pricing-box .oxy-pricing-box-title-subtitle { font-size: 24px; } /* PRICE */ .oxy-pricing-box .oxy-pricing-box-section.oxy-pricing-box-price { flex-direction: row; } .oxy-pricing-box .oxy-pricing-box-currency { font-size: 28px; } .oxy-pricing-box .oxy-pricing-box-amount-main { font-size: 80px; line-height: 0.7; } .oxy-pricing-box .oxy-pricing-box-amount-decimal { font-size: 13px; } .oxy-pricing-box .oxy-pricing-box-term { font-size: 16px; } .oxy-pricing-box .oxy-pricing-box-sale-price { font-size: 12px; color: rgba(0,0,0,0.5); margin-bottom: 20px; } /* CONTENT */ .oxy-pricing-box .oxy-pricing-box-section.oxy-pricing-box-content { font-size: 16px; color: rgba(0,0,0,0.5); } /* CTA */ .oxy-pricing-box .oxy-pricing-box-section.oxy-pricing-box-cta { justify-content: center; } .oxy-progress-bar .oxy-progress-bar-background { background-color: #000000; background-image: linear-gradient(-45deg,rgba(255,255,255,.12) 25%,transparent 25%,transparent 50%,rgba(255,255,255,.12) 50%,rgba(255,255,255,.12) 75%,transparent 75%,transparent); animation: none 0s paused; } .oxy-progress-bar .oxy-progress-bar-progress-wrap { width: 85%; } .oxy-progress-bar .oxy-progress-bar-progress { background-color: #66aaff;padding: 40px;animation: none 0s paused, none 0s paused; background-image: linear-gradient(-45deg,rgba(255,255,255,.12) 25%,transparent 25%,transparent 50%,rgba(255,255,255,.12) 50%,rgba(255,255,255,.12) 75%,transparent 75%,transparent); } .oxy-progress-bar .oxy-progress-bar-overlay-text { font-size: 30px; font-weight: 900; -webkit-font-smoothing: subpixel-antialiased; } .oxy-progress-bar .oxy-progress-bar-overlay-percent { font-size: 12px; } .ct-slider .unslider-nav ol li {border-color: #ffffff; }.ct-slider .unslider-nav ol li.unslider-active {background-color: #ffffff; }.ct-slider .ct-slide { padding: 0px; } .oxy-superbox .oxy-superbox-secondary, .oxy-superbox .oxy-superbox-primary { transition-duration: 0.5s; } .oxy-shape-divider { width: 0px; height: 0px; } .oxy_shape_divider svg { width: 100%; } .oxy-pro-menu .oxy-pro-menu-container:not(.oxy-pro-menu-open-container):not(.oxy-pro-menu-off-canvas-container) .sub-menu{ box-shadow:px px px px ;} .oxy-pro-menu .oxy-pro-menu-show-dropdown .oxy-pro-menu-list .menu-item-has-children > a svg{ transition-duration:0.4s; } .oxy-pro-menu .oxy-pro-menu-show-dropdown .oxy-pro-menu-list .menu-item-has-children > a div{ margin-left:0px; } .oxy-pro-menu .oxy-pro-menu-mobile-open-icon svg{ width:30px; height:30px; } .oxy-pro-menu .oxy-pro-menu-mobile-open-icon{ padding-top:15px; padding-right:15px; padding-bottom:15px; padding-left:15px; } .oxy-pro-menu .oxy-pro-menu-mobile-open-icon, .oxy-pro-menu .oxy-pro-menu-mobile-open-icon svg{ transition-duration:0.4s; } .oxy-pro-menu .oxy-pro-menu-mobile-close-icon{ top:20px; left:20px; } .oxy-pro-menu .oxy-pro-menu-mobile-close-icon svg{ width:24px; height:24px; } .oxy-pro-menu .oxy-pro-menu-mobile-close-icon, .oxy-pro-menu .oxy-pro-menu-mobile-close-icon svg{ transition-duration:0.4s; } .oxy-pro-menu .oxy-pro-menu-container.oxy-pro-menu-off-canvas-container, .oxy-pro-menu .oxy-pro-menu-container.oxy-pro-menu-open-container{ background-color:#ffffff; } .oxy-pro-menu .oxy-pro-menu-off-canvas-container, .oxy-pro-menu .oxy-pro-menu-open-container{ background-image:url(); } .oxy-pro-menu .oxy-pro-menu-off-canvas-container .oxy-pro-menu-list .menu-item-has-children > a svg, .oxy-pro-menu .oxy-pro-menu-open-container .oxy-pro-menu-list .menu-item-has-children > a svg{ font-size:24px; } .oxy-pro-menu .oxy-pro-menu-dropdown-links-toggle.oxy-pro-menu-open-container .menu-item-has-children ul, .oxy-pro-menu .oxy-pro-menu-dropdown-links-toggle.oxy-pro-menu-off-canvas-container .menu-item-has-children ul{ background-color:rgba(0,0,0,0.2); border-top-style:solid; } .oxy-pro-menu .oxy-pro-menu-container:not(.oxy-pro-menu-open-container):not(.oxy-pro-menu-off-canvas-container) .oxy-pro-menu-list{ flex-direction: row; } .oxy-pro-menu .oxy-pro-menu-container .menu-item a{ text-align: left; justify-content: flex-start; } .oxy-pro-menu .oxy-pro-menu-container.oxy-pro-menu-open-container .menu-item, .oxy-pro-menu .oxy-pro-menu-container.oxy-pro-menu-off-canvas-container .menu-item{ align-items: flex-start; } .oxy-pro-menu .oxy-pro-menu-off-canvas-container{ top: 0; bottom: 0; right: auto; left: 0; } .oxy-pro-menu .oxy-pro-menu-container.oxy-pro-menu-open-container .oxy-pro-menu-list .menu-item a, .oxy-pro-menu .oxy-pro-menu-container.oxy-pro-menu-off-canvas-container .oxy-pro-menu-list .menu-item a{ text-align: left; justify-content: flex-start; } .oxy-site-navigation { --oxynav-brand-color:#4831B0; --oxynav-neutral-color:#FFFFFF; --oxynav-activehover-color:#EFEDF4; --oxynav-background-color:#4831B0; --oxynav-border-radius:0px; --oxynav-other-spacing:8px; --oxynav-transition-duration:0.3s; --oxynav-transition-timing-function:cubic-bezier(.84,.05,.31,.93); } .oxy-site-navigation .oxy-site-navigation__mobile-close-wrapper{ text-align:left; } .oxy-site-navigation > ul{ left: 0; } .oxy-site-navigation { --oxynav-animation-name: none; } .oxy-site-navigation > ul:not(.open) > li[data-cta='true']:nth-last-child(1){ background-color: var(--oxynav-brand-color); transition: var(--oxynav-transition-duration); margin-left: var(--oxynav-other-spacing); border: none; } .oxy-site-navigation > ul:not(.open) > li[data-cta='true']:nth-last-child(2){ background: transparent; border: 1px solid currentColor; transition: var(--oxynav-transition-duration); margin-left: var(--oxynav-other-spacing); } .oxy-site-navigation > ul:not(.open) > li[data-cta='true']:nth-last-child(2):not(:hover) > img{ filter: invert(0) !important; } .oxy-site-navigation > ul:not(.open) > li[data-cta='true']:hover{ background-color: var(--oxynav-activehover-color); } .oxy-site-navigation > ul:not(.open) > li[data-cta='true']:nth-last-child(1) > a{ color: var(--oxynav-neutral-color); } .oxy-site-navigation > ul:not(.open) > li[data-cta='true']:nth-last-child(2) > a{ color: var(--oxynav-brand-color); } .oxy-site-navigation > ul:not(.open) > li[data-cta='true']:hover > a{ color: var(--oxynav-brand-color); } .oxy-site-navigation > ul:not(.open) > li[data-cta='true']:nth-last-child(1) > a::after{ color: var(--oxynav-neutral-color); } .oxy-site-navigation > ul:not(.open) > li[data-cta='true']:nth-last-child(2) > a::after{ color: var(--oxynav-brand-color); } .oxy-site-navigation > ul:not(.open) > li[data-cta='true']:hover > a::after{ color: var(--oxynav-brand-color); } .oxy-site-navigation > ul:not(.open) > li[data-cta='true'] > ul{ display: none; } .oxy-site-navigation > ul:not(.open) > li[data-cta='true'] > button, .oxy-site-navigation > ul:not(.open) > li[data-cta='true'] > ul{ display: none; } .ct-section-inner-wrap, .oxy-header-container{ max-width: 1300px; } body {font-family: 'Open Sans';}body {line-height: 1.4;font-size: var(--fs0) ;font-weight: 500;color: #282828;}.oxy-nav-menu-hamburger-line {background-color: #282828;}h1, h2, h3, h4, h5, h6 {font-family: 'Montserrat';font-size: var(--fs1) ;font-weight: 500;line-height: 1.2;}h2, h3, h4, h5, h6{font-size: var(--fs2) ;}h3, h4, h5, h6{font-size: var(--fs3) ;}h4, h5, h6{font-size: var(--fs4) ;}h5, h6{font-size: var(--fs5) ;}h6{font-size: var(--fs6) ;}a {text-decoration: none;}.ct-link-text {color: #8b3a19;text-decoration: none;}.ct-link-text:hover {color: #4f4f4f;text-decoration: none;}.ct-link {color: #282828;text-decoration: none;}.ct-link-button {border-radius: 3px;}.ct-section-inner-wrap { padding-top: var(--sect-tb) ; padding-right: var(--gutters) ; padding-bottom: var(--sect-tb) ; padding-left: var(--gutters) ; }.ct-new-columns > .ct-div-block { padding-top: 20px; padding-right: 20px; padding-bottom: 20px; padding-left: 20px; }.oxy-header-container { padding-right: var(--gutters) ; padding-left: var(--gutters) ; }@media (max-width: 992px) { .ct-columns-inner-wrap { display: block !important; } .ct-columns-inner-wrap:after { display: table; clear: both; content: ""; } .ct-column { width: 100% !important; margin: 0 !important; } .ct-columns-inner-wrap { margin: 0 !important; } } .sa-body:locked{ } .sa-body { } .sa-modal-header:locked{ } .sa-modal-header { } .sa-modal-title { margin-bottom:19px; } .oxy-close-modal { } .sa-modal-image { } .sa-modal-details:locked{ } .sa-modal-details { width:100%; } .glb-p-sm:locked{ } .glb-p-sm { } .sa-modal-date { font-weight:500; } .grd:locked{ } .grd { } .grd-2 { } .gap-sm:locked{ } .gap-sm { } .sa-modal-time:locked{ } .sa-modal-time { font-weight:500; text-transform:uppercase; } .sa-modal-finish:locked{ } .sa-modal-finish { font-weight:500; text-transform:uppercase; } .sa-modal-location { font-size:var(--fs-1) ; font-weight:500; color:#ffffff; padding-left:15px; padding-right:15px; background-color:#8b3a19; } .sa-modal-type { font-size:var(--fs0) ; font-weight:500; color:#ffffff; padding-left:15px; padding-right:15px; background-color:#707070; } .sa-modal-description { font-size:var(--fs-1) ; } .sa-office-list:locked{ } .sa-office-list { } .tile:locked{ } .tile { } .no-gap:locked{ } .no-gap { } .glb-p-lg:locked{ } .glb-p-lg { } .event-modal:locked{ } .event-modal { } .rtb-modal-title { } .rtb-modal-image { } .rtb-modal-details { } .rtb-modal-date { } .rtb-modal-time { } .rtb-modal-type { } .rtb-modal-description { } .rtb-modal-socials { } .sa-page-heading { } .sa-page-heading:not(.ct-section):not(.oxy-easy-posts), .sa-page-heading.oxy-easy-posts .oxy-posts, .sa-page-heading.ct-section .ct-section-inner-wrap{ display:flex; } .pillar-resources:locked{ } .pillar-resources { } .row-gap-sm:locked{ } .row-gap-sm { } .icon:locked{ } .icon { color: #333333;}.icon >svg {width: 16px;height: 16px;}.icon { margin-right:8px; } .gap-md:locked{ } .gap-md { } .glb-div-container:locked{ } .glb-div-container { border-radius:var(--bdr-rad-sm) ; } .sa-office-tiles:locked{ } .sa-office-tiles { } .grd-2-1:locked{ } .grd-2-1 { } .brk-xl:locked{ } .brk-xl { } .tile__title:locked{ } .tile__title { } .full-span:locked{ } .full-span { } .tile__details:locked{ } .tile__details { } .grd-2-3:locked{ } .grd-2-3 { } .eq-h:locked{ } .eq-h { } .tile__text:locked{ } .tile__text { } .oxel-breadcrumb-wrapper { width:max-content ; background-color:#9e9e9e; padding-left:15px; padding-right:15px; } .oxel-breadcrumb-code { width:100%; } .rud-slide-menu { width:100%; } .rud-slide-menu .oxy-slide-menu_dropdown-icon-click-area > svg{ transition-duration:.2s; } .rud-slide-menu .oxy-slide-menu_dropdown-icon-click-area{ padding-left:15px; padding-right:15px; padding-top:3px; padding-bottom:3px; } .rud-slide-menu .oxy-slide-menu_dropdown-icon-click-area:hover{ background-color:#e2007a; } .rud-slide-menu .oxy-slide-menu_dropdown-icon-click-area.oxy-slide-menu_open > svg{ transform:rotate(180deg); } .rud-slide-menu .oxy-slide-menu_list .menu-item a{ transition-duration:.3s; } .rud-slide-menu .oxy-slide-menu_list .menu-item a:hover{ color:#e2007a; } .rud-slide-menu .menu-item a{ text-decoration: none; } @media (max-width: 1300px) { } .hamm-footer-socials { } .hamm-footer-socials:not(.ct-section):not(.oxy-easy-posts), .hamm-footer-socials.oxy-easy-posts .oxy-posts, .hamm-footer-socials.ct-section .ct-section-inner-wrap{ display:flex; flex-direction:row; align-items:center; justify-content:flex-start; } @media (max-width: 991px) { .hamm-footer-socials { } } .rud-footer-social__icon:hover{ color: #e2007a;}.rud-footer-social__icon:hover{ cursor: pointer; } .rud-footer-social__icon { color: #203786;}.rud-footer-social__icon >svg {width: 24px;height: 24px;}.rud-footer-social__icon { margin-left:8px; margin-right:8px; transition-duration:.2s; } .rud-menu-search:locked{ } .rud-menu-search { margin-right:4px; } .rud-menu-search__icon:locked{ } .rud-menu-search__icon { } .rud-menu { } .rud-menu .oxy-pro-menu-list .menu-item a{ padding-top:10px; padding-bottom:10px; } .flx:locked{ } .flx { } .flx-4 { } .samples { } .abs { } .files-stretch { } .tiles-pt-25 { } .samples__inner { } .box-shadow-tiny:locked{ } .box-shadow-tiny { } .styles:locked{ } .styles { } .grd-1-3:locked{ } .grd-1-3 { color:#0037ff; } .grd-4:locked{ } .grd-4 { } .flx-2-1:locked{ } .flx-2-1 { } .flx-2:locked{ } .flx-2 { } .grd-3:locked{ } .grd-3 { } .flx-3-2:locked{ } .flx-3-2 { } .flx-6:locked{ } .flx-6 { } .header-socials { } .header-socials:not(.ct-section):not(.oxy-easy-posts), .header-socials.oxy-easy-posts .oxy-posts, .header-socials.ct-section .ct-section-inner-wrap{ display:flex; flex-direction:row; align-items:center; justify-content:flex-start; } @media (max-width: 991px) { .header-socials { } } .nav-social__icon:hover{ color: #212121;}.nav-social__icon:hover{ cursor: pointer; } .nav-social__icon { color: #5a5a5a;}.nav-social__icon >svg {width: 24px;height: 24px;}.nav-social__icon { margin-left:8px; margin-right:8px; transition-duration:.2s; } .tiles-stretch { } .oxy-slide-menu { } .main-header { width:100%; } .main-header__main-seal:locked{ } .main-header__main-seal { } .main-header__tasa-seal { position:absolute; top:0px; left:0px; max-width:250px; width:25vmin ; } .main-header__tasa-seal:not(.ct-section):not(.oxy-easy-posts), .main-header__tasa-seal.oxy-easy-posts .oxy-posts, .main-header__tasa-seal.ct-section .ct-section-inner-wrap{ display:flex; flex-direction:column; justify-content:center; } .main-header__title { } .header-buttons { padding-top:8px; padding-bottom:8px; } .header-buttons:not(.ct-section):not(.oxy-easy-posts), .header-buttons.oxy-easy-posts .oxy-posts, .header-buttons.ct-section .ct-section-inner-wrap{ display:none; align-items:center; } .header-buttons__tile { padding-left:8px; padding-right:8px; } .tasa-button { border-radius:50px; padding-left:22px; padding-right:22px; padding-top:4px; padding-bottom:4px; transition-duration:.3s; } .bg-col1 { background-color:#e5e5e5; } .tasa-button1:hover{ background-color:#1a1a1a; } .tasa-button1 { background-color:#8b3a19; border-top-color:#e5e5e5; border-right-color:#e5e5e5; border-bottom-color:#e5e5e5; border-left-color:#e5e5e5; } .textured-bg1 { background-image:url(https://terraaustralisstatesassembly.net/ta01-as001/wp-content/uploads/sites/2/2024/09/asfalt-dark.png);background-size: auto; background-repeat:repeat; background-color:#707070; } .flx-3:locked{ } .flx-3 { } .tile__inner:locked{ } .tile__inner { } .assemblies-grid { } .oxy-stock-content-styles { } .title-section { } .title-section .ct-section-inner-wrap { padding-top: calc(var(--sect-tb) / 2) ; padding-bottom: calc(var(--sect-tb) / 2) ; } .box-shadow-filter { } .shadow-filter-tiny { filter: drop-shadow( 0 0 2px #987); } .sa-pillar-tile:locked{ } .sa-pillar-tile { } .sa-icon { color: #282828;}.sa-icon >svg {width: 30px;height: 30px;}.sa-icon { transition-duration:.3s; } .grd-1-2:locked{ } .grd-1-2 { } .flx-1-2:locked{ } .flx-1-2 { } .tiles-centre:locked{ } .tiles-centre { } .title { transition-duration:.3s; color:#282828; } .grd-3-1:locked{ } .grd-3-1 { } .tile__date:locked{ } .tile__date { } .sa-agroup-container:locked{ } .sa-agroup-container { } .sa-agroup-heading { } .sa-bdr-rad:locked{ } .sa-bdr-rad { border-radius:var(--bdr-rad) ; } .sa-link__button { width:max-content ; padding-top:.5em; padding-right:2em; padding-bottom:.5em; padding-left:2em; background-color:#9e9e9e; border-top-color:#707070; border-right-color:#707070; border-bottom-color:#707070; border-left-color:#707070; border-top-style:solid; border-right-style:solid; border-bottom-style:solid; border-left-style:solid; border-top-width:1px; border-right-width:1px; border-bottom-width:1px; border-left-width:1px; } .sa-bdr-rad__sm:locked{ } .sa-bdr-rad__sm { border-radius:var(--bdr-rad-sm) ; } .flx-1-3:locked{ } .flx-1-3 { } .flx-dyn-5 { } .vspace-md { } .brk-lg:locked{ } .brk-lg { } .tile__image:locked{ } .tile__image { } .tasa-offices:locked{ } .tasa-offices { } .main-header__region { } .sa-sub-heading:locked{ } .sa-sub-heading { } .sa-offices-container:locked{ } .sa-offices-container { } .tiles-end:locked{ } .tiles-end { } .tiles-middle:locked{ } .tiles-middle { } .body-w-md:locked{ } .body-w-md { width:100%; max-width:800px; } .sa-menu__mob { } .sa-news-list:locked{ } .sa-news-list { } .grow { } .tile__content { } .tile__link { } .item-heading:locked{ } .item-heading { } .sa-modal-socials { margin-bottom:23px; } .sa-modal-socials:not(.ct-section):not(.oxy-easy-posts), .sa-modal-socials.oxy-easy-posts .oxy-posts, .sa-modal-socials.ct-section .ct-section-inner-wrap{ display:flex; flex-direction:column; align-items:center; } .sa-home-events-col:locked{ } .sa-home-events-col { } .sa-sub-heading__xl:locked{ } .sa-sub-heading__xl { } .no-row-gap:locked{ } .no-row-gap { } .sa-pillar-column:locked{ } .sa-pillar-column { } .sa-news-home-tile:locked{ } .sa-news-home-tile { } .sa-nav-logo:locked{ } .sa-nav-logo { width:14em; min-width:150px; } .sa-nav-logo:not(.ct-section):not(.oxy-easy-posts), .sa-nav-logo.oxy-easy-posts .oxy-posts, .sa-nav-logo.ct-section .ct-section-inner-wrap{ display:flex; flex-direction:row; flex-wrap:nowrap; align-items:center; justify-content:flex-start; } /* Main site global variables */ /* FOR GOLIVE - remove comments and unused classes */ :root { /* FONTS and HEADINGS */ /* ..variables copied to headings and Oxy Settings > Global Styles */ /* CALCULATOR here: https://utopia.fyi/generator-mk-ii/ */ /* OBVIOUSLY, USE ONLY ONE SET OF FONT-SIZE VARIABLES!! */ /*--fs-2= body-2 --fs-1 = body-1 --fs0 = body --fs1 = H1 --fs2 = H2 --fs3 = H3 --fs4 = H4 --fs5 = H5 --fs6 = H6*/ /* @link https://utopia.fyi/type/calculator?c=320,14,1.125,1400,16,1.125,6,2,&s=0.75|0.5|0.25,1.5|2|3|4|6,s-l&g=s,l,xl,12 */ --fs-2: clamp(0.6914rem, 0.6621rem + 0.1463vw, 0.7901rem); --fs-1: clamp(0.7778rem, 0.7449rem + 0.1646vw, 0.8889rem); --fs0: clamp(0.875rem, 0.838rem + 0.1852vw, 1rem); --fs1: clamp(1.7739rem, 1.6988rem + 0.3754vw, 2.0273rem); --fs2: clamp(1.5768rem, 1.51rem + 0.3337vw, 1.802rem); --fs3: clamp(1.4016rem, 1.3423rem + 0.2966vw, 1.6018rem); --fs4: clamp(1.2458rem, 1.1931rem + 0.2637vw, 1.4238rem); --fs5: clamp(1.1074rem, 1.0605rem + 0.2344vw, 1.2656rem); --fs6: clamp(0.9844rem, 0.9427rem + 0.2083vw, 1.125rem); /* --fs-xl: clamp(1.77rem, calc(1.30rem + 2.35vw), 3.36rem); */ --fs-xl: clamp(1.7739rem, 1.4147rem + 1.7957vw, 2.986rem); /* == VERSION: -v7- 15 May 2025 == */ /* - added a 'scaling' variable - comprehensively accommodated '.tile__inner' for formatting within tiles - functioning dynamic CSSGRIDs ... grd-dyn/-sm/-lg - tile widths are set with vars below (col-dyn/-sm/-lg) */ /* COLOURS */ /* Use Oxygen Global colours that are set within the Oxygen Builder Global Settings To use the variables, simply use eg. #ffffff in place of the colour value. The number should correspond with the number of the colour in the Oxy Global Settings. */ /* PADDINGS AND MARGINS */ /* ..these two variables intended for the main Oxygen global padding for Sections /* ..applied also to [Oxygen] Settings > Global Styles > Sections & Columns padding */ --gutters: 20px; --sect-tb: calc(2vw + 20px); /* use for default Oxy SECTION top&bottom padding */ --marg-bottom: 200px; --sect-top: 30px; /* COLUMNS */ /* ...for FLEXBOX centre justification */ /* NOTE: 'Gap' is not necessary if using space-between or space-around justification */ /* NOTE: This framwork was made because the standard CSS 'gap' doesn't work as desired (for FlexBox) This framework enables flexbox 'tiles' to be flush left and right aligned */ /* GLOBAL SIZING VARIABLES: Global gap spacing and default settings - these are the default values throughout the site */ --gap: 2vmax; /* desired default gap for FlexBox and CSSGRID */ --vgap: 20px; /* vertical spacing for content in grid "tiles" */ --p: 2vmin; /* padding */ --bdr-rad: .8em; /* border radius */ --col-dyn-xs: 12em; /* width for tile in dynamic CSSGRID */ --col-dyn-sm: 16em; /* width for tile in dynamic CSSGRID */ --col-dyn: 20em; /* width for tile in dynamic CSSGRID */ --col-dyn-lg: 30em; /* width for tile in dynamic CSSGRID */ --scaling: 1.7; /* determines the scaling factor between xs,sm,md,lg,xl IN ALL CASES /* ..applied with classes (at the bottom): max-w-sm etc */ --maxwsm: 600px; --maxwmd: 800px; --maxwlg: 1000px; /* ===================*/ --half-gap: calc(var(--gap) / 2); --gap-xs: calc((var(--gap) / (var(--scaling) * 2))); --gap-sm: calc((var(--gap) / var(--scaling))); --gap-lg: calc((var(--gap) * var(--scaling))); --gap-xl: calc((var(--gap) * (var(--scaling) * 2))); --row-gap: var(--gap); --row-gap-xs: calc((var(--gap) / (var(--scaling) * 2))); --row-gap-sm: calc((var(--gap) / var(--scaling))); --row-gap-lg: calc((var(--gap) * var(--scaling))); --row-gap-xl: calc((var(--gap) * (var(--scaling) * 2))); --vgap-xs: calc(var(--vgap) / (var(--scaling) * 2)); --vgap-sm: calc(var(--vgap) / var(--scaling)); --vgap-lg: calc(var(--vgap) * var(--scaling)); --neg-gap: calc(var(--half-gap) * -1); --neg-gap-sm: calc(var(--gap-sm) * -1); --neg-gap-lg: calc(var(--gap-lg) * -1); --flx-dyn-gap: 2vw; --tile-tb: 3vw; /* For the width of Flex columns, corresponding with the number of columns */ /* ..for responsive behaviour, add the new desired Col width/number for smaller screens * ie. 3 Column layout may go to 2 columns below 768px. So change column width value from * var(--cols-3) to var(--cols-2) for that media query */ /* --page-width: calc(1300px - (2 * var(--gutters)));*/ --cols-2: calc(100% / 2); --cols-3: calc(100% / 3); --cols-4: calc(100% / 4); --cols-5: calc(100% / 5); --cols-6: calc(100% / 6); /* ADJUSTMENTS */ /* Width for the flex-containing-div */ /* NOTE: The following two variables are not needed if not using centre justification */ /* ..for Flex centre alignment/justification */ /* This allows for negative L&R margins (below) to accommodate the 'gap' in the margins so that the columns sit flush with left and right edges */ /* --flex-containing-div: calc(100% + var(--gap));*/ --flex-dyn-containing-div: calc(100% + var(--flx-dyn-gap)); /* --neg-gap used for L&R margins for the flex-containing-div */ --neg-gap: calc( var(--half-gap) * -1); --neg-dyn-gap: calc(calc(var(--flx-dyn-gap) / 2) * -1); /* HERO and BANNER image heights */ --hero-height: 25vmax; --banner-height: 25vw; /* Supplemental pages sometimes have a banner of less height */ /* SITE CUSTOM VARIABLES */ --bdr-rad-xs: calc(var(--bdr-rad) / (var(--scaling) * 2)); --bdr-rad-sm: calc(var(--bdr-rad) / var(--scaling)); --bdr-rad-lg: calc(var(--bdr-rad) * var(--scaling)); --p-xs: calc(var(--p) / (var(--scaling) * 2)); --p-sm: calc(var(--p) / var(--scaling)); --p-md: var(--p); /* default */ --p-lg: calc(var(--p) * var(--scaling)); --p-xl: calc(var(--p) * (var(--scaling) * 2)); --neg-p-xs: calc(var(--p-sm) * -1); --neg-p-sm: calc(var(--p-sm) * -1); --neg-p-md: calc(var(--p-md) * -1); --neg-p-lg: calc(var(--p-lg) * -1); --neg-p-xl: calc(var(--p-xl) * -1); } /* GLOBAL STYLING OF BELOW GRID FRAMEWORK */ /* TEMPLATE GLOBAL STYLING */ /* FLEXGRID */ /* --- USE --- For FlexBox, apply the 'flx' class to the parent container. Modifiers exist for the parent container: eg. 'gap-sm' 't-vgap' etc */ .flx { /* width: var(--flex-containing-div);*/ /* margin: 0 var(--neg-gap) calc(var(--gap) * -1);*/ width: 100%; display: flex; flex-flow: row wrap; /* **** default might need to be set to COLUMN for wanting to do dynamic row layouts **** */ align-items: stretch; } .flx > *:has(.tile__inner) { width: 100%; } .flx .tile__inner { width: 100%; display: flex; flex-flow: row wrap; align-items: stretch; } /* BREAKPOINT CLASSES */ .brk-xl, /* 1100px */ .brk-lg, /* 991px */ .brk-md, /* 767px */ .brk-sm, /* 579px */ .brk-xs { /* 480px */ } .flx.gap-xs { width: calc(100% + var(--gap-xs)); margin: 0 calc((var(--gap-xs) / 2) * -1) calc(var(--row-gap-xs) * -1); } .flx.gap-sm { width: calc(100% + var(--gap-sm)); margin: 0 calc((var(--gap-sm) / 2) * -1) calc(var(--row-gap-sm) * -1); } .flx.gap, .flx.gap-md { width: calc(100% + var(--gap)); margin: 0 calc((var(--gap) / 2) * -1) calc(var(--row-gap) * -1); } .flx.gap-lg { width: calc(100% + var(--gap-lg)); margin: 0 calc((var(--gap-lg) / 2) * -1) calc(var(--row-gap-lg) * -1); } .flx.gap-xl { width: calc(100% + var(--gap-xl)); margin: 0 calc((var(--gap-xl) / 2) * -1) calc(var(--row-gap-xl) * -1); } .flx-col { flex-flow: column; } .flx > * { display: flex; align-content: start; align-content: flex-start; } /* When using an Oxy Repeater, href can't be applied to the Repeater 'tile div' so an internal div is applied that can have the href applied - .tile__inner */ /*.flx > * { width: 100%; }*/ .flx > * { margin: 0 ; } .flx.gap-xs > * { margin: 0 calc(var(--gap-xs) / 2) var(--row-gap-xs); } .flx.gap-sm > * { margin: 0 calc(var(--gap-sm) / 2) var(--row-gap-sm); } .flx.gap > *, .flx.gap-md > * { margin: 0 calc(var(--gap) / 2) var(--row-gap); } .flx.gap-lg > * { margin: 0 calc(var(--gap-lg) / 2) var(--row-gap-lg); } .flx.gap-xl > * { margin: 0 calc(var(--gap-xl) / 2) var(--row-gap-xl); } /* ###################################################*/ /* Something to try with flex ... Use 'flex: 1 1 {min-width}' for .flx > div ?? The {min-width} would be set in px to determine the number of columns */ /* ###################################################*/ /* For columns (tiles) with dynamically sizing width */ .flx.flx-col > * { width: 100%; } .flx-2 > * { width: var(--cols-2); } .flx-3 > * { width: var(--cols-3); } .flx-4 > * { width: var(--cols-4); } .flx-5 > * { width: var(--cols-5); } .flx-6 > * { width: var(--cols-6); } .flx-2.gap-xs > * { width: calc(var(--cols-2) - var(--gap-xs)); } .flx-3.gap-xs > * { width: calc(var(--cols-3) - var(--gap-xs)); } .flx-4.gap-xs > * { width: calc(var(--cols-4) - var(--gap-xs)); } .flx-5.gap-xs > * { width: calc(var(--cols-5) - var(--gap-xs)); } .flx-6.gap-xs > * { width: calc(var(--cols-6) - var(--gap-xs)); } .flx-2.gap-sm > * { width: calc(var(--cols-2) - var(--gap-sm)); } .flx-3.gap-sm > * { width: calc(var(--cols-3) - var(--gap-sm)); } .flx-4.gap-sm > * { width: calc(var(--cols-4) - var(--gap-sm)); } .flx-5.gap-sm > * { width: calc(var(--cols-5) - var(--gap-sm)); } .flx-6.gap-sm > * { width: calc(var(--cols-6) - var(--gap-sm)); } .flx-2.gap > *, .flx-2.gap-md > * { width: calc(var(--cols-2) - var(--gap)); } .flx-3.gap > *, .flx-3.gap-md > * { width: calc(var(--cols-3) - var(--gap)); } .flx-4.gap > *, .flx-4.gap-md > * { width: calc(var(--cols-4) - var(--gap)); } .flx-5.gap > *, .flx-5.gap-md > * { width: calc(var(--cols-5) - var(--gap)); } .flx-6.gap > *, .flx-6.gap-md > * { width: calc(var(--cols-6) - var(--gap)); } .flx-2.gap-lg > * { width: calc(var(--cols-2) - var(--gap-lg)); } .flx-3.gap-lg > * { width: calc(var(--cols-3) - var(--gap-lg)); } .flx-4.gap-lg > * { width: calc(var(--cols-4) - var(--gap-lg)); } .flx-5.gap-lg > * { width: calc(var(--cols-5) - var(--gap-lg)); } .flx-6.gap-lg > * { width: calc(var(--cols-6) - var(--gap-lg)); } .flx-2.gap-xl > * { width: calc(var(--cols-2) - var(--gap-xl)); } .flx-3.gap-xl > * { width: calc(var(--cols-3) - var(--gap-xl)); } .flx-4.gap-xl > * { width: calc(var(--cols-4) - var(--gap-xl)); } .flx-5.gap-xl > * { width: calc(var(--cols-5) - var(--gap-xl)); } .flx-6.gap-xl > * { width: calc(var(--cols-6) - var(--gap-xl)); } /* For dynamic display of grid where columns (tiles) have a fixed width, according to pagewidth (var(--page-width)) */ .flx-dyn-2, .flx-dyn-3, .flx-dyn-4, .flx-dyn-5, .flx-dyn-6 { width: var(--flex-dyn-containing-div) !important; margin: 0 var(--neg-dyn-gap); } .flx-dyn-2 > * { flex: 0 1 calc(var(--cols-2) - var(--flx-dyn-gap)); margin: 0 calc(var(--flx-dyn-gap) / 2); } .flx-dyn-3 > * { flex: 0 1 calc(var(--cols-3) - var(--flx-dyn-gap)); margin: 0 calc(var(--flx-dyn-gap) / 2); } .flx-dyn-4 > * { flex: 0 1 calc(var(--cols-4) - var(--flx-dyn-gap)); margin: 0 calc(var(--flx-dyn-gap) / 2); } .flx-dyn-5 > * { flex: 0 1 calc(var(--cols-5) - var(--flx-dyn-gap)); margin: 0 calc(var(--flx-dyn-gap) / 2); } .flx-dyn-6 > * { flex: 0 1 calc(var(--cols-6) - var(--flx-dyn-gap)); margin: 0 calc(var(--flx-dyn-gap) / 2); } /* For a dynamic grid based on fixed widths declared for these variables above: --flx-sm --flx-md --flx-lg */ .flx-dyn-sm > * { flex: 0 1 var(--col-width-sm); margin: calc(var(--flx-dyn-gap) / 2px); } .flx-dyn > * { flex: 0 1 var(--col-width); margin: calc(var(--flx-dyn-gap) / 2px); } .flx-dyn-lg > * { flex: 0 1 var(--col-width-lg); margin: calc(var(--flx-dyn-gap) / 2px); } /* CSSGRID STRUCTURE MODIFIERS */ .flx-1-2 > *:nth-child(odd) { width: var(--cols-3); margin: 0; } .flx-1-2 > *:nth-child(even) { width: calc(var(--cols-3) * 2); margin: 0; } .flx-1-2.gap-xs > *:nth-child(odd) { width: calc(var(--cols-3) - var(--gap-xs)); margin: 0 calc(var(--gap-xs) / 2) var(--row-gap-xs); } .flx-1-2.gap-xs > *:nth-child(even) { width: calc((var(--cols-3) * 2) - var(--gap-xs)); margin: 0 calc(var(--gap-xs) / 2) var(--row-gap-xs); } .flx-1-2.gap-sm > *:nth-child(odd) { width: calc(var(--cols-3) - var(--gap-sm)); margin: 0 calc(var(--gap-sm) / 2) var(--row-gap-sm); } .flx-1-2.gap-sm > *:nth-child(even) { width: calc((var(--cols-3) * 2) - var(--gap-sm)); margin: 0 calc(var(--gap-sm) / 2) var(--row-gap-sm); } .flx-1-2.gap > *:nth-child(odd) { width: calc(var(--cols-3) - var(--gap)); margin: 0 calc(var(--gap) / 2) var(--row-gap); } .flx-1-2.gap > *:nth-child(even) { width: calc((var(--cols-3) * 2) - var(--gap)); margin: 0 calc(var(--gap) / 2) var(--row-gap); } .flx-1-2.gap-lg > *:nth-child(odd) { width: calc(var(--cols-3) - var(--gap-lg)); margin: 0 calc(var(--gap-xs) / 2) var(--row-gap-lg); } .flx-1-2.gap-lg > *:nth-child(even) { width: calc((var(--cols-3) * 2) - var(--gap-lg)); margin: 0 calc(var(--gap-lg) / 2) var(--row-gap-lg); } .flx-2-1 > *:nth-child(odd) { width: calc(var(--cols-3) * 2); margin: 0; } .flx-2-1 > *:nth-child(even) { width: var(--cols-3); margin: 0; } .flx-2-1.gap-xs > *:nth-child(even) { width: calc(var(--cols-3) - var(--gap-xs)); margin: 0 calc(var(--gap-xs) / 2) var(--row-gap-xs); } .flx-2-1.gap-xs > *:nth-child(odd) { width: calc((var(--cols-3) * 2) - var(--gap-xs)); margin: 0 calc(var(--gap-xs) / 2) var(--row-gap-xs); } .flx-2-1.gap-sm > *:nth-child(even) { width: calc(var(--cols-3) - var(--gap-sm)); margin: 0 calc(var(--gap-sm) / 2) var(--row-gap-sm); } .flx-2-1.gap-sm > *:nth-child(odd) { width: calc((var(--cols-3) * 2) - var(--gap-sm)); margin: 0 calc(var(--gap-sm) / 2) var(--row-gap-sm); } .flx-2-1.gap > *:nth-child(even) { width: calc(var(--cols-3) - var(--gap)); margin: 0 calc(var(--gap) / 2) var(--row-gap); } .flx-2-1.gap > *:nth-child(odd) { width: calc((var(--cols-3) * 2) - var(--gap)); margin: 0 calc(var(--gap) / 2) var(--row-gap); } .flx-2-1.gap-lg > *:nth-child(even) { width: calc(var(--cols-3) - var(--gap-lg)); margin: 0 calc(var(--gap-xs) / 2) var(--row-gap-lg); } .flx-2-1.gap-lg > *:nth-child(odd) { width: calc((var(--cols-3) * 2) - var(--gap-lg)); margin: 0 calc(var(--gap-lg) / 2) var(--row-gap-lg); } .flx-1-3 > *:nth-child(odd) { width: var(--cols-4); margin: 0; } .flx-1-3 > *:nth-child(even) { width: calc(var(--cols-4) * 3); margin: 0; } .flx-1-3.gap-xs > *:nth-child(odd) { width: calc(var(--cols-4) - var(--gap-xs)); margin: 0 calc(var(--gap-xs) / 2) var(--row-gap-xs); } .flx-1-3.gap-xs > *:nth-child(even) { width: calc((var(--cols-4) * 3) - var(--gap-xs)); margin: 0 calc(var(--gap-xs) / 2) var(--row-gap-xs); } .flx-1-3.gap-sm > *:nth-child(odd) { width: calc(var(--cols-4) - var(--gap-sm)); margin: 0 calc(var(--gap-sm) / 2) var(--row-gap-sm); } .flx-1-3.gap-sm > *:nth-child(even) { width: calc((var(--cols-4) * 3) - var(--gap-sm)); margin: 0 calc(var(--gap-sm) / 2) var(--row-gap-sm); } .flx-1-3.gap > *:nth-child(odd) { width: calc(var(--cols-4) - var(--gap)); margin: 0 calc(var(--gap) / 2) var(--row-gap); } .flx-1-3.gap > *:nth-child(even) { width: calc((var(--cols-4) * 3) - var(--gap)); margin: 0 calc(var(--gap) / 2) var(--row-gap); } .flx-1-3.gap-lg > *:nth-child(odd) { width: calc(var(--cols-4) - var(--gap-lg)); margin: 0 calc(var(--gap-xs) / 2) var(--row-gap-lg); } .flx-1-3.gap-lg > *:nth-child(even) { width: calc((var(--cols-4) * 3) - var(--gap-lg)); margin: 0 calc(var(--gap-lg) / 2) var(--row-gap-lg); } .flx-3-1 > *:nth-child(odd) { width: calc(var(--cols-4) * 3); margin: 0; } .flx-3-1 > *:nth-child(even) { width: var(--cols-4); margin: 0; } .flx-3-1.gap-xs > *:nth-child(even) { width: calc(var(--cols-4) - var(--gap-xs)); margin: 0 calc(var(--gap-xs) / 2) var(--row-gap-xs); } .flx-3-1.gap-xs > *:nth-child(odd) { width: calc((var(--cols-4) * 3) - var(--gap-xs)); margin: 0 calc(var(--gap-xs) / 2) var(--row-gap-xs); } .flx-3-1.gap-sm > *:nth-child(even) { width: calc(var(--cols-4) - var(--gap-sm)); margin: 0 calc(var(--gap-sm) / 2) var(--row-gap-sm); } .flx-3-1.gap-sm > *:nth-child(odd) { width: calc((var(--cols-4) * 3) - var(--gap-sm)); margin: 0 calc(var(--gap-sm) / 2) var(--row-gap-sm); } .flx-3-1.gap > *:nth-child(even) { width: calc(var(--cols-4) - var(--gap)); margin: 0 calc(var(--gap) / 2) var(--row-gap); } .flx-3-1.gap > *:nth-child(odd) { width: calc((var(--cols-4) * 3) - var(--gap)); margin: 0 calc(var(--gap) / 2) var(--row-gap); } .flx-3-1.gap-lg > *:nth-child(even) { width: calc(var(--cols-4) - var(--gap-lg)); margin: 0 calc(var(--gap-xs) / 2) var(--row-gap-lg); } .flx-3-1.gap-lg > *:nth-child(odd) { width: calc((var(--cols-4) * 3) - var(--gap-lg)); margin: 0 calc(var(--gap-lg) / 2) var(--row-gap-lg); } .flx-2-3 > *:nth-child(odd) { width: calc(var(--cols-5) * 2); margin: 0; } .flx-2-3 > *:nth-child(even) { width: calc(var(--cols-5) * 3); margin: 0; } .flx-2-3.gap-xs > *:nth-child(odd) { width: calc((var(--cols-5) * 2) - var(--gap-xs)); margin: 0 calc(var(--gap-xs) / 2) var(--row-gap-xs); } .flx-2-3.gap-xs > *:nth-child(even) { width: calc((var(--cols-5) * 3) - var(--gap-xs)); margin: 0 calc(var(--gap-xs) / 2) var(--row-gap-xs); } .flx-2-3.gap-sm > *:nth-child(odd) { width: calc((var(--cols-5) * 2) - var(--gap-sm)); margin: 0 calc(var(--gap-sm) / 2) var(--row-gap-sm); } .flx-2-3.gap-sm > *:nth-child(even) { width: calc((var(--cols-5) * 3) - var(--gap-sm)); margin: 0 calc(var(--gap-sm) / 2) var(--row-gap-sm); } .flx-2-3.gap > *:nth-child(odd) { width: calc((var(--cols-5) * 2) - var(--gap)); margin: 0 calc(var(--gap) / 2) var(--row-gap); } .flx-2-3.gap > *:nth-child(even) { width: calc((var(--cols-5) * 3) - var(--gap)); margin: 0 calc(var(--gap) / 2) var(--row-gap); } .flx-2-3.gap-lg > *:nth-child(odd) { width: calc((var(--cols-5) * 2) - var(--gap-lg)); margin: 0 calc(var(--gap-xs) / 2) var(--row-gap-lg); } .flx-2-3.gap-lg > *:nth-child(even) { width: calc((var(--cols-5) * 3) - var(--gap-lg)); margin: 0 calc(var(--gap-lg) / 2) var(--row-gap-lg); } .flx-3-2 > *:nth-child(odd) { width: calc(var(--cols-5) * 3); margin: 0; } .flx-3-2 > *:nth-child(even) { width: calc(var(--cols-5) * 2); margin: 0; } .flx-3-2.gap-xs > *:nth-child(even) { width: calc((var(--cols-5) * 2) - var(--gap-xs)); margin: 0 calc(var(--gap-xs) / 2) var(--row-gap-xs); } .flx-3-2.gap-xs > *:nth-child(odd) { width: calc((var(--cols-5) * 3) - var(--gap-xs)); margin: 0 calc(var(--gap-xs) / 2) var(--row-gap-xs); } .flx-3-2.gap-sm > *:nth-child(even) { width: calc((var(--cols-5) * 2) - var(--gap-sm)); margin: 0 calc(var(--gap-sm) / 2) var(--row-gap-sm); } .flx-3-2.gap-sm > *:nth-child(odd) { width: calc((var(--cols-5) * 3) - var(--gap-sm)); margin: 0 calc(var(--gap-sm) / 2) var(--row-gap-sm); } .flx-3-2.gap > *:nth-child(even) { width: calc((var(--cols-5) * 2) - var(--gap)); margin: 0 calc(var(--gap) / 2) var(--row-gap); } .flx-3-2.gap > *:nth-child(odd) { width: calc((var(--cols-5) * 3) - var(--gap)); margin: 0 calc(var(--gap) / 2) var(--row-gap); } .flx-3-2.gap-lg > *:nth-child(even) { width: calc((var(--cols-5) * 2) - var(--gap-lg)); margin: 0 calc(var(--gap-xs) / 2) var(--row-gap-lg); } .flx-3-2.gap-lg > *:nth-child(odd) { width: calc((var(--cols-5) * 3) - var(--gap-lg)); margin: 0 calc(var(--gap-lg) / 2) var(--row-gap-lg); } .flx.row-gap-xs > * { margin-bottom: var(--row-gap-xs); } .flx.row-gap-sm > * { margin-bottom: var(--row-gap-sm); } .flx.row-gap > * { margin-bottom: var(--row-gap); } .flx.row-gap-lg > * { margin-bottom: var(--row-gap-lg); } .flx.row-gap-xl > * { margin-bottom: var(--row-gap-xl); } .flx.no-row-gap > *, .flx.no-row-gap { margin-bottom: 0 !important; } /* CSSGRID */ /* --- USE --- Apply the 'grd' class to the parent container according to where the responsive change should occur */ .grd { /* 479px */ width: 100%; display: grid !important; align-items: start; align-content: start; grid-template-columns: 1fr; } .grd:has(> .tile__inner), .grd:has(> * > .tile__inner) { grid-template-rows: 1fr; align-items: stretch; } /* --- USE --- Only use these classes for evenly spaced columns (tiles) that size dynamically. Apply the single class with the desired columns to the parent container The number = the number of desired columns */ .grd-2 { /* lg & sm refer to breakpoints */ grid-template-columns: repeat(2, 1fr); } .grd-3 { grid-template-columns: repeat(3, 1fr); } .grd-4 { grid-template-columns: repeat(4, 1fr); } .grd-5 { grid-template-columns: repeat(5, 1fr); } .grd-6 { grid-template-columns: repeat(6, 1fr); } /* --- USE --- For a responsive row of [evenly sized] columns (tiles) apply the relevant class to the parent container (and don't use the classes above) */ /* -- don't use the 'tile' class on the parent container */ /* This is responsive by default and doesn't require additional media queries */ /* For a dynamic grid based on fixed widths declared for these variables above: --grd-dyn-sm --grd-dyn --grd-dyn-lg Column widths are set with GLOBAL SIZING VARIABLES: at the top with: --col-dyn-sm --col-dyn --col-dyn-lg */ /* eg. for md (medium) columns, apply only 'grd-dyn' class to the parent container */ /* This is responsive by default and doesn't require additional media queries */ .grd-dyn-xs { grid-template-columns: repeat(auto-fill, minmax(min(var(--col-dyn-xs),100%), 1fr)); } .grd-dyn-xs.gap-xs { grid-template-columns: repeat(auto-fill, minmax(min(calc(var(--col-dyn-xs) - var(--gap-xs)),100%), 1fr)); } .grd-dyn-xs.gap-sm { grid-template-columns: repeat(auto-fill, minmax(min(calc(var(--col-dyn-xs) - var(--gap-sm)),100%), 1fr)); } .grd-dyn-xs.gap { grid-template-columns: repeat(auto-fill, minmax(min(calc(var(--col-dyn-xs) - var(--gap)),100%), 1fr)); } .grd-dyn-xs.gap-lg { grid-template-columns: repeat(auto-fill, minmax(min(calc(var(--col-dyn-xs) - var(--gap-lg)),100%), 1fr)); } .grd-dyn-xs.gap-xl { grid-template-columns: repeat(auto-fill, minmax(min(calc(var(--col-dyn-xs) - var(--gap-xl)),100%), 1fr)); } .grd-dyn-sm { grid-template-columns: repeat(auto-fill, minmax(min(var(--col-dyn-sm),100%), 1fr)); } .grd-dyn-sm.gap-xs { grid-template-columns: repeat(auto-fill, minmax(min(calc(var(--col-dyn-sm) - var(--gap-xs)),100%), 1fr)); } .grd-dyn-sm.gap-sm { grid-template-columns: repeat(auto-fill, minmax(min(calc(var(--col-dyn-sm) - var(--gap-sm)),100%), 1fr)); } .grd-dyn-sm.gap { grid-template-columns: repeat(auto-fill, minmax(min(calc(var(--col-dyn-sm) - var(--gap)),100%), 1fr)); } .grd-dyn-sm.gap-lg { grid-template-columns: repeat(auto-fill, minmax(min(calc(var(--col-dyn-sm) - var(--gap-lg)),100%), 1fr)); } .grd-dyn-sm.gap-xl { grid-template-columns: repeat(auto-fill, minmax(min(calc(var(--col-dyn-sm) - var(--gap-xl)),100%), 1fr)); } .grd-dyn { grid-template-columns: repeat(auto-fill, minmax(min(var(--col-dyn),100%), 1fr)); } .grd-dyn.gap-xs { grid-template-columns: repeat(auto-fill, minmax(min(calc(var(--col-dyn) - var(--gap-xs)),100%), 1fr)); } .grd-dyn.gap-sm { grid-template-columns: repeat(auto-fill, minmax(min(calc(var(--col-dyn) - var(--gap-sm)),100%), 1fr)); } .grd-dyn.gap { grid-template-columns: repeat(auto-fill, minmax(min(calc(var(--col-dyn) - var(--gap)),100%), 1fr)); } .grd-dyn.gap-lg { grid-template-columns: repeat(auto-fill, minmax(min(calc(var(--col-dyn) - var(--gap-lg)),100%), 1fr)); } .grd-dyn.gap-xl { grid-template-columns: repeat(auto-fill, minmax(min(calc(var(--col-dyn) - var(--gap-xl)),100%), 1fr)); } .grd-dyn-lg { grid-template-columns: repeat(auto-fill, minmax(min(var(--col-dyn-lg),100%), 1fr)); } .grd-dyn-lg.gap-xs { grid-template-columns: repeat(auto-fill, minmax(min(calc(var(--col-dyn-lg) - var(--gap-xs)),100%), 1fr)); } .grd-dyn-lg.gap-sm { grid-template-columns: repeat(auto-fill, minmax(min(calc(var(--col-dyn-lg) - var(--gap-sm)),100%), 1fr)); } .grd-dyn-lg.gap { grid-template-columns: repeat(auto-fill, minmax(min(calc(var(--col-dyn-lg) - var(--gap)),100%), 1fr)); } .grd-dyn-lg.gap-lg { grid-template-columns: repeat(auto-fill, minmax(min(calc(var(--col-dyn-lg) - var(--gap-lg)),100%), 1fr)); } .grd-dyn-lg.gap-xl { grid-template-columns: repeat(auto-fill, minmax(min(calc(var(--col-dyn-lg) - var(--gap-xl)),100%), 1fr)); } /* CSSGRID VARIED LAYOUTS */ /* eg. using 'grd-1-2' on the parent container will display 2 columns. The right column being twice as wide as the left column. */ .grd-1-2 { grid-template-columns: 1fr 2fr; } .grd-1-3 { grid-template-columns: 1fr 3fr; } .grd-1-4 { grid-template-columns: 1fr 4fr; } .grd-2-1 { grid-template-columns: 2fr 1fr; } .grd-3-1 { grid-template-columns: 3fr 1fr; } .grd-4-1 { grid-template-columns: 4fr 1fr; } .grd-2-3 { grid-template-columns: 2fr 3fr; } .grd-3-2 { grid-template-columns: 3fr 2fr; } .grd-auto-1, .grd-auto-1 .tile__inner { grid-template-columns: auto 1fr; } .grd-1-auto, .grd-1-auto .tile__inner { grid-template-columns: 1fr auto; } /* CSSGRID MODIFIERS */ /* ...may need to provide grd and flx specific modifiers? ... */ .tile-tb { padding: var(--grd-tb) 0; } .grd.gap-xs { gap: var(--gap-xs); } .grd.gap-sm { gap: var(--gap-sm); } .grd.gap, .grd.gap-md { gap: var(--gap); } .grd.gap-lg { gap: var(--gap-lg); } .grd.gap-xl { gap: var(--gap-xl); } .grd.row-gap-xs { row-gap: var(--row-gap-xs); } .grd.row-gap-sm { row-gap: var(--row-gap-sm); } .grd.row-gap, .grd.row-gap-md { row-gap: var(--row-gap); } .grd.row-gap-lg { row-gap: var(--row-gap-lg); } .grd.row-gap-xl { row-gap: var(--row-gap-xl); } .no-break, .no-brk { /* class is added to avoid breaks by way of {selector}:not(.no-break) */ } /* Restricting dynamic FLEX rows from wrapping until set screen width in media queries below */ /*.flx-row { flex-direction: row; }*/ .flx-wrap-xs, .flx-wrap-sm, .flx-wrap, .flx-wrap-md, .flx-wrap-lg, .flx-wrap-xl { flex-wrap: nowrap; } /* ### Vertical spacing for items within a .tile ### ... NOT SUITABLE FOR A GRID PARENT DIV ... */ /* NOTE: .tile__inner is used primarily for a div inside the Oxy REPEATER item div because Oxygen does not permit the main item div to have href. href (ie. permalink() ) is then applied to the .tile__inner */ /* Set internal divs in a tile to full width */ /* ???? QUESTION WHETHER THIS IS NEEDED ???? */ /*[class*="t-vgap"] > * > *:not(.grd):not(.flx), [class*="t-vgap"] > * > *:not(.grd):not(.flx) { width: 100%; }*/ .flx.t-vgap-xs > *:not(.grd):not(.flx):not(:has(.tile__inner)) > * + *, .flx.t-vgap-xs > * > .tile__inner > * + * { margin-top: var(--vgap-xs); } .flx.t-vgap-sm > *:not(.grd):not(.flx):not(:has(.tile__inner)) > * + *, .flx.t-vgap-sm > * > .tile__inner > * + * { margin-top: var(--vgap-sm); } .flx.t-vgap > *:not(.grd):not(.flx):not(:has(.tile__inner)) > * + *, .flx.t-vgap > * > .tile__inner > * + * { margin-top: var(--vgap); } .flx.t-vgap-lg > *:not(.grd):not(.flx):not(:has(.tile__inner)) > * + *, .flx.t-vgap-lg > * > .tile__inner > * + * { margin-top: var(--vgap-lg); } .grd.t-vgap-xs > *:not(.grd):not(.flx):not(:has(.tile__inner)) > * + *, .grd.t-vgap-xs > * > .tile__inner > * + * { margin-top: var(--vgap-xs); } .grd.t-vgap-sm > *:not(.grd):not(.flx):not(:has(.tile__inner)) > * + *, .grd.t-vgap-sm > * > .tile__inner > * + * { margin-top: var(--vgap-sm); } .grd.t-vgap > *:not(.grd):not(.flx):not(:has(.tile__inner)) > * + *, .grd.t-vgap > * > .tile__inner > * + * { margin-top: var(--vgap); } .grd.t-vgap-lg > *:not(.grd):not(.flx):not(:has(.tile__inner)) > * + *, .grd.t-vgap-lg > * > .tile__inner > * + * { margin-top: var(--vgap-lg); } .flx.no-vgap, .grd.no-vg /* ### TILES INTERNAL PADDING ### */ .flx.t-p-xs > *:not(.grd):not(.flx):not(:has(.tile__inner)), .flx.t-p-xs > * > .tile__inner, .grd.t-p-xs > *:not(.grd):not(.flx):not(:has(.tile__inner)), .grd.t-p-xs > * > .tile__inner { padding: var(--p-xs); } .flx.t-p-sm > *:not(.grd):not(.flx):not(:has(.tile__inner)), .flx.t-p-sm > * > .tile__inner, .grd.t-p-sm > *:not(.grd):not(.flx):not(:has(.tile__inner)), .grd.t-p-sm > * > .tile__inner { padding: var(--p-sm); } .flx.t-p > *:not(.grd):not(.flx):not(:has(.tile__inner)), .flx.t-p > * > .tile__inner, .grd.t-p > *:not(.grd):not(.flx):not(:has(.tile__inner)), .grd.t-p > * > .tile__inner { padding: var(--p); } .flx.t-p-lg > *:not(.grd):not(.flx):not(:has(.tile__inner)), .flx.t-p-lg > * > .tile__inner, .grd.t-p-lg > *:not(.grd):not(.flx):not(:has(.tile__inner)), .grd.t-p-lg > * > .tile__inner { padding: var(--p-lg); } /* X and Y axis padding .p-X-Y 1 = xs 2 = sm 3 = default (p or p-md) 4 = lg */ .flx.t-p-1-2 > *:not(.grd):not(.flx):not(:has(.tile__inner)), .flx.t-p-1-2 > * > .tile__inner, .grd.t-p-1-2 > *:not(.grd):not(.flx):not(:has(.tile__inner)), .grd.t-p-1-2 > * > .tile__inner { padding: var(--p-sm) var(--p-xs); } .flx.t-p-2-1 > *:not(.grd):not(.flx):not(:has(.tile__inner)), .flx.t-p-2-1 > * > .tile__inner, .grd.t-p-2-1 > *:not(.grd):not(.flx):not(:has(.tile__inner)), .grd.t-p-2-1 > * > .tile__inner { padding: var(--p-xs) var(--p-sm); } .flx.t-p-1-3 > *:not(.grd):not(.flx):not(:has(.tile__inner)), .flx.t-p-1-3 > * > .tile__inner, .grd.t-p-1-3 > *:not(.grd):not(.flx):not(:has(.tile__inner)), .grd.t-p-1-3 > * > .tile__inner { padding: var(--p) var(--p-xs); } .flx.t-p-3-1 > *:not(.grd):not(.flx):not(:has(.tile__inner)), .flx.t-p-3-1 > * > .tile__inner, .grd.t-p-3-1 > *:not(.grd):not(.flx):not(:has(.tile__inner)), .grd.t-p-3-1 > * > .tile__inner { padding: var(--p-xs) var(--p); } .flx.t-p-2-3 > *:not(.grd):not(.flx):not(:has(.tile__inner)), .flx.t-p-2-3 > * > .tile__inner, .grd.t-p-2-3 > *:not(.grd):not(.flx):not(:has(.tile__inner)), .grd.t-p-2-3 > * > .tile__inner { padding: var(--p) var(--p-sm); } .flx.t-p-3-2 > *:not(.grd):not(.flx):not(:has(.tile__inner)), .flx.t-p-3-2 > * > .tile__inner, .grd.t-p-3-2 > *:not(.grd):not(.flx):not(:has(.tile__inner)), .grd.t-p-3-2 > * > .tile__inner { padding: var(--p-sm) var(--p); } .flx.t-p-3-4 > *:not(.grd):not(.flx):not(:has(.tile__inner)), .flx.t-p-3-4 > * > .tile__inner, .grd.t-p-3-4 > *:not(.grd):not(.flx):not(:has(.tile__inner)), .grd.t-p-3-4 > * > .tile__inner { padding: var(--p-lg) var(--p); } .flx.t-p-4-3 > *:not(.grd):not(.flx):not(:has(.tile__inner)), .flx.t-p-4-3 > * > .tile__inner, .grd.t-p-4-3 > *:not(.grd):not(.flx):not(:has(.tile__inner)), .grd.t-p-4-3 > * > .tile__inner { padding: var(--p) var(--p-lg); } .flx.t-p-2-4 > *:not(.grd):not(.flx):not(:has(.tile__inner)), .flx.t-p-2-4 > * > .tile__inner, .grd.t-p-2-4 > *:not(.grd):not(.flx):not(:has(.tile__inner)), .grd.t-p-2-4 > * > .tile__inner { padding: var(--p-lg) var(--p-sm); } .flx.t-p-4-2 > *:not(.grd):not(.flx):not(:has(.tile__inner)), .flx.t-p-4-2 > * > .tile__inner, .grd.t-p-4-2 > *:not(.grd):not(.flx):not(:has(.tile__inner)), .grd.t-p-4-2 > * > .tile__inner { padding: var(--p-sm) var(--p-lg); } .flx.t-p-1-4 > *:not(.grd):not(.flx):not(:has(.tile__inner)), .flx.t-p-1-4 > * > .tile__inner, .grd.t-p-1-4 > *:not(.grd):not(.flx):not(:has(.tile__inner)), .grd.t-p-1-4 > * > .tile__inner { padding: var(--p-lg) var(--p-xs); } .flx.t-p-4-1 > *:not(.grd):not(.flx):not(:has(.tile__inner)), .flx.t-p-4-1 > * > .tile__inner, .grd.t-p-4-1 > *:not(.grd):not(.flx):not(:has(.tile__inner)), .grd.t-p-4-1 > * > .tile__inner { padding: var(--p-xs) var(--p-lg); } .flx.t-p-1-5 > *:not(.grd):not(.flx):not(:has(.tile__inner)), .flx.t-p-1-5 > * > .tile__inner, .grd.t-p-1-5 > *:not(.grd):not(.flx):not(:has(.tile__inner)), .grd.t-p-1-5 > * > .tile__inner { padding: var(--p-xl) var(--p-xs); } .flx.t-p-5-1 > *:not(.grd):not(.flx):not(:has(.tile__inner)), .flx.t-p-5-1 > * > .tile__inner, .grd.t-p-5-1 > *:not(.grd):not(.flx):not(:has(.tile__inner)), .grd.t-p-5-1 > * > .tile__inner { padding: var(--p-xs) var(--p-xl); } /* ### TILES BORDER RADIUS ### */ .flx.t-rad-xs > *, .grd.t-rad-xs > * { border-radius: var(--bdr-rad-xs); overflow: hidden; } .flx.t-rad-sm > *, .grd.t-rad-sm > * { border-radius: var(--bdr-rad-sm); overflow: hidden; } .flx.t-rad > *, .grd.t-rad > * { border-radius: var(--bdr-rad); overflow: hidden; } .flx.t-rad-lg > *, .grd.t-rad-lg > * { border-radius: var(--bdr-rad-lg); overflow: hidden; } /* MODIFIERS */ .tiles-centre, .tiles-center, .center-row, .centre-row { justify-items: center; justify-content: center; } .tiles-left { align-items: start; justify-content: flex-start; } .tiles-right { /* align-items: end;*/ justify-content: flex-end; } .tile-top { align-items: start; align-items: flex-start; } .tiles-end { align-content: end !important; align-content: flex-end !important; } .tiles-middle, .grd.v-middle { /* display: grid;*/ align-items: center; align-content: stretch !important; } .flx.v-middle { align-items: center; } .flx-between { justify-content: space-between; } .flx-around { justify-content: space-around; } .full-span { grid-column: 1 / -1; flex: 1 0 100%; max-width: unset; } .flx.contents-center > *:not(.grd), .flx.contents-centre > *:not(.grd), .flx.contents-center .tile__inner:not(.grd) > *:not(.grd), .flx.contents-centre .tile__inner:not(.grd) > *:not(.grd) { align-items: center; text-align: center !important; } .grd.contents-center > *:not(.flx), .grd.contents-centre > *:not(.flx), .grd.contents-center .tile__inner:not(.flx) > *:not(.flx), .grd.contents-centre .tile__inner:not(.flx) > *:not(.flx) { /* align-items: center; */ display: grid; justify-content: center; text-align: center !important; } .flx.contents-right > *:not(.grd), .flx.contents-right .tile__inner:not(.grd) > *:not(.grd) { align-items: flex-end; text-align: right !important; } .grd.contents-right > *:not(.flx), .grd.contents-right .tile__inner:not(.flx) > *:not(.flx) { justify-items: end; text-align: right !important; } .flx.v-middle > *:not(.grd), .flx.v-middle .tile__inner:not(.grd) > *:not(.grd) { justify-content: center; } .grd.v-middle > *:not(.flx), .grd.v-middle .tile__inner:not(.flx) > *:not(.flx) { align-items: center; } .tiles-stretch, .eq-h { align-items: stretch; } .flx .grow, .flx.grow, .flx-grow { flex: 1; } .grd.grow { grid-template-rows: 1fr; } .flx.nowrap { flex-wrap: nowrap; } .no-gutters { margin-left: calc(var(--gutters) * -1); margin-right: calc(var(--gutters) * -1); width: calc((2 * var(--gutters)) + 100%); } /* ### Use only classes that are necessary ### */ .tile__inner, /* Used inside of the div in Oxy REPEATER. This div can have an href applied */ .tile__title, .tile__subtitle, .tile__details, .tile__content, .tile__extras, .tile__listitem, .tile__contacts, .tile__text, .tile__email, .tile__phone, .tile__name, .tile__image, .tile__number, .tile__icon, .tile__date, .tile__time, .tile__day, .tile__file, .tile__tax, .tile__button { width: 100%; /* display: flex; flex-wrap: nowrap; flex-direction: column; */ } .contents-center .tile__title, .contents-center .tile__subtitle, .contents-center .tile__details, .contents-center .tile__content, .contents-center .tile__extras, .contents-center .tile__listitem, .contents-center .tile__contacts, .contents-center .tile__text, .contents-center .tile__email, .contents-center .tile__phone, .contents-center .tile__name, .contents-center .tile__image, .contents-center .tile__number, .contents-center .tile__icon, .contents-center .tile__date, .contents-center .tile__time, .contents-center .tile__day, .contents-center .tile__file, .contents-center .tile__tax, .contents-center .tile__button { align-items: center; text-align: center; } .contents-right .tile__title, .contents-right .tile__subtitle, .contents-right .tile__details, .contents-right .tile__content, .contents-right .tile__extras, .contents-right .tile__listitem, .contents-right .tile__contacts, .contents-right .tile__text, .contents-right .tile__email, .contents-right .tile__phone, .contents-right .tile__name, .contents-right .tile__image, .contents-right .tile__number, .contents-right .tile__icon, .contents-right .tile__date, .contents-right .tile__time, .contents-right .tile__day, .contents-right .tile__file, .contents-right .tile__tax, .contents-right .tile__button { align-items: flex-end; text-align: right; } .flx-row .tile__title, .flx-row .tile__subtitle, .flx-row .tile__details, .flx-row .tile__content, .flx-row .tile__listitem, .flx-row .tile__text, .flx-row .tile__email, .flx-row .tile__phone, .flx-row .tile__name, .flx-row .tile__image, .flx-row .tile__number, .flx-row .tile__icon, .flx-row .tile__date, .flx-row .tile__time, .flx-row .tile__day, .flx-row .tile__file, .flx-row .tile__tax, .flx-row .tile__button { width: unset; } .tile__inner { flex: 1; } .tile__title { } .tile__subtitle { } .tile__details { } .tile__content { } .tile__text { } .tile__image { align-items: center; } .tile__button { } /* == BOX/DROP SHADOWS == */ .box-shadow-tiny { box-shadow: 0 1px 3px 0 rgba(0,0,0,.3),0 0 0 1px rgba(0,0,0,.04); /* ..a little more left offset */ /*box-shadow: -2px 1px 3px 0 rgba(0,0,0,.3),0 0 0 1px rgba(0,0,0,.04);*/ } .box-shadow-med { box-shadow: 0 2.3px 6.2px rgba(0, 0, 0, 0.024), 0 5.3px 14.4px rgba(0, 0, 0, 0.034), 0 10.5px 30.2px rgba(0, 0, 0, 0.045), 0 25px 80px rgba(0, 0, 0, 0.07); } .box-shadow-med__offset { /* variation */ box-shadow: -3px 3px 10px rgba(0, 0, 0, 0.24), -3px 3px 15px rgba(0, 0, 0, 0.31); } .box-shadow-soft { /* same as 'dreamy' below */ box-shadow: 0 1px 2px rgba(0,0,0,0.07), 0 2px 4px rgba(0,0,0,0.07), 0 4px 8px rgba(0,0,0,0.07), 0 8px 16px rgba(0,0,0,0.07), 0 16px 32px rgba(0,0,0,0.07), 0 32px 64px rgba(0,0,0,0.07); } .box-shadow-alt2 { box-shadow: 0 1px 1px rgba(0,0,0,0.12), 0 2px 2px rgba(0,0,0,0.12), 0 4px 4px rgba(0,0,0,0.12), 0 8px 8px rgba(0,0,0,0.12), 0 16px 16px rgba(0,0,0,0.12); } .box-shadow-alt3 { box-shadow: 0 1px 1px rgba(0,0,0,0.11), 0 2px 2px rgba(0,0,0,0.11), 0 4px 4px rgba(0,0,0,0.11), 0 8px 8px rgba(0,0,0,0.11), 0 16px 16px rgba(0,0,0,0.11), 0 32px 32px rgba(0,0,0,0.11); } .box-shadow-blog-sharp { box-shadow: 0 1px 1px rgba(0,0,0,0.25), 0 2px 2px rgba(0,0,0,0.20), 0 4px 4px rgba(0,0,0,0.15), 0 8px 8px rgba(0,0,0,0.10), 0 16px 16px rgba(0,0,0,0.05); } .box-shadow-blog-diffuse { box-shadow: 0 1px 1px rgba(0,0,0,0.08), 0 2px 2px rgba(0,0,0,0.12), 0 4px 4px rgba(0,0,0,0.16), 0 8px 8px rgba(0,0,0,0.20); } .box-shadow-blog-dreamy { box-shadow: 0 1px 2px rgba(0,0,0,0.07), 0 2px 4px rgba(0,0,0,0.07), 0 4px 8px rgba(0,0,0,0.07), 0 8px 16px rgba(0,0,0,0.07), 0 16px 32px rgba(0,0,0,0.07), 0 32px 64px rgba(0,0,0,0.07); } .box-shadow-shorter { box-shadow: 0 1px 1px rgba(0,0,0,0.11), 0 2px 2px rgba(0,0,0,0.11), 0 4px 4px rgba(0,0,0,0.11), 0 6px 8px rgba(0,0,0,0.11), 0 8px 16px rgba(0,0,0,0.11); } .box-shadow-longer { box-shadow: 0 2px 1px rgba(0,0,0,0.09), 0 4px 2px rgba(0,0,0,0.09), 0 8px 4px rgba(0,0,0,0.09), 0 16px 8px rgba(0,0,0,0.09), 0 32px 16px rgba(0,0,0,0.09); } .box-shadow-filter { filter: drop-shadow( -3px 3px 6px #26262661); } /* For use with modifying the Search Input with Oxy, to add a custom icon */ .screen-reader-text { display: block; clip: rect(1px,1px,1px,1px); word-wrap: normal!important; border: 0; clip-path: inset(50%); height: 1px; margin: -1px; overflow: hidden; overflow-wrap: normal!important; padding: 0; position: absolute!important; width: 1px; } /* ### IMPORTANT PLEASE ### */ /* ... This section of media queries is only for the FLEX and GRID framework above. For custom CSS media queries, create a new and separate style sheet */ /* ... This allows for easy future maintenance and updates of the FLEX and GRID framework as it evolves. */ /* BREAKPOINT CLASSES */ /* .brk-xl, 1100px .brk-lg, 991px .brk-md, 767px .brk-sm, 579px .brk-xs { 480px }*/ @media screen and (max-width: 1200px) { .flx-6:not(.no-break) > * { width: var(--cols-5); } .flx-6.gap-sm:not(.no-break) > * { width: calc(var(--cols-5) - var(--gap-sm)); } .grd-6:not(.no-break) { grid-template-columns: repeat(5, 1fr); } .grd-6.gap-sm:not(.no-break) { grid-template-columns: repeat(5, 1fr); } } @media screen and (max-width: 1100px) { .flx-wrap-xl { flex-wrap: wrap; } .flx.brk-xl > * { width: 100%; } .grd.brk-xl { grid-template-columns: 1fr; } .grd-4:not(.no-break):not(.brk-lg):not(.brk-md):not(.brk-sm):not(.brk-xs) { grid-template-columns: 1fr 1fr; } .grd-1-4:not(.no-break):not(.brk-lg):not(.brk-md):not(.brk-sm):not(.brk-xs), .grd-4-1:not(.no-break):not(.brk-lg):not(.brk-md):not(.brk-sm):not(.brk-xs) { grid-template-columns: 1fr; } } @media screen and (max-width: 991px) { .flx-wrap-lg { flex-wrap: wrap; } .flx.brk-lg > * { width: 100%; } .grd.brk-lg { grid-template-columns: 1fr; } .grd-3:not(.no-break):not(.brk-md):not(.brk-sm):not(.brk-xs) { grid-template-columns: repeat(2, 1fr); } .grd-1-3:not(.no-break):not(.brk-md):not(.brk-sm):not(.brk-xs), .grd-3-1:not(.no-break):not(.brk-md):not(.brk-sm):not(.brk-xs) { grid-template-columns: 1fr; } .grd-4:not(.no-break):not(.brk-md):not(.brk-sm):not(.brk-xs) { grid-template-columns: 1fr 1fr; } .grd-1-4:not(.no-break):not(.brk-md):not(.brk-sm):not(.brk-xs), .grd-4-1:not(.no-break):not(.brk-md):not(.brk-sm):not(.brk-xs) { grid-template-columns: 1fr; } .flx-3:not(.no-break):not(.brk-md):not(.brk-sm):not(.brk-xs) > * { width: calc(var(--cols-2) - var(--gap)); } .flx-3.gap-xs:not(.no-break):not(.brk-md):not(.brk-sm):not(.brk-xs) > * { width: calc(var(--cols-2) - var(--gap-xs)); } .flx-3.gap-sm:not(.no-break):not(.brk-md):not(.brk-sm):not(.brk-xs) > * { width: calc(var(--cols-2) - var(--gap-sm)); } .flx-3.gap:not(.no-break):not(.brk-md):not(.brk-sm):not(.brk-xs) > * { width: calc(var(--cols-2) - var(--gap)); } .flx-3.gap-lg:not(.no-break):not(.brk-md):not(.brk-sm):not(.brk-xs) > * { width: calc(var(--cols-2) - var(--gap-lg)); } .flx-4:not(.no-break):not(.brk-md):not(.brk-sm):not(.brk-xs) > * { width: var(--cols-3); } .flx-4.gap-xs:not(.no-break):not(.brk-md):not(.brk-sm):not(.brk-xs) > * { width: calc(var(--cols-3) - var(--gap-xs)); } .flx-4.gap-sm:not(.no-break):not(.brk-md):not(.brk-sm):not(.brk-xs) > * { width: calc(var(--cols-3) - var(--gap-sm)); } .flx-4.gap:not(.no-break):not(.brk-md):not(.brk-sm):not(.brk-xs) > * { width: calc(var(--cols-3) - var(--gap)); } .flx-4.gap-lg:not(.no-break):not(.brk-md):not(.brk-sm):not(.brk-xs) > * { width: calc(var(--cols-3) - var(--gap-lg)); } .flx-4.gap-xl:not(.no-break):not(.brk-md):not(.brk-sm):not(.brk-xs) > * { width: calc(var(--cols-3) - var(--gap-xl)); } .flx-5:not(.no-break):not(.brk-md):not(.brk-sm):not(.brk-xs) > * { width: var(--cols-3); } .flx-5.gap-xs:not(.no-break):not(.brk-md):not(.brk-sm):not(.brk-xs) > * { width: calc(var(--cols-4) - var(--gap-xs)); } .flx-5.gap-sm:not(.no-break):not(.brk-md):not(.brk-sm):not(.brk-xs) > * { width: calc(var(--cols-4) - var(--gap-sm)); } .flx-5.gap:not(.no-break):not(.brk-md):not(.brk-sm):not(.brk-xs) > * { width: calc(var(--cols-4) - var(--gap)); } .flx-5.gap-lg:not(.no-break):not(.brk-md):not(.brk-sm):not(.brk-xs) > * { width: calc(var(--cols-4) - var(--gap-lg)); } .flx-5.gap-xl:not(.no-break):not(.brk-md):not(.brk-sm):not(.brk-xs) > * { width: calc(var(--cols-4) - var(--gap-xl)); } .flx-6:not(.no-break):not(.brk-md):not(.brk-sm):not(.brk-xs) > * { width: var(--cols-4); } .flx-6.gap-xs:not(.no-break):not(.brk-md):not(.brk-sm):not(.brk-xs) > * { width: calc(var(--cols-4) - var(--gap-xs)); } .flx-6.gap-sm:not(.no-break):not(.brk-md):not(.brk-sm):not(.brk-xs) > * { width: calc(var(--cols-4) - var(--gap-sm)); } .flx-6.gap:not(.no-break):not(.brk-md):not(.brk-sm):not(.brk-xs) > * { width: calc(var(--cols-4) - var(--gap)); } .flx-6.gap-lg:not(.no-break):not(.brk-md):not(.brk-sm):not(.brk-xs) > * { width: calc(var(--cols-4) - var(--gap-lg)); } .flx-6.gap-xl:not(.no-break):not(.brk-md):not(.brk-sm):not(.brk-xs) > * { width: calc(var(--cols-4) - var(--gap-xl)); } .flx.flx-1-2:not(.no-break):not(.brk-md):not(.brk-sm):not(.brk-xs) > *, .flx.flx-2-1:not(.no-break):not(.brk-md):not(.brk-sm):not(.brk-xs) > *, .flx.flx-1-3:not(.no-break):not(.brk-md):not(.brk-sm):not(.brk-xs) > *, .flx.flx-3-1:not(.no-break):not(.brk-md):not(.brk-sm):not(.brk-xs) > *, .flx.flx-2-3:not(.no-break):not(.brk-md):not(.brk-sm):not(.brk-xs) > *, .flx.flx-3-2:not(.no-break):not(.brk-md):not(.brk-sm):not(.brk-xs) > * { width: 100%; } .grd.grd-1-2:not(.no-break):not(.brk-md):not(.brk-sm):not(.brk-xs), .grd.grd-2-1:not(.no-break):not(.brk-md):not(.brk-sm):not(.brk-xs), .grd.grd-1-3:not(.no-break):not(.brk-md):not(.brk-sm):not(.brk-xs), .grd.grd-3-1:not(.no-break):not(.brk-md):not(.brk-sm):not(.brk-xs), .grd.grd-2-3:not(.no-break):not(.brk-md):not(.brk-sm):not(.brk-xs), .grd.grd-3-2:not(.no-break):not(.brk-md):not(.brk-sm):not(.brk-xs) { grid-template-columns: 1fr; } } @media screen and (max-width: 767px) { .flx-wrap-md { flex-wrap: wrap; } .flx.brk-md > * { width: 100%; } .grd.brk-md { grid-template-columns: 1fr; } /*.grd:not(.no-gap):not(.gap-sm):not(.gap-lg) { gap: var(--row-gap) var(--gap); }*/ .grd.grd-2:not(.no-break):not(.brk-sm):not(.brk-xs) { grid-template-columns: 1fr; } .grd.grd-3:not(.no-break):not(.brk-sm):not(.brk-xs) { grid-template-columns: 1fr; } .grd.grd-4:not(.no-break):not(.brk-sm):not(.brk-xs) { grid-template-columns: 1fr 1fr; } .grd.grd-2-1:not(.no-break):not(.brk-sm):not(.brk-xs), .grd.grd-1-2:not(.no-break):not(.brk-sm):not(.brk-xs) { grid-template-columns: 1fr; } .grd.grd-3-2:not(.no-break):not(.brk-sm):not(.brk-xs), .grd.grd-2-3:not(.no-break):not(.brk-sm):not(.brk-xs) { grid-template-columns: 1fr; } .grd-1-4:not(.no-break):not(.brk-sm):not(.brk-xs), .grd-4-1:not(.no-break):not(.brk-sm):not(.brk-xs) { grid-template-columns: 1fr; } .flx-2.gap-sm:not(.no-break):not(.brk-md):not(.brk-sm):not(.brk-xs) > * { width: 100%; } .flx-2.gap:not(.no-break):not(.brk-md):not(.brk-sm):not(.brk-xs) > * { width: 100%; } .flx-2.gap-lg:not(.no-break):not(.brk-md):not(.brk-sm):not(.brk-xs) > * { width: 100%; } .flx-4:not(.no-break):not(.brk-md):not(.brk-sm):not(.brk-xs) > * { width: calc(var(--cols-2) - var(--gap)); } .flx-4:not(.no-break):not(.brk-md):not(.brk-sm):not(.brk-xs) > * { width: var(--cols-2); } .flx-4.gap-xs:not(.no-break):not(.brk-md):not(.brk-sm):not(.brk-xs) > * { width: calc(var(--cols-2) - var(--gap-xs)); } .flx-4.gap-sm:not(.no-break):not(.brk-md):not(.brk-sm):not(.brk-xs) > * { width: calc(var(--cols-2) - var(--gap-sm)); } .flx-4.gap:not(.no-break):not(.brk-md):not(.brk-sm):not(.brk-xs) > * { width: calc(var(--cols-2) - var(--gap)); } .flx-4.gap-lg:not(.no-break):not(.brk-md):not(.brk-sm):not(.brk-xs) > * { width: calc(var(--cols-2) - var(--gap-lg)); } .flx-4.gap-xl:not(.no-break):not(.brk-md):not(.brk-sm):not(.brk-xs) > * { width: calc(var(--cols-2) - var(--gap-xl)); } .flx-5:not(.no-break):not(.brk-md):not(.brk-sm):not(.brk-xs) > * { width: var(--cols-3); } .flx-5.gap-xs:not(.no-break):not(.brk-md):not(.brk-sm):not(.brk-xs) > * { width: calc(var(--cols-3) - var(--gap-xs)); } .flx-5.gap-sm:not(.no-break):not(.brk-md):not(.brk-sm):not(.brk-xs) > * { width: calc(var(--cols-3) - var(--gap-sm)); } .flx-5.gap:not(.no-break):not(.brk-md):not(.brk-sm):not(.brk-xs) > *, .flx-5.gap-md:not(.no-break):not(.brk-md):not(.brk-sm):not(.brk-xs) > * { width: calc(var(--cols-3) - var(--gap)); } .flx-5.gap-lg:not(.no-break):not(.brk-md):not(.brk-sm):not(.brk-xs) > * { width: calc(var(--cols-3) - var(--gap-lg)); } .flx-5.gap-xl:not(.no-break):not(.brk-md):not(.brk-sm):not(.brk-xs) > * { width: calc(var(--cols-3) - var(--gap-xl)); } .flx-6:not(.no-break):not(.brk-md):not(.brk-sm):not(.brk-xs) > * { width: var(--cols-3); } .flx-6.gap-xs:not(.no-break):not(.brk-md):not(.brk-sm):not(.brk-xs) > * { width: calc(var(--cols-3) - var(--gap-xs)); } .flx-6.gap-sm:not(.no-break):not(.brk-md):not(.brk-sm):not(.brk-xs) > * { width: calc(var(--cols-3) - var(--gap-sm)); } .flx-6.gap:not(.no-break):not(.brk-md):not(.brk-sm):not(.brk-xs) > * { width: calc(var(--cols-3) - var(--gap)); } .flx-6.gap-lg:not(.no-break):not(.brk-md):not(.brk-sm):not(.brk-xs) > * { width: calc(var(--cols-3) - var(--gap-lg)); } .flx-6.gap-xl:not(.no-break):not(.brk-md):not(.brk-sm):not(.brk-xs) > * { width: calc(var(--cols-3) - var(--gap-xl)); } .flx.flx-1-2:not(.no-break):not(.brk-sm):not(.brk-xs) > *, .flx.flx-2-1:not(.no-break):not(.brk-sm):not(.brk-xs) > *, .flx.flx-1-3:not(.no-break):not(.brk-sm):not(.brk-xs) > *, .flx.flx-3-1:not(.no-break):not(.brk-sm):not(.brk-xs) > *, .flx.flx-2-3:not(.no-break):not(.brk-sm):not(.brk-xs) > *, .flx.flx-3-2:not(.no-break):not(.brk-sm):not(.brk-xs) > * { width: 100%; } .grd.grd-1-2:not(.no-break):not(.brk-sm):not(.brk-xs), .grd.grd-2-1:not(.no-break):not(.brk-sm):not(.brk-xs), .grd.grd-1-3:not(.no-break):not(.brk-sm):not(.brk-xs), .grd.grd-3-1:not(.no-break):not(.brk-sm):not(.brk-xs), .grd.grd-2-3:not(.no-break):not(.brk-sm):not(.brk-xs), .grd.grd-3-2:not(.no-break):not(.brk-sm):not(.brk-xs) { grid-template-columns: 1fr; } } @media screen and (max-width: 579px) { .flx-wrap-sm { flex-wrap: wrap; } .flx.brk-sm > * { width: 100%; } .grd.brk-sm { grid-template-columns: 1fr; } .grd-2:not(.no-break):not(.brk-xs) { grid-template-columns: 1fr; } .grd-3:not(.no-break):not(.brk-xs) { grid-template-columns: 1fr; } .grd-4.brk-sm:not(.no-break):not(.brk-xs) { grid-template-columns: 1fr 1fr; } .flx.flx-2:not(.no-break):not(.brk-xs) > * { width: 100%; } .flx.flx-2.gap-xs:not(.no-break):not(.brk-xs) > * { width: 100%; } .flx.flx-2.gap-sm:not(.no-break):not(.brk-xs) > * { width: 100%; } .flx.flx-2.gap:not(.no-break):not(.brk-xs) > * { width: 100%; } .flx.flx-2.gap-lg:not(.no-break):not(.brk-xs) > * { width: 100%; } .flx.flx-3:not(.no-break):not(.brk-xs) > * { width: 100%; } .flx.flx-3.gap-xs:not(.no-break):not(.brk-xs) > * { width: 100%; } .flx.flx-3.gap-sm:not(.no-break):not(.brk-xs) > * { width: 100%; } .flx.flx-3.gap:not(.no-break):not(.brk-xs) > * { width: 100%; } .flx.flx-3.gap-lg:not(.no-break):not(.brk-xs) > * { width: 100%; } .flx.flx-5:not(.no-break):not(.brk-xs) > *, .flx.flx-6:not(.no-break):not(.brk-xs) > * { width: var(--cols-2); } .flx.flx-5.gap-xs:not(.no-break):not(.brk-xs) > *, .flx.flx-6.gap-xs:not(.no-break):not(.brk-xs) > * { width: calc(var(--cols-2) - var(--gap-xs)); } .flx.flx-5.gap-sm:not(.no-break):not(.brk-xs) > *, .flx.flx-6.gap-sm:not(.no-break):not(.brk-xs) > * { width: calc(var(--cols-2) - var(--gap-sm)); } .flx.flx-5.gap:not(.no-break):not(.brk-xs) > *, .flx.flx-6.gap:not(.no-break):not(.brk-xs) > * { width: calc(var(--cols-2) - var(--gap)); } .flx.flx-5.gap-lg:not(.no-break):not(.brk-xs) > *, .flx.flx-6.gap-lg:not(.no-break):not(.brk-xs) > * { width: calc(var(--cols-2) - var(--gap-lg)); } .flx.flx-1-2:not(.no-break):not(.brk-xs) > *, .flx.flx-2-1:not(.no-break):not(.brk-xs) > *, .flx.flx-1-3:not(.no-break):not(.brk-xs) > *, .flx.flx-3-1:not(.no-break):not(.brk-xs) > *, .flx.flx-2-3:not(.no-break):not(.brk-xs) > *, .flx.flx-3-2:not(.no-break):not(.brk-xs) > * { width: 100%; } .grd.grd-1-2:not(.no-break):not(.brk-xs), .grd.grd-2-1:not(.no-break):not(.brk-xs), .grd.grd-1-3:not(.no-break):not(.brk-xs), .grd.grd-3-1:not(.no-break):not(.brk-xs), .grd.grd-2-3:not(.no-break):not(.brk-xs), .grd.grd-3-2:not(.no-break):not(.brk-xs) { grid-template-columns: 1fr; } } @media screen and (max-width: 519px) { .flx-4:not(.no-break):not(.brk-md):not(.brk-sm):not(.brk-xs) > *, .flx-5:not(.no-break):not(.brk-md):not(.brk-sm):not(.brk-xs) > *, .flx-6:not(.no-break):not(.brk-md):not(.brk-sm):not(.brk-xs) > * { width: 100%; } .flx-4.gap-xs:not(.no-break):not(.brk-md):not(.brk-sm):not(.brk-xs) > *, .flx-5.gap-xs:not(.no-break):not(.brk-md):not(.brk-sm):not(.brk-xs) > *, .flx-6.gap-xs:not(.no-break):not(.brk-md):not(.brk-sm):not(.brk-xs) > * { width: 100%; } .flx-4.gap-sm:not(.no-break):not(.brk-md):not(.brk-sm):not(.brk-xs) > *, .flx-5.gap-sm:not(.no-break):not(.brk-md):not(.brk-sm):not(.brk-xs) > *, .flx-6.gap-sm:not(.no-break):not(.brk-md):not(.brk-sm):not(.brk-xs) > * { width: 100%; } .flx-4.gap:not(.no-break):not(.brk-md):not(.brk-sm):not(.brk-xs) > *, .flx-5.gap:not(.no-break):not(.brk-md):not(.brk-sm):not(.brk-xs) > *, .flx-6.gap:not(.no-break):not(.brk-md):not(.brk-sm):not(.brk-xs) > * { width: 100%; } .flx-4.gap-lg:not(.no-break):not(.brk-md):not(.brk-sm):not(.brk-xs) > *, .flx-5.gap-lg:not(.no-break):not(.brk-md):not(.brk-sm):not(.brk-xs) > *, .flx-6.gap-lg:not(.no-break):not(.brk-md):not(.brk-sm):not(.brk-xs) > * { width: 100%; } } @media screen and (max-width: 479px) { .flx-wrap-xs { flex-wrap: wrap; } .flx.brk-xs > * { width: 100%; } .grd.brk-xs { grid-template-columns: 1fr; } .flx-4:not(.no-break) > *, .flx-5:not(.no-break) > *, .flx-6:not(.no-break) > * { width: 100%; } .flx-4.gap-xs:not(.no-break) > *, .flx-5.gap-xs:not(.no-break) > *, .flx-6.gap-xs:not(.no-break) > * { width: 100%; } .flx-4.gap-sm:not(.no-break) > *, .flx-5.gap-sm:not(.no-break) > *, .flx-6.gap-sm:not(.no-break) > * { width: 100%; } .flx-4.gap:not(.no-break) > *, .flx-5.gap:not(.no-break) > *, .flx-6.gap:not(.no-break) > * { width: 100%; } .flx-4.gap-lg:not(.no-break) > *, .flx-5.gap-lg:not(.no-break) > *, .flx-6.gap-lg:not(.no-break) > * { width: 100%; } } /* ### GENERAL GLOBAL FORMATTING ### */ body { word-break: break-word; } .glb-shadow-filter { filter: drop-shadow( -3px 3px 6px #26262661); } /* Apply this class to text to be 'inset'. Actual text element should have no colour. Desired colour of the text should be set on the BG colour */ .inset-text { background-color: #5a533e; -webkit-background-clip: text; -moz-background-clip: text; background-clip: text; color: transparent; text-shadow: rgba(255,255,255,0.5) 0px 2px 2px; } /*
formatting */ * br { content: ""; display: block; margin-top: 8px; } ul li:not(li.menu-item) { margin: 10px 0; } ol:not(.oxel-breadcrumb ol) li { margin: 15px 0; } ol li::marker { font-weight: 500; } p, ol { margin-block-start: .5em; margin-block-end: .5em; } /* ## MAX ITEM WIDTH - because sometimes it's just needed ## */ .max-w-sm { width: 100%; max-width: var(--maxwsm); } .max-w-md { width: 100%; max-width: var(--maxwmd); } .max-w-lg { width: 100%; max-width: var(--maxwlg); } .p-xs { padding: var(--p-xs); } .p-sm { padding: var(--p-sm); } .p-md, .p { padding: var(--p-md); } .p-lg { padding: var(--p-lg); } .p-xl { padding: var(--p-xl); } /* X and Y axis padding .p-X-Y 1 = xs 2 = sm 3 = default 4 = lg */ .p-1-2, .p-1-3, .p-1-4, .p-1-5 { padding-left: var(--p-xs); padding-right: var(--p-xs); } .p-2-1 .p-2-3, .p-2-4, .p-2-5 { padding-left: var(--p-sm); padding-right: var(--p-sm); } .p-3-1, .p-3-2, .p-3-4, .p-3-5 { padding-left: var(--p); padding-right: var(--p); } .p-4-1, .p-4-2, .p-4-3, .p-4-5 { padding-left: var(--p-lg); padding-right: var(--p-lg); } .p-5-1, .p-5-2, .p-5-3, .p-5-4 { padding-left: var(--p-xl); padding-right: var(--p-xl); } .p-2-1, .p-3-1, .p-4-1, .p-5-1 { padding-top: var(--p-xs); padding-bottom: var(--p-xs); } .p-1-2, .p-3-2, .p-4-2, .p-5-2 { padding-top: var(--p-sm); padding-bottom: var(--p-sm); } .p-1-3, .p-2-3, .p-4-3, .p-5-3 { padding-top: var(--p); padding-bottom: var(--p); } .p-1-4, .p-2-4, .p-3-4, .p-5-4 { padding-top: var(--p-lg); padding-bottom: var(--p-lg); } .p-1-5, .p-2-5, .p-3-5, .p-4-5 { padding-top: var(--p-xl); padding-bottom: var(--p-xl); } .box-rad-sm, .bdr-rad-sm { border-radius: var(--bdr-rad-sm); overflow: hidden; } .box-rad, .bdr-rad { /* default */ border-radius: var(--bdr-rad); overflow: hidden; } .box-rad-lg, .bdr-rad-lg { border-radius: var(--bdr-rad-lg); overflow: hidden; }/* ### SITE FORMATTING ### */ .glb-div-container, .glb-div-container__bg { filter: drop-shadow( 0 0 2px #987); } .glb-div-container__bg { background-color: #ffffff; border-radius: var(--bdr-rad-sm); overflow: hidden; } .glb-container-tile { background-color: #ffffff; border-radius: var(--bdr-rad-sm); filter: drop-shadow( 0 0 2px #987); } .sa-home-top, .sa-pillar { grid-template-columns: 2fr 1fr; grid-template-areas: "vision nav" "vision pillars" "vision featured"; grid-template-rows: auto auto 1fr; } .sa-pillar { grid-template-areas: "mission pillars" "function resources"; } .pillar-resources a, .sa-agroup-container a { color: #8b3a19; transition: .2s; } .sa-agroup-container a:hover, .sa-offices-container a:not(a.sa-agroup__tile):hover { border-bottom: 1px dotted #282828; } .empty-cell, .sa-office-tiles .tile__details > div.empty-cell { border: none; background: transparent; padding: 0; } .glb-p-sm { padding: var(--p-sm); } .glb-p-lg { padding: var(--p-lg); } .glb-p-xl { padding: var(--p-xl); } .link-colour { color: #8b3a19; } .ct-span { width: 100%; } .sa-body *:not(h2) + h2, .sa-body *:not(h3) + h3, .sa-body *:not(h4) + h4, .sa-body *:not(h5) + h5, .sa-body *:not(h6) + h6 { padding-top: var(--p-lg); } .sa-body * h2, .sa-body * h3, .sa-body * h4, .sa-body * h5, .sa-body * h6 { padding-bottom: var(--p); } .sa-body h3, .sa-body h4, .sa-body h5, .sa-body h6 { font-size: var(--fs5); color: #8b3a19; } .sa-page-heading { text-align: center; background: #fff; border-radius: 50px; padding: var(--p) var(--p-xl); filter: drop-shadow( 0 0 2px #987); } .sa-sub-heading__xl { padding: var(--p) var(--p) var(--p-sm); border-bottom: 4px solid #707070; margin: var(--neg-p-xl) var(--neg-p-xl) 10px var(--neg-p-xl); background: #8b3a19; color: #fff; width: unset !important; } .sa-tile-heading, .sa-sub-heading { padding: var(--p) var(--p-lg) var(--p-sm); border-bottom: 4px solid #e5e5e5; border-top-left-radius: var(--bdr-rad-sm); border-top-right-radius: var(--bdr-rad-sm); background: #8b3a19; color: #fff; } .sa-tile-heading__tab, .sa-tile-heading__tab2 { padding: var(--p) var(--p-xl) var(--p-sm); border-bottom: 4px solid #707070; border-top-left-radius: var(--bdr-rad-sm); border-top-right-radius: var(--bdr-rad-sm); background: #8b3a19; width: max-content; color: #fff; } .sa-tile-heading__tab2 { background: #fff; color: #282828; } .sub-heading__col2 { background: #499b54; } .item-heading { background: #e5e5e5; padding: var(--p-sm) var(--p-lg) calc(var(--p-sm) - .2em); align-items: flex-start; border-bottom: 1px solid #9e9e9e; } .item-description, p.item-description { margin-block: 0; font-style: italic; font-size: var(--fs-1); } /* ### MAIN HEADER ### */ .main-header { display: grid; grid-template-columns: 1fr 3fr 1fr; grid-template-areas: "seal title region"; gap: var(--gap); align-items: stretch; } .main-header img { object-fit: contain; width: 100%; height: 100%; } .main-header__main-seal { grid-area: seal; display: grid; align-items: center; } .main-header__title { grid-area: title; display: grid; align-items: center; justify-content: center; } .main-header__region { grid-area: region; display: grid; align-items: start; } /* ### SINGLE POST HEADER ### */ .sa-post-header .tile__tax a { color: #fff; transition: .3s; } .sa-post-header .tile__tax a:hover { border-bottom: 1px dotted #fff; } /* ### HOME ### */ .sa-news-home-tile { display: grid; grid-template-columns: minmax(120px, 18%) 1fr; grid-template-areas: "img title" "img text" "img date"; grid-template-rows: auto 1fr auto; gap: 0; align-items: start; } .sa-news-home-tile .tile__title { grid-area: title; } .sa-news-home-tile .tile__image { grid-area: img; height: 100%; } .sa-news-home-tile .tile__text { grid-area: text; font-size: var(--fs-1); } .sa-news-home-tile .tile__date { grid-area: date; } .sa-news-home-tile .tile__image img { object-fit: cover; width: 100%; height: 100%; } .sa-news-list { /* max-height: 70vh; overflow-y: auto; */ } .sa-news-list .tile__text { padding: var(--p-sm) var(--p-lg); } .sa-news-list .tile__title { color: #fff; background: #707070; /* padding: calc(var(--p-sm) / 2) var(--p-lg); */ border-bottom: 1px solid #8b3a19; transition: .2s; } .sa-news-list .tile__date { background: #e5e5e5; font-weight: 500; font-size: var(--fs-1); padding: calc(var(--p-sm) / 2) var(--p-sm); align-items: flex-end; } .sa-news-list .tile__inner:hover .tile__title { background: #9e9e9e; } .sa-pillar-column .sa-pillar-tile { display: flex; flex-flow: row nowrap; justify-content: space-between; background: #fff; border-bottom: 1px solid #e5e5e5; } .sa-pillar-tile { transition: .2s; } .sa-pillar-tile .title, .sa-pillar-tile .sa-icon { color: #8b3a19; } .sa-pillar-tile .sa-icon { margin-left: 3vmin; } .sa-pillar-tile:hover .title, .sa-pillar-tile:hover .sa-icon { color: #fff; } .sa-pillar-tile:hover { background-color: #9e9e9e; } .sa-events-container { max-height: 60vh; overflow-y: auto; padding: 0 2px 2px; margin: 0 -2px; width: calc(100% + 4px); } .sa-event { grid-template-rows: auto 1fr auto; align-items: stretch; margin: 0 var(--gap-sm); /* cursor: pointer; */ transition: .2s; /* height: 100%; */ min-height: 100%; width: 35em; max-width: 85%; background: #fff; border: 1px solid #e5e5e5; box-shadow: 0px 2px 6px rgba(49, 49, 49, 0.11); transition: opacity .4s, background-color .4s; } .sa-event .tile__title { display: grid; grid-template-columns: 1fr auto; align-items: stretch; color: #fff; background: #707070; transition: .2s; z-index: 1; min-height: 4em; justify-content: center; padding: 3px; } .sa-event:hover .tile__title { background: #9e9e9e; } .sa-event .sa-event-title h6 { font-weight: 600; } .sa-event .sa-event-recurring { padding: var(--p-xs); background: #168709; max-width: 6em; text-align: center; } .sa-event .sa-event-title, .sa-event .sa-event-recurring { display: grid; align-items: center; } .sa-event .sa-event-title h6, .sa-event .tile__text { padding: var(--p-sm) var(--p-lg); } .sa-event .tile__details { font-size: var(--fs-1); font-weight: 500; background: #fff; border-top: 1px solid #e5e5e5; } .sa-event .tile__details .tile__listitem { display: grid; grid-template-columns: 1fr 2fr; gap: 0; } .sa-event .tile__details .tile__listitem .tile__listitem-title, .sa-event .tile__details .tile__listitem .tile__listitem-value { padding: var(--p-xs) var(--p); } .sa-event .tile__details .tile__listitem .tile__listitem-title { text-align: right; font-weight: 600; background: #e5e5e5; } .sa-event .tile__text p { margin-block: 0; } .sa-event .tile__image img { object-fit: cover; width: 100%; height: 100%; } .sa-event .tile__location { padding: 0 var(--p-lg); background: #8b3a19; color: #fff; text-align: right; } .sa-event-description__full { /* display: none; */ } .sa-event-description__short { /* border-bottom: 1px solid #e5e5e5; */ } .sa-event .tile__content { font-size: var(--fs-2); grid-template-rows: 1fr auto; border-left: 1px solid #e5e5e5; } .sa-event .tile__extras { background: #e5e5e5; text-align: right; } .sa-event .tile__type { text-align: right; font-size: var(--fs-2); line-height: 1.8; padding-right: 0; } .sa-event .tile__details .sa-event-time__icon { padding: 0 var(--p-sm); } .sa-event .tile__details .sa-event-time__icon img { width: 20px; } .sa-event .tile__time-end { display: none; } .sa-event .sa-button { display: inline-block; padding: var(--p-xs) var(--p-lg); border-radius: var(--bdr-rad-sm); background: #8b3a19; color: #fff; transition: .2s; } .sa-event .sa-button:hover { background: #9e9e9e; } .event-modal { padding-bottom: 3vmax; } .sa-modal-header { margin: 0 -2vmax 20px; width: calc(100% + 4vmax); padding: 1vmin 4vmax; font-size: var(--fs4); align-items: center; background: #8b3a19; color: #fff; position: sticky; top: 0; } .sa-modal-title { font-size: var(--fs3); align-items: center; background: #8b3a19; color: #fff; } .sa-modal-image { width: 100%; max-width: 400px; margin-bottom: 10px; } /* ### ACCORDION GLOBAL ### */ #content-accordion p, #content-accordion li { font-family: 'Open Sans'; } .content_accordion__item, .content_section_accordion__item, .content_sub_accordion__item, .toc-heading { position: relative; } .content_section_accordion__item, .content_sub_accordion__item, .toc-heading { margin-bottom: 10px; } .content_accordion__item h3 { margin-bottom: var(--p-lg); padding-bottom: var(--p-sm); border-bottom: 2px solid #e5e5e5; } .toc-heading { background-color: #fff; } .content_sub_accordion__item { } .content_sub_accordion__item h4.ui-accordion-header { border-left: 4px solid #8b3a19; padding: .5em .5em .5em 1.7em !important; } .content-title-button__main, .content-title-button__sub { background: color(14); border: 1px solid color(15); border-radius: 3px; color: color(15); padding: 2px 8px; font-size: var(--fs-2); position: absolute; top: 5px; right: 5px; text-align: center; line-height: 1.2; min-width: 6em; cursor: pointer; transition: .2s; } .content-title-button__main:hover, .content-title-button__sub:hover { background: #fff; } .link-copy-button span { position: absolute; top: 0; left: 0; right: 0; bottom: 0; display: none; justify-content: center; background-color: #6fbf00; line-height: 1.4; } .content-toc__section { font-weight: 600; font-size: var(--fs-1); margin-block: .2em; } .content-toc__main { margin-left: .6em; font-weight: 600; font-size: var(--fs-2); margin-block: .2em; } .content-toc__sub { margin-left: 2em; font-style: italic; font-size: var(--fs-2); margin-block: .2em; } .content_accordion__content, .content_sub_accordion__content { padding: var(--p) var(--p-lg); overflow-x: auto; } /* .content_accordion__content > p:first-of-type:not(.subItems .content_accordion__content > p:first-of-type) { margin-block-start: 0; } */ .subItems { padding-top: .5em; } .mainItems a.fasc-button { width: 100%; } .ui-accordion .ui-accordion-header { padding: .5em .5em .5em 1.7em !important; } .ui-accordion .ui-accordion-content { padding: var(--p); } .ui-icon { margin-right: .6em; margin-left: -1.3em; } .ui-widget-content a { color: #8b3a19; } .ui-widget-content a:hover { /* color: rgba(18,124,29,0.82); */ } /* ### PILLAR PAGES ### */ /* ### ACCORDION COMPONENT ### */ .sa-offices-container { /* padding: 0 1vmin 0 3vmin; */ /* padding: 0 var(--p-lg) var(--p-lg) calc(var(--p-lg) * 3); not sure why the large left margin? */ padding: 0 var(--p-lg) var(--p-lg); } .sa-office-tiles { /* border: 1px solid #8b3a19; */ border: none; border-radius: var(--bdr-rad-sm); overflow: hidden; } .sa-office-tiles .ui-state-active, .sa-office-tiles .ui-state-default { background: #e5e5e5; color: #282828; font-weight: 500; border: none; transition: .2s; } .sa-office-tiles .ui-state-hover { background: #9e9e9e; } .sa-office-tiles .ui-state-active { border-bottom: 1px dotted #9e9e9e; background: #9e9e9e; } .ui-accordion .sa-office-tiles .ui-accordion-header { font-size: var(--fs6); margin: 0; } .ui-accordion .sa-office-tiles .ui-accordion-content { /* padding: 2vmax 1vmax 1vmax; */ padding: calc(var(--p-lg) * 2) var(--p-lg) var(--p-lg); } /* ============================ */ /* ### OFFICE TILES - ACCORDION INTERNAL ### */ .sa-office-tiles .tile__details > div { padding: .2em .3em; border-bottom: 1px dotted #9e9e9e; } .sa-office-tiles .tile__details { margin-bottom: 10px; } .sa-office-tiles .office-contacts { display: grid; grid-template-columns: 2fr 3fr; gap: var(--gap-sm); grid-template-areas: "name email" ". phone"; } .sa-office-tiles .office-contacts .tile__name { grid-area: name; } .sa-office-tiles .office-contacts .tile__email { grid-area: email; } .sa-office-tiles .office-contacts .tile__phone { grid-area: phone; } .sa-tab-heading, .sa-tab-heading2 { width: 100%; position: relative; z-index: 1; } .sa-tab-heading h5, .sa-tab-heading2 h5 { background: #fff; color: #fff; padding: var(--p) var(--p-lg); width: max-content; border-top-left-radius: var(--bdr-rad); border-top-right-radius: var(--bdr-rad); border-bottom: 5px solid #707070; } .sa-agroup-container { display: grid; grid-template-columns: 3fr 1fr; gap: var(--gap); grid-template-areas: "text details" "list details"; grid-template-rows: auto 1fr; } .sa-agroup-container > .tile__details { grid-area: details; } .sa-agroup-container .tile__details .tile__date { background: #499b54; color: #fff; } .sa-agroup h6, .sa-aagroup h6 { font-size: var(--fs0); background: none; padding: .2em 0; color: #282828; border-bottom: 1px solid #e5e5e5; } .sa-agroup__tile, .sa-aagroup__tile { padding: var(--p); transition: .2s; border-radius: var(--bdr-rad-xs); } .sa-agroup__tile:hover, .sa-aagroup__tile:hover { filter: brightness(0.8); } .sa-agroup__tile .tile__title, .sa-aagroup .tile__title { color: #fff; font-size: var(--fs-1); } .sa-aagroup .sa-office-list__tile .tile__title { color: #282828; } .sa-agroup__type0, .sa-aagroup__type0, .sa-tab-heading__type0:after { background: #707070; padding: var(--p-sm); color: #fff; } .sa-agroup__type1, .sa-aagroup__type1, .sa-tab-heading__type1 h5, .sa-tab-heading__type1:after { background: #ce5252; } .sa-agroup__type2, .sa-aagroup__type2, .sa-tab-heading__type2 h5, .sa-tab-heading__type2:after { background: #4c67b2; } .sa-agroup__type3, .sa-aagroup__type3, .sa-tab-heading__type3 h5, .sa-tab-heading__type3:after { background: #499b54; } .sa-agroup__type4, .sa-aagroup__type4, .sa-tab-heading__type4 h5, .sa-tab-heading__type4:after { background: #db6a13; } .sa-agtype { padding: .3em 1em; color: #fff; font-size: var(--fs-2); } .sa-aagroup { background: #fff; } .sa-aagroup-class__tile { border: 1px solid #9e9e9e; background: #fff; filter: drop-shadow( 0 0 2px #987); } .sa-aagroup .col-title { text-align: center; border-bottom: 1px solid #e5e5e5; color: #9e9e9e; } .sa-office-list { grid-area: list; } .sa-office-list__tile { border: 1px solid #9e9e9e; background: #e5e5e5; text-align: center; transition: .2s; border-radius: var(--bdr-rad-xs); } .sa-office-list__tile:hover { filter: brightness(.8); } .sa-office-list .tile__title, .sa-office-list .tile__details { color: #282828; } .sa-office-list .tile__title { } .sa-office-list .tile__details { } /* ### MAPS ### */ .open-user-map #location-fullscreen-container { display: none !important; } body.oum-location-opened { overflow: auto !important; } .tta-map-text img { vertical-align: baseline; } /* -- location marker size -- */ .open-user-map .box-wrap .map-wrap .leaflet-map img.leaflet-marker-icon:not(.marker-cluster) { --icon_height: 30px; /* customize */ --icon_width: 20px; /* customize */ width: var(--icon_width) !important; height: var(--icon_height) !important; margin-top: calc(-1 * var(--icon_height)) !important; margin-left: calc(var(--icon_width) / -2) !important; } /* ### MENU AND MEGA MENU ### */ #-pro-menu-591-8 .oxy-pro-menu-container .menu-item > a { background: #e5e5e5; } #-pro-menu-591-8 .oxy-pro-menu-show-dropdown .oxy-pro-menu-list li ul li.menu-item-has-children > a div, #-pro-menu-598-8 .oxy-pro-menu-show-dropdown .oxy-pro-menu-list li ul li.menu-item-has-children > a div { margin-left: auto; padding-left: 10px; } #-pro-menu-591-8 .oxy-pro-menu-show-dropdown .oxy-pro-menu-list li ul li ul.sub-menu, #-pro-menu-598-8 .oxy-pro-menu-show-dropdown .oxy-pro-menu-list li ul li ul.sub-menu { background: #fff; padding: 10px; display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); grid-gap: 1rem; max-width: 650px; width: 50vw; } #-pro-menu-591-8 .oxy-pro-menu-show-dropdown .oxy-pro-menu-list li ul li ul.sub-menu li a, #-pro-menu-598-8 .oxy-pro-menu-show-dropdown .oxy-pro-menu-list li ul li ul.sub-menu li a { background-color: #fff !important; text-wrap: wrap; font-weight: 600; } #-pro-menu-591-8 .oxy-pro-menu-show-dropdown .oxy-pro-menu-list li ul li ul.sub-menu li a:hover, #-pro-menu-598-8 .oxy-pro-menu-show-dropdown .oxy-pro-menu-list li ul li ul.sub-menu li a:hover { background-color: #e5e5e5 !important; color: #282828 !important; } #-pro-menu-591-8 .oxy-pro-menu-show-dropdown .oxy-pro-menu-list li ul li ul.sub-menu li a .menu-description, #-pro-menu-598-8 .oxy-pro-menu-show-dropdown .oxy-pro-menu-list li ul li ul.sub-menu li a .menu-description { text-transform: initial; padding: 8px 6px 2px 6px; margin: 0 -6px; border-top: 1px solid #203786; font-weight: 400; background: #fff; font-size: var(--fs-2); transition: .2s; width: 100% } #-pro-menu-591-8 .oxy-pro-menu-show-dropdown .oxy-pro-menu-list li ul li ul.sub-menu li a:hover .menu-description, #-pro-menu-598-8 .oxy-pro-menu-show-dropdown .oxy-pro-menu-list li ul li ul.sub-menu li a:hover .menu-description { color: #282828 !important; } #-pro-menu-591-8 .oxy-pro-menu-show-dropdown .oxy-pro-menu-list li ul li.menu-item-has-children > a svg, #-pro-menu-598-8 .oxy-pro-menu-show-dropdown .oxy-pro-menu-list li ul li.menu-item-has-children > a svg { transform: rotate(-90deg); } /* Dropdown item hover background colour */ #-pro-menu-591-8 .oxy-pro-menu-container:not(.oxy-pro-menu-open-container):not(.oxy-pro-menu-off-canvas-container) .sub-menu .menu-item a:hover, #-pro-menu-598-8 .oxy-pro-menu-container:not(.oxy-pro-menu-open-container):not(.oxy-pro-menu-off-canvas-container) .sub-menu .menu-item a:hover { background: #9e9e9e; } #-pro-menu-591-8 .oxy-pro-menu-show-dropdown .oxy-pro-menu-list li ul li.menu-item-has-children > a:hover svg, #-pro-menu-598-8 .oxy-pro-menu-show-dropdown .oxy-pro-menu-list li ul li.menu-item-has-children > a:hover svg { transform: rotate(-90deg); } #-slide-menu-509-19 .oxy-slide-menu_dropdown-icon-click-area { background: #8b3a19; margin: var(--neg-p-lg) 0; } .oxy-pro-menu .site-mega-menu__item.menu-item > a { display: flex; flex-direction: column; align-items: flex-start; } /* ### FAQ ACCORDION ### */ /* BODY text: 17px > 20px */ /* @link https://utopia.fyi/type/calculator/?c=320,18,1.125,1400,22,1.25,6,2,&s=0.75|0.5|0.25,1.5|2|3|4|6,s-l */ /* #tasa-faq p {font-size: clamp(0.9375rem, 0.8819rem + 0.2778vi, 1.125rem);} #tasa-faq H1 {font-size: clamp(1.3834rem, 1.3015rem + 0.4099vi, 1.6601rem);} #tasa-faq H2 {font-size: clamp(1.2966rem, 1.2197rem + 0.3842vi, 1.5559rem);} #tasa-faq H3 {font-size: clamp(1.2151rem, 1.1431rem + 0.36vi, 1.4582rem);} #tasa-faq H4 {font-size: clamp(1.1388rem, 1.0714rem + 0.3374vi, 1.3666rem);} #tasa-faq H5 {font-size: clamp(1.0673rem, 1.0041rem + 0.3162vi, 1.2808rem);} #tasa-faq H6 {font-size: clamp(1.0003rem, 0.941rem + 0.2964vi, 1.2004rem);} */ /* https://utopia.fyi/type/calculator/?c=320,14,1.067,1200,16,1.067,6,2,&s=0.75|0.5|0.25,1.5|2|3|4|6,s-l&g=s,l,xl,12 */ /* #tasa-faq h2, #tasa-faq h3, #tasa-faq h4, #tasa-faq h5, #tasa-faq h6 { margin-bottom: 20px; } */ #tasa-faq h4 { margin-bottom: 0; } #tasa-faq p, #tasa-faq ul, #tasa-faq ol {font-size: clamp(0.875rem, 0.8295rem + 0.2273vi, 1rem);} #tasa-faq H1 { font-size: clamp(1.3834rem, 1.3015rem + 0.4099vi, 1.6601rem); font-weight: 600; } #tasa-faq H2 { /* font-size: clamp(1.2966rem, 1.2197rem + 0.3842vi, 1.5559rem); */ font-size: var(--fs3); font-weight: 600; background: #fff; } #tasa-faq H2.ui-state-hover { background: #9e9e9e; color: #fff; } #tasa-faq H3 { /* font-size: clamp(1.1341rem, 1.0752rem + 0.2946vi, 1.2962rem); */ font-size: var(--fs4); font-weight: 600; } #tasa-faq H4 { /* font-size: clamp(1.0629rem, 1.0077rem + 0.2761vi, 1.2148rem); */ /* font-size: clamp(0.9962rem, 0.9444rem + 0.2587vi, 1.1385rem); */ font-size: var(--fs5); font-weight: 600; } #tasa-faq H5, h5.faq-h5 { /* font-size: clamp(0.9962rem, 0.9444rem + 0.2587vi, 1.1385rem); */ font-size: var(--fs6); font-weight: 600; color: #e27761; padding: 1vmin 0 0; } #tasa-faq H6, h6.faq-h6 { /* font-size: clamp(0.9336rem, 0.8851rem + 0.2425vi, 1.067rem); */ font-size: var(--fs0); font-weight: 600; padding: 1vmin 0 0; } #tasa-faq .content_accordion__item, #tasa-faq .content_section_accordion__item, #tasa-faq .content_sub_accordion__item, #tasa-faq .toc-heading { position: relative; } #tasa-faq .content_section_accordion__item, #tasa-faq .content_sub_accordion__item, #tasa-faq .toc-heading { margin-bottom: 10px; } #tasa-faq .content_accordion__item { /* margin-bottom: var(--p-xl); */ padding: var(--p) var(--p-lg); } #tasa-faq .content_accordion__item h3 { margin-bottom: var(--p-lg); padding-bottom: var(--p-sm); border-bottom: 2px solid #e5e5e5; } #tasa-faq .content-sub-accordion h4 { border-bottom: none; font-family: 'Open Sans'; font-size: var(--fs0); } #tasa-faq ul { padding-inline-start: 25px; } #tasa-faq li { padding: .3em 0; } #content-toc { padding: 20px 40px; max-height: 80vh; overflow: auto; text-align: left; } /* ### FAQ ACCORDION ### */ /* BODY text: 17px > 20px */ /* @link https://utopia.fyi/type/calculator/?c=320,18,1.125,1400,22,1.25,6,2,&s=0.75|0.5|0.25,1.5|2|3|4|6,s-l */ /* #tasa-faq p {font-size: clamp(0.9375rem, 0.8819rem + 0.2778vi, 1.125rem);} #tasa-faq H1 {font-size: clamp(1.3834rem, 1.3015rem + 0.4099vi, 1.6601rem);} #tasa-faq H2 {font-size: clamp(1.2966rem, 1.2197rem + 0.3842vi, 1.5559rem);} #tasa-faq H3 {font-size: clamp(1.2151rem, 1.1431rem + 0.36vi, 1.4582rem);} #tasa-faq H4 {font-size: clamp(1.1388rem, 1.0714rem + 0.3374vi, 1.3666rem);} #tasa-faq H5 {font-size: clamp(1.0673rem, 1.0041rem + 0.3162vi, 1.2808rem);} #tasa-faq H6 {font-size: clamp(1.0003rem, 0.941rem + 0.2964vi, 1.2004rem);} */ /* https://utopia.fyi/type/calculator/?c=320,14,1.067,1200,16,1.067,6,2,&s=0.75|0.5|0.25,1.5|2|3|4|6,s-l&g=s,l,xl,12 */ #tasa-offices h2, #tasa-offices h3, #tasa-offices h4, #tasa-offices h5, #tasa-offices h6 { margin-bottom: 20px; } #tasa-offices h4 { margin-bottom: 0; } #tasa-offices p, #tasa-offices ul, #tasa-offices ol {font-size: clamp(0.875rem, 0.8295rem + 0.2273vi, 1rem);} #tasa-offices H1 { font-size: clamp(1.3834rem, 1.3015rem + 0.4099vi, 1.6601rem); font-weight: 600; } #tasa-offices H2 { font-size: clamp(1.2966rem, 1.2197rem + 0.3842vi, 1.5559rem); font-weight: 600; background: #707070; } #tasa-offices H2.ui-state-hover { background: #9e9e9e; color: #fff; } #tasa-offices H3 { font-size: clamp(1.1341rem, 1.0752rem + 0.2946vi, 1.2962rem); font-weight: 600; } #tasa-offices H4 { /* font-size: clamp(1.0629rem, 1.0077rem + 0.2761vi, 1.2148rem); */ font-size: clamp(0.9962rem, 0.9444rem + 0.2587vi, 1.1385rem); font-weight: 600; } #tasa-offices H5 {font-size: clamp(0.9962rem, 0.9444rem + 0.2587vi, 1.1385rem);} #tasa-offices H6 {font-size: clamp(0.9336rem, 0.8851rem + 0.2425vi, 1.067rem);} #tasa-offices .content-sub-accordion h4 { border-bottom: none; font-family: 'Open Sans'; font-size: var(--fs0); } #tasa-offices ul { padding-inline-start: 25px; } #tasa-offices li { padding: .3em 0; } #content-toc { padding: 20px 40px; max-height: 80vh; overflow: auto; text-align: left; } /* ##### TASA Assembly - ARCHIVE PAGE ##### */ .sa-news-container { } .sa-news-container .tile__image { position: relative; padding-top: 60%; overflow: hidden; } .sa-news-container .tile__image img{ position: absolute; left: 0; right: 0; top: 50%; transform: translateY(-50%) scale(1,1); transition: .3s; transform-origin: center; width: 100%; height: 100%; object-fit: cover; } .sa-news .tile__inner { grid-template-rows: auto 1fr; } .sa-news .tile__content { align-items: stretch; flex-flow: column; } .sa-news .tile__title { color: #fff; background: #707070; font-size: var(--fs0); padding: var(--p-sm) var(--p); transition: .3s; flex: 1; text-decoration: none; position: relative; } .sa-news .tile__button { font-size: var(--fs-1); padding: var(--p-xs) var(--p); color: #888; transition: .3s; text-align: right; align-items: flex-end; } .sa-news .tile__inner:hover .tile__image img { transform: translateY(-50%) scale(1.1,1.1); } .sa-news .tile__inner:hover .tile__title { background: #8b3a19; color: #fff; text-decoration: none; } .sa-news .tile__inner:hover .tile__button { color: #fff; background: #8b3a19; } .sa-news .tile__tax, .sa-news .tile__date { background: #1a1a1a; padding: var(--p-xs) var(--p); color: #fff; font-size: var(--fs-1); flex-flow: row wrap; justify-content: end; } .sa-news .tile__date span { padding-left: var(--p-sm); position: relative; transition: .3s; } .sa-news .tile__tax { border-top: 1px solid #777; } .sa-news .tile__tax span { display: flex; flex-flow: row wrap; justify-content: flex-end; margin: 0 -.3vmin; } .sa-news__tax { position: sticky; top: 65px; max-height: 88vh; } .sa-news__tax .tile__title .tap, .sa-news__tax .tile__title .btn { position: absolute; display: none; right: 15px; top: 50%; transform: translateY(-50%); font-size: var(--fs-1); font-style: italic; color: #fff; } .sa-news__tax .tile__title .btn { right: unset; left: 5px; background: #707070; font-style: normal; border-radius: 3px; padding: 5px 8px; font-weight: 600; } .sa-news__tax .tile__content { overflow-y: auto; height: 0; transition: .3s; } .sa-news__tax .tile__content.show { overflow-y: auto; padding: var(--p) var(--p-sm) var(--p-sm); height: unset; } .sa-cat-list, .sa-cat-list.sa-cat-list__all, .sa-news .tile__tax a { background: #707070; padding: 2px 10px; margin: .3vmin; font-size: var(--fs-2); color: #fff; border: 1px solid #707070; border-radius: 1em; transition: .2s; display: inline-block; } .sa-cat-list:hover, .sa-news .tile__tax a:hover { border-color: #8b3a19; background: #8b3a19; text-decoration: none; } .sa-cat-list.sa-cat-list__all { background-color: #8b3a19; border: 1px solid #8b3a19; color: #fff; } .sa-cat-list.current { background-color: #9e9e9e; border: 1px solid #8b3a19; color: #fff; } .sa-tag-list, .sa-tag-list a { padding: 2px 10px; margin: .3vmin; font-size: var(--fs-2); color: #7b7b7b; transition: .2s; display: inline-block; } .sa-tag-list a:hover { text-decoration: underline; color: #333; background: #8b3a19; border-radius: 1em; } .sa-recent__sm { display: none !important; } .sa-recent .tile { background: #707070; color: #fff; font-weight: 500; border: 1px solid #8b3a19; border-radius: var(--bdr-rad-xs); overflow: hidden; transition: .3s; } .sa-recent .tile:hover { background: #8b3a19; } .sa-recent .tile__image { width: 20%; background: #fff; } .sa-recent .tile__image img { width: 100%; height: 100%; object-fit: cover; } .sa-featured .sa-tile-heading { background: #168709; } .sa-featured .tile__image { position: relative; padding-top: 26%; overflow: hidden; } .sa-featured .tile__image img { position: absolute; left: 0; right: 0; top: 50%; transform: translateY(-50%) scale(1,1); transition: .3s; transform-origin: center; width: 100%; height: 100%; object-fit: cover; } .sa-featured .tile__inner { grid-template-rows: auto 1fr; } .sa-featured .tile__content { align-items: stretch; } .sa-featured .tile__title { color: #fff; background: #707070; font-size: var(--fs0); padding: var(--p-sm) var(--p); transition: .3s; flex: 1; text-decoration: none; position: relative; } .sa-featured .tile__button { font-size: var(--fs-1); padding: var(--p-xs) var(--p); color: #888; transition: .3s; text-align: right; align-items: flex-end; } .sa-featured .tile__inner:hover .tile__image img { transform: translateY(-50%) scale(1.1,1.1); } .sa-featured .tile__inner:hover .tile__title { background: #8b3a19; color: #fff; text-decoration: none; } .sa-featured .tile__inner:hover .tile__button { color: #fff; background: #8b3a19; } .sa-featured .tile__date { background: #1a1a1a; padding: var(--p-xs) var(--p); text-align: right; color: #fff; } .sa-featured { .tile__date, .tile__button { display: block; } } /* .sa-featured { max-width: 70em; padding: var(--p); background: #8b3a19; color: #fff; border-radius: var(--bdr-rad); } .sa-featured .tile__inner { max-width: 64em; } .sa-featured .tile__title { font-size: var(--fs4); font-weight: 500; border-bottom: 1px dotted #fff; } .sa-featured .tile__date { background: #1a1a1a; padding: var(--p-xs) var(--p); text-align: right; } .sa-featured .tile__button a { align-self: flex-start; } */ @media (max-width: 1120px) { .sa-agroup-container { grid-template-columns: 1fr; grid-template-areas: "text" "details" "list"; } .sa-agroup-container .tile__details { grid-template-columns: repeat(5, 1fr); grid-template-areas: ". . . date date" "contact contact links links ."; gap: var(--gap); } .sa-agroup-container .tile__details .tile__date { grid-area: date; } .sa-agroup-container .tile__content { grid-area: contact; } .sa-agroup-container .tile__link { grid-area: links; } } @media (max-width: 992px){ .sa-home-top, .sa-pillar { grid-template-columns: 1fr 1fr; grid-template-areas: "nav pillars" "featured featured" "vision vision"; grid-template-rows: auto 1fr; } .sa-pillar { grid-template-areas: "pillars resources" "mission mission" "function function"; } /* ### MOBILE SLIDE MENU ### */ .oxy-slide-menu ul li ul li ul li a { flex-flow: column; align-items: flex-start !important; background: #fff; } .oxy-slide-menu ul li ul li ul li a .menu-description { font-size: var(--fs-2); padding: 6px 0 3px; border-top: 1px solid #f34607; transition: .2s; width: 100%; background: #fff; color: #222; padding: .3em .5em; } .oxy-slide-menu ul li ul li ul li a:hover { color: #e5e5e5 !important; } .oxy-slide-menu ul li ul li ul li a:hover .menu-description { color: #e5e5e5 !important; } /* ### MAIN HEADER ### */ .main-header { grid-template-columns: 1fr 2fr 1fr; grid-auto-rows: minmax(100px, auto); grid-template-areas: "seal title title" "seal . region"; } .main-header__title { justify-content: start; } .sa-home-events-col { grid-template-columns: 1fr 1fr; } .sa-news__tax { order: -1; } .sa-news__tax .tile__title .tap, .sa-news__tax .tile__title .btn { display: block; } .sa-recent__sm { display: grid !important; } .sa-recent__lg { display: none !important; } } @media (max-width: 767px) { /* ### MAIN HEADER ### */ .main-header { grid-template-columns: 1fr 1fr 1fr; grid-auto-rows: minmax(100px, auto); grid-template-areas: "seal . region" "title title title"; } .main-header__title { justify-content: center; } .sa-home-events-col { grid-template-columns: 1fr; justify-items: end; } .sa-news-home-tile { grid-template-areas: "img title" "img text" "date date"; } /* .sa-pillar-column { width: max-content !important; } */ .sa-pillar-tile { padding-left: calc(var(--p-lg) * 3); padding-right: calc(var(--p-lg) * 3); } .sa-office-tiles .office-contacts { grid-template-columns: 1fr; grid-template-areas: "name" "email" "phone"; } .sa-agroup-container .tile__details { grid-template-columns: repeat(4, 1fr); grid-template-areas: ". . date date" "contact contact links links"; gap: var(--gap); } .sa-aagroup { grid-template-columns: 1fr !important; } } @media (max-width: 680px) { .sa-home-top, .sa-pillar { grid-template-columns: 1fr; grid-template-areas: "nav" "pillars" "featured" "vision"; grid-template-rows: auto; } .sa-pillar { grid-template-areas: "pillars" "resources" "mission" "function"; } } @media (max-width: 580px) { .sa-agroup-container .tile__details { grid-template-columns: repeat(5, 1fr); grid-template-areas: ". . date date date" "contact contact contact . ." "links links links . ."; gap: var(--gap); } } @media (max-width: 520px) { .sa-news-home-tile { grid-template-columns: minmax(80px, 18%) auto; grid-template-areas: "img title" "text text" "date date"; } } @media (max-width: 480px) { .main-header { grid-template-columns: 1fr 1fr; grid-auto-rows: minmax(100px, auto); grid-template-areas: "seal region" "title title"; } .sa-pillar-column { width: 100% !important; } .sa-pillar-tile { padding: var(--p-lg); } .sa-agroup-container .tile__details { grid-template-columns: 1fr 7fr 1fr; grid-template-areas: ". date ." "contact contact contact" "links links links"; gap: var(--row-gap) var(--gap-md); } }.glb-div-container__bg{ } .sa-agroup-heading span{ color:#8b3a19; font-size:var(--fs3) ; } body{ background-image:url(https://terraaustralisstatesassembly.net/ta01-as001/wp-content/uploads/sites/2/2024/09/handmade-paper.png); background-color:#e5e5e5; } .assemblies-grid .tile{ padding-top:10px; padding-right:10px; padding-bottom:10px; padding-left:10px; border-radius:var(--bdr-rad) ; border-top-color:#707070; border-right-color:#707070; border-bottom-color:#707070; border-left-color:#707070; border-top-style:solid; border-right-style:solid; border-bottom-style:solid; border-left-style:solid; border-top-width:1px; border-right-width:1px; border-bottom-width:1px; border-left-width:1px; box-shadow: 0 1px 1px rgba(0,0,0,0.25), 0 2px 2px rgba(0,0,0,0.20), 0 4px 4px rgba(0,0,0,0.15), 0 8px 8px rgba(0,0,0,0.10), 0 16px 16px rgba(0,0,0,0.05); } h1{ color:#8b3a19; }