.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: 1120px;
}
body {font-family: 'Lato';}body {line-height: 1.6;font-size: var(--fs0) ;font-weight: 300;color: #1e1e1e;}.oxy-nav-menu-hamburger-line {background-color: #1e1e1e;}h1, h2, h3, h4, h5, h6 {font-family: 'Lato';font-size: var(--fs1) ;font-weight: 300;line-height: 1;color: #8a5228;}h2, h3, h4, h5, h6{font-size: var(--fs2) ;}h3, h4, h5, h6{font-size: var(--fs3) ;color: #8a5228;}h4, h5, h6{font-size: var(--fs4) ;font-weight: 400;}h5, h6{font-size: var(--fs5) ;}h6{font-size: var(--fs6) ;}a {color: #8a5228;font-weight: 400;text-decoration: none;}a:hover {text-decoration: none;}.ct-link-text {text-decoration: ;}.ct-link {text-decoration: ;}.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;
				}
			}
.tile__button:locked{
}
.tile__button {
}
.lbp-btn:locked{
}
.lbp-btn {
}
.lbp-btn:not(.ct-section):not(.oxy-easy-posts),
.lbp-btn.oxy-easy-posts .oxy-posts,
.lbp-btn.ct-section .ct-section-inner-wrap{
display:flex;
flex-direction:row;
align-items:center;
justify-content:center;
}
.lbp-btn__sm:locked{
}
.lbp-btn__sm {
 padding-top:var(--p-sm) ;
 padding-right:var(--p-lg) ;
 padding-bottom:var(--p-sm) ;
 padding-left:var(--p-lg) ;
}
.lbp-btn__2:hover{
 background-color:#8a5228;
}
.lbp-btn__2:locked{
}
.lbp-btn__2 {
 background-color:#1e1e1e;
 border-top-color:#ffffff;
 border-right-color:#ffffff;
 border-bottom-color:#ffffff;
 border-left-color:#ffffff;
 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;
 color:#ffffff;
 transition-duration:.3s;
}
.CtoC-textured-bg:locked{
}
.CtoC-textured-bg:activeselector{
}
.CtoC-textured-bg {
background-image:linear-gradient(rgba(242,216,186,0.4), rgba(242,216,186,0.4)), url(https://louisebagger.com.au/wp-content/uploads/2025/07/textured-paper.png);background-size:auto,  auto auto; background-color:#ad8154;
}
.CtoC-textured-bg:ct_parent{
}
.grd:locked{
}
.grd {
}
.lbp-camtocan__banner:locked{
}
.lbp-camtocan__banner {
}
.gap:locked{
}
.gap {
}
.grd-3-1:locked{
}
.grd-3-1 {
}
.gap-lg:locked{
}
.gap-lg {
}
.eq-h:locked{
}
.eq-h {
}
.tiles-center:locked{
}
.tiles-center {
}
.gap-sm:locked{
}
.gap-sm {
}
.supamodal4 {
}
.oxy-close-modal {
}
.closesupamodal4:hover{
transform:rotate(-135deg);}
.closesupamodal4 {
 transition-duration:0.3s;
 transition-timing-function:ease;
 transition-property:transform;
}
.supamenu4 {
}
.opensupamodal4:hover{
padding: ;color: #a1b1aa;}.opensupamodal4:hover{
}
.opensupamodal4 {
background-color: #000000;
border: 1px solid #000000;
padding: 10px;color: #ffffff;}.opensupamodal4 
>svg {width: 55px;height: 55px;}.opensupamodal4 {
}
.supamodal1 {
}
.opensupamodal1:hover{
padding: ;color: #1d98ee;}.opensupamodal1:hover{
}
.opensupamodal1 {
background-color: #000000;
border: 1px solid #000000;
padding: 10px;color: #ffffff;}.opensupamodal1 
>svg {width: 55px;height: 55px;}.opensupamodal1 {
}
.closesupamodal1:hover{
transform:rotate(135deg);}
.closesupamodal1 {
 transition-duration:0.3s;
 transition-timing-function:ease;
 transition-property:transform;
}
.supamenu1 {
}
.supamodal3 {
}
.closesupamodal3:hover{
transform:rotate(135deg);}
.closesupamodal3 {
 transition-duration:0.3s;
 transition-timing-function:ease;
 transition-property:transform;
}
.supamenu3 {
}
.opensupamodal3:hover{
padding: ;color: #d34c4c;}.opensupamodal3:hover{
}
.opensupamodal3 {
background-color: #000000;
border: 1px solid #000000;
padding: 10px;color: #ffffff;}.opensupamodal3 
>svg {width: 55px;height: 55px;}.opensupamodal3 {
}
.supa-multi-bg-2-all {
background-size: cover; background-repeat:no-repeat;
 position:absolute;
 top:0px;
 right:0px;
 bottom:0px;
 left:0px;
 opacity:0;
 transition-duration:0.5s;
 transition-timing-function:ease;
 transition-property:all;
 background-position:50% 50%;
}
.supa-multi-bg-2-1 {
}
.supa-multi-bg-2-2 {
}
.supa-multi-bg-2-3 {
}
.supa-multi-bgblock-2-all:hover{
 background-color:rgba(0,0,0,0.8);
}
.supa-multi-bgblock-2-all {
 padding-top:20px;
 padding-left:20px;
 padding-right:20px;
 padding-bottom:20px;
 height:55vh;
 z-index:10;
 margin-top:50px;
 margin-bottom:50px;
 background-color:rgba(141, 84, 46, 0.2);
 overflow:hidden;
 position:relative;
 transition-duration:0.5s;
 transition-timing-function:ease;
 transition-property:background-color;
 max-height:400px;
}
.supa-multi-bgblock-2-all:not(.ct-section):not(.oxy-easy-posts),
.supa-multi-bgblock-2-all.oxy-easy-posts .oxy-posts,
.supa-multi-bgblock-2-all.ct-section .ct-section-inner-wrap{
display:flex;
}
@media (max-width: 991px) {
.supa-multi-bgblock-2-all {
 width:100%;
 text-align:center;
 margin-top:0px;
 margin-bottom:0px;
 height:30vh;
}
.supa-multi-bgblock-2-all:not(.ct-section):not(.oxy-easy-posts),
.supa-multi-bgblock-2-all.oxy-easy-posts .oxy-posts,
.supa-multi-bgblock-2-all.ct-section .ct-section-inner-wrap{
display:flex;
flex-direction:column;
align-items:center;
justify-content:center;
}
}

@media (max-width: 767px) {
.supa-multi-bgblock-2-all {
 height:30vh;
}
}

.supa-multi-bgblock-2-1 {
 border-right-width:1px;
 border-right-style:solid;
 border-right-color:#222222;
}
@media (max-width: 991px) {
.supa-multi-bgblock-2-1 {
 border-bottom-color:#444444;
 border-bottom-width:1px;
 border-bottom-style:solid;
}
}

.supa-multi-bg-2-title {
transform:translate(-50%,-50%); font-family:Lato;
 font-size:20px;
 text-transform:uppercase;
 font-weight:600;
 letter-spacing:2px;
 color:#ffffff;
 border-top-width:1px;
 border-right-width:1px;
 border-bottom-width:1px;
 border-left-width:1px;
 border-top-style:solid;
 border-right-style:solid;
 border-bottom-style:solid;
 border-left-style:solid;
 border-top-color:rgba(255,255,255,0.19);
 border-right-color:rgba(255,255,255,0.19);
 border-bottom-color:rgba(255,255,255,0.19);
 border-left-color:rgba(255,255,255,0.19);
 line-height:1;
 padding-top:20px;
 padding-left:20px;
 padding-right:20px;
 padding-bottom:20px;
 transition-duration:0.5s;
 transition-timing-function:ease;
 transition-property:transform;
 position:absolute;
 top:50%;
 left:50%;
}
@media (max-width: 767px) {
.supa-multi-bg-2-title {
 padding-top:12px;
 padding-bottom:12px;
 font-size:18px;
 padding-left:12px;
 padding-right:12px;
}
}

.supa-multi-bg-2-desc {
transform:translate(-50%,200%); font-family:Lato;
 font-size:16px;
 text-align:center;
 transition-duration:0.5s;
 transition-timing-function:ease;
 transition-property:all;
 position:absolute;
 color:#cfcfcf;
 width:100%;
 padding-left:40px;
 padding-right:40px;
 opacity:0;
 left:50%;
 top:50%;
 font-weight:400;
}
@media (max-width: 991px) {
}

.supa-multi-bgblock-2-2 {
 border-right-width:1px;
 border-right-color:#222222;
 border-right-style:solid;
}
@media (max-width: 991px) {
.supa-multi-bgblock-2-2 {
 border-bottom-color:#444444;
 border-bottom-width:1px;
 border-bottom-style:solid;
 border-right-style:none;
}
}

.supa-multi-bgblock-2-3 {
 border-right-style:solid;
 border-right-width:1px;
 border-right-color:#222;
}
@media (max-width: 991px) {
.supa-multi-bgblock-2-3 {
 border-bottom-width:1px;
 border-bottom-style:solid;
 border-bottom-color:#444;
}
}

.oxel_megamenu_parent:hover{
 background-color:#cfd3d7;
}
.oxel_megamenu_parent {
 padding-top:8px;
 padding-bottom:8px;
 padding-left:32px;
 padding-right:32px;
 position:relative;
 background-color:#f9f9fa;
 transition-duration:0.3s;
}
.oxel_megamenu_parent__title {
 color:#374047;
}
.oxel_megamenu__wrapper {
transform:; padding-top:32px;
 padding-left:0px;
 padding-right:0px;
 padding-bottom:0px;
 opacity:1;
 transition-duration:0.3s;
 transition-timing-function:ease-in-out;
 position:relative;
 width:100%;
 z-index:1999;
}
.oxel_megamenu__wrapper:not(.ct-section):not(.oxy-easy-posts),
.oxel_megamenu__wrapper.oxy-easy-posts .oxy-posts,
.oxel_megamenu__wrapper.ct-section .ct-section-inner-wrap{
flex-direction:unset;
}
.oxel_megamenu__wrapper--hidden {
transform:translateY(64px); opacity:0;
pointer-events: none;
}
.oxel_megamenu__close-icon {
color: #333333;}.oxel_megamenu__close-icon 
>svg {width: 32px;height: 32px;}.oxel_megamenu__close-icon {
 position:absolute;
 top:48px;
 right:16px;
}
.oxel_megamenu__close-icon:not(.ct-section):not(.oxy-easy-posts),
.oxel_megamenu__close-icon.oxy-easy-posts .oxy-posts,
.oxel_megamenu__close-icon.ct-section .ct-section-inner-wrap{
display:none;
flex-direction:unset;
}
@media (max-width: 991px) {
.oxel_megamenu__close-icon {
}
.oxel_megamenu__close-icon:not(.ct-section):not(.oxy-easy-posts),
.oxel_megamenu__close-icon.oxy-easy-posts .oxy-posts,
.oxel_megamenu__close-icon.ct-section .ct-section-inner-wrap{
display:flex;
}
}

.mbe-button-styling:hover .lbp-tile-button-text{
 color:#2d2d2d;
}
.mbe-button-styling:hover{
 background-color:#ffffff;
}
.mbe-button-styling:activeselector{
}
.mbe-button-styling {
 transition-duration:0.2s;
 transition-property:all;
 overflow:hidden;
 padding-left:30px;
 padding-right:30px;
 margin-top:15px;
 position:relative;
 margin-bottom:15px;
 padding-top:10px;
 padding-bottom:10px;
 font-size:20px;
 color:#faf9f8;
 border-top-color:#ffffff;
 border-right-color:#ffffff;
 border-bottom-color:#ffffff;
 border-left-color:#ffffff;
 border-top-width:1px;
 border-right-width:1px;
 border-bottom-width:1px;
 border-left-width:1px;
 border-top-style:solid;
 border-right-style:solid;
 border-bottom-style:solid;
 border-left-style:solid;
}
.mbe-button-styling:not(.ct-section):not(.oxy-easy-posts),
.mbe-button-styling.oxy-easy-posts .oxy-posts,
.mbe-button-styling.ct-section .ct-section-inner-wrap{
display:flex;
flex-direction:row;
flex-wrap:wrap;
align-items:center;
align-content:center;
justify-content:space-between;
}
@media (max-width: 1120px) {
.mbe-button-styling {
 padding-top:8px;
 padding-bottom:8px;
}
}

@media (max-width: 991px) {
.mbe-button-styling {
 padding-top:6px;
 padding-bottom:6px;
}
}

@media (max-width: 767px) {
.mbe-button-styling {
 padding-top:4px;
 padding-bottom:4px;
 text-align:center;
}
.mbe-button-styling:not(.ct-section):not(.oxy-easy-posts),
.mbe-button-styling.oxy-easy-posts .oxy-posts,
.mbe-button-styling.ct-section .ct-section-inner-wrap{
display:flex;
}
}

@media (max-width: 479px) {
.mbe-button-styling {
}
}

.supaAccordion5 {
 width:90%;
 height:70vh;
 max-height:550px;
 max-width:1400px;
}
.supaAccordion5:not(.ct-section):not(.oxy-easy-posts),
.supaAccordion5.oxy-easy-posts .oxy-posts,
.supaAccordion5.ct-section .ct-section-inner-wrap{
display:flex;
flex-direction:row;
}
@media (max-width: 767px) {
.supaAccordion5 {
 height:500vh;
}
.supaAccordion5:not(.ct-section):not(.oxy-easy-posts),
.supaAccordion5.oxy-easy-posts .oxy-posts,
.supaAccordion5.ct-section .ct-section-inner-wrap{
display:flex;
flex-direction:column;
}
}

@media (max-width: 479px) {
}

.supaAccordion5_item:hover{
 z-index:10;
 flex-grow:6;
}
.supaAccordion5_item {
background-size: cover; background-repeat:no-repeat;
 height:100%;
 flex-grow:1;
 z-index:1;
 width:1vw;
 overflow:hidden;
 transition-duration:0.5s;
 transition-timing-function:ease;
 transition-property:all;
 background-position:50% 50%;
 box-shadow:inset 0px 0px 100px rgba(0,0,0,0.5);
}
.supaAccordion5_item:not(.ct-section):not(.oxy-easy-posts),
.supaAccordion5_item.oxy-easy-posts .oxy-posts,
.supaAccordion5_item.ct-section .ct-section-inner-wrap{
display:flex;
flex-direction:column;
align-items:center;
justify-content:flex-end;
}
@media (max-width: 767px) {
.supaAccordion5_item {
 width:100%;
 height:1vh;
}
}

.supaAccordion5_content {
transform:translateY(70%); width:300px;
 background-color:rgba(0,0,0,0.75);
 padding-top:20px;
 padding-left:20px;
 padding-right:20px;
 padding-bottom:20px;
 transition-duration:.3s;
 transition-delay:.1s;
}
.supaAccordion5_content:not(.ct-section):not(.oxy-easy-posts),
.supaAccordion5_content.oxy-easy-posts .oxy-posts,
.supaAccordion5_content.ct-section .ct-section-inner-wrap{
display:grid;
display: grid !important;justify-items: center;align-items: stretch;grid-template-columns: repeat(1, minmax(50px, 1fr));grid-column-gap: 10px;grid-row-gap: 10px;}
@media (max-width: 767px) {
.supaAccordion5_content {
 width:250px;
}
}

.supaAccordion5_button {
background-color :#ffffff;
border: 1px solid #ffffff;
color: #000000;
padding: 5px 8px;
}.supaAccordion5_button {
 border-radius:0px;
 margin-top:20px;
 font-size:15px;
justify-self: flex-end;
}
.mbe-hover-button-styling:hover .mbe-button-rounded-icon{
transform:translate(-5%); visibility:visible;
 opacity:1;
}
.mbe-hover-button-styling:activeselector{
}
.mbe-hover-button-styling:hover{
 padding-left:20px;
 padding-right:40px;
}
.mbe-hover-button-styling {
 transition-duration:0.2s;
 transition-property:all;
 overflow:hidden;
 padding-left:30px;
 padding-right:30px;
 margin-top:15px;
 position:relative;
 margin-bottom:15px;
 padding-top:10px;
 padding-bottom:10px;
 font-size:20px;
 color:#faf9f8;
 border-top-color:#4d3c2d;
 border-right-color:#4d3c2d;
 border-bottom-color:#4d3c2d;
 border-left-color:#4d3c2d;
}
.mbe-hover-button-styling:not(.ct-section):not(.oxy-easy-posts),
.mbe-hover-button-styling.oxy-easy-posts .oxy-posts,
.mbe-hover-button-styling.ct-section .ct-section-inner-wrap{
display:flex;
flex-direction:row;
flex-wrap:wrap;
align-items:center;
align-content:center;
justify-content:space-between;
}
@media (max-width: 1120px) {
.mbe-hover-button-styling {
 padding-top:8px;
 padding-bottom:8px;
}
}

@media (max-width: 991px) {
.mbe-hover-button-styling {
 padding-top:6px;
 padding-bottom:6px;
}
}

@media (max-width: 767px) {
.mbe-hover-button-styling {
 padding-top:4px;
 padding-bottom:4px;
 text-align:center;
}
.mbe-hover-button-styling:not(.ct-section):not(.oxy-easy-posts),
.mbe-hover-button-styling.oxy-easy-posts .oxy-posts,
.mbe-hover-button-styling.ct-section .ct-section-inner-wrap{
display:flex;
}
}

@media (max-width: 479px) {
.mbe-hover-button-styling {
}
}

.mbe-button-rounded-icon {
border: 1px solid;
padding: 0px;color: #333333;}.mbe-button-rounded-icon 
>svg {width: 20px;height: 20px;}.mbe-button-rounded-icon {
transform:translate(50%); transition-duration:0.2s;
 transition-property:all;
 margin-left:6px;
 opacity:0;
 position:absolute;
 right:10px;
 float:none;
 overflow:visible;
 clear:none;
 visibility:visible;
 background-color:rgba(0,0,0,0);
}
.mbe-button-rounded-icon:not(.ct-section):not(.oxy-easy-posts),
.mbe-button-rounded-icon.oxy-easy-posts .oxy-posts,
.mbe-button-rounded-icon.ct-section .ct-section-inner-wrap{
flex-direction:unset;
}
.mbc-p1 {
 padding-top:8px;
 padding-left:8px;
 padding-right:8px;
 padding-bottom:8px;
}
.mbc-p2 {
 padding-top:16px;
 padding-left:16px;
 padding-right:16px;
 padding-bottom:16px;
}
.mbc-p3 {
 padding-top:32px;
 padding-left:32px;
 padding-right:32px;
 padding-bottom:32px;
}
.mbc-p4 {
 padding-top:64px;
 padding-left:64px;
 padding-right:64px;
 padding-bottom:64px;
}
.mbc-p1-x {
 padding-left:8px;
 padding-right:8px;
}
.mbc-p2-x {
 padding-left:16px;
 padding-right:16px;
}
.mbc-p3-x {
 padding-left:32px;
 padding-right:32px;
}
.mbc-p4-x {
 padding-left:64px;
 padding-right:64px;
}
.mbc-p1-y {
 padding-top:8px;
 padding-bottom:8px;
}
.mbc-p2-y {
 padding-top:16px;
 padding-bottom:16px;
}
.mbc-p3-y {
 padding-top:32px;
 padding-bottom:32px;
}
.mbc-p4-y {
 padding-top:64px;
 padding-bottom:64px;
}
.mbc-p1-t {
 padding-top:8px;
}
.mbc-p2-t {
 padding-top:16px;
}
.mbc-p3-t {
 padding-top:32px;
}
.mbc-p4-t {
 padding-top:64px;
}
.mbc-p1-b {
 padding-bottom:8px;
}
.mbc-p2-b {
 padding-bottom:16px;
}
.mbc-p3-b {
 padding-bottom:32px;
}
.mbc-p4-b {
 padding-bottom:64px;
}
.mbc-p1-l {
 padding-left:8px;
}
.mbc-p2-l {
 padding-left:16px;
}
.mbc-p3-l {
 padding-left:32px;
}
.mbc-p4-l {
 padding-left:64px;
}
.mbc-p1-r {
 padding-right:8px;
}
.mbc-p2-r {
 padding-right:16px;
}
.mbc-p3-r {
 padding-right:32px;
}
.mbc-p4-r {
 padding-right:64px;
}
.mbc-m1 {
 margin-top:8px;
 margin-left:8px;
 margin-right:8px;
 margin-bottom:8px;
}
.mbc-m2 {
 margin-top:16px;
 margin-left:16px;
 margin-right:16px;
 margin-bottom:16px;
}
.mbc-m3 {
 margin-top:32px;
 margin-left:32px;
 margin-right:32px;
 margin-bottom:32px;
}
.mbc-m4 {
 margin-top:64px;
 margin-left:64px;
 margin-right:64px;
 margin-bottom:64px;
}
.mbc-m1-x {
 margin-left:8px;
 margin-right:8px;
}
.mbc-m2-x {
 margin-left:16px;
 margin-right:16px;
}
.mbc-m3-x {
 margin-left:32px;
 margin-right:32px;
}
.mbc-m4-x {
 margin-left:64px;
 margin-right:64px;
}
.mbc-m1-y {
 margin-top:8px;
 margin-bottom:8px;
}
.mbc-m2-y {
 margin-top:16px;
 margin-bottom:16px;
}
.mbc-m3-y {
 margin-top:32px;
 margin-bottom:32px;
}
.mbc-m3-y:not(.ct-section):not(.oxy-easy-posts),
.mbc-m3-y.oxy-easy-posts .oxy-posts,
.mbc-m3-y.ct-section .ct-section-inner-wrap{
display:flex;
flex-direction:column;
align-items:center;
}
.mbc-m4-y {
 margin-top:64px;
 margin-bottom:64px;
}
.mbc-m1-t {
 margin-top:8px;
}
.mbc-m2-t {
 margin-top:16px;
}
.mbc-m3-t {
 margin-top:32px;
}
.mbc-m4-t {
 margin-top:64px;
}
.mbc-m1-b {
 margin-bottom:8px;
}
.mbc-m2-b {
 margin-bottom:16px;
}
.mbc-m3-b {
 margin-bottom:32px;
}
.mbc-m4-b {
 margin-bottom:64px;
}
.mbc-m1-l {
 margin-left:8px;
}
.mbc-m2-l {
 margin-left:16px;
}
.mbc-m3-l {
 margin-left:32px;
}
.mbc-m4-l {
 margin-left:64px;
}
.mbc-m1-r {
 margin-right:8px;
}
.mbc-m2-r {
 margin-right:16px;
}
.mbc-m3-r {
 margin-right:32px;
}
.mbc-m4-r {
 margin-right:64px;
}
.mbc-shadow-tiny {
box-shadow: 0 1px 3px 0 rgba(0,0,0,.3),0 0 0 1px rgba(0,0,0,.04);
}
.mbc-shadow-soft {
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);
}
.mbc-br1 {
 border-radius:4px;
}
.mbc-br2 {
 border-radius:8px;
}
.mbc-br3 {
 border-radius:12px;
}
.mbc-br4 {
 border-radius:16px;
}
.mbc-shadow {
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);
}
.mbc-shadow-long {
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);
}
.mbc-button-rad-sm {
 border-radius:6px;
}
.mbc-button-rad-lg {
 border-radius:12px;
}
.mbc-button-bg-dk {
 background-color:#4d3c2d;
}
.mbc-button-bg-lt {
 background-color:#eee8d7;
}
.mbc-button-text-dk {
 color:#4d3c2d;
}
.mbc-button-bdr-dk {
 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;
 border-top-color:#4d3c2d;
 border-right-color:#4d3c2d;
 border-bottom-color:#4d3c2d;
 border-left-color:#4d3c2d;
}
.mbc-button-bdr-lt {
 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;
 border-top-color:#eee8d7;
 border-right-color:#eee8d7;
 border-bottom-color:#eee8d7;
 border-left-color:#eee8d7;
}
.lbp-home-tile {
 position:absolute;
 left:3vw;
 overflow:visible;
 height:18vh;
 width:20vw;
 box-shadow:3px 3px 12px 3px rgba(0,0,0,0.43);
}
.lbp-home-tile-1 {
background-size: auto 95%; position:absolute;
 top:8vh;
 background-color:#ffffff;
 background-repeat:no-repeat;
 background-position:50% 50%;
}
.lbp-home-tile-2 {
background-image:url(https://louisebagger.com.au/wp-content/uploads/2020/04/Loram7799.jpg);background-size: cover; position:absolute;
 top:28vh;
 background-repeat:no-repeat;
 background-position:50% 50%;
}
.lbp-home-tile-3 {
background-image:url(https://louisebagger.com.au/wp-content/uploads/2020/04/Portraits-Louise-Bagger-photography-2020.jpg);background-size: cover; position:absolute;
 top:48vh;
 background-repeat:no-repeat;
 background-position:50% 50%;
}
.lbp-home-tile-4 {
background-image:url(https://louisebagger.com.au/wp-content/uploads/2020/05/Commercial-Gallery-24.jpg);background-size: cover; position:absolute;
 top:68vh;
 background-repeat:no-repeat;
 background-position:50% 50%;
}
.lbp-accordian-text {
 font-size:18px;
 width:90%;
}
.lbp-according-heading {
 width:100%;
 text-align:left;
}
.lbp-tile-button-text {
 width:100%;
 text-align:right;
 font-size:18px;
 color:#ffffff;
}
.lbp-nav-tile-heading {
 transition-duration:.3s;
}
@media (max-width: 767px) {
}

.supa-multi-bg-2-4 {
}
.supa-multi-bgblock-2-4 {
}
.lbp-menu {
}
.lbp-about-text-block:locked{
}
.lbp-about-text-block {
}
@media (max-width: 767px) {
.lbp-about-text-block {
grid-template-columns: 1fr; justify-items: center;
}
}

.lbp-about-text {
}
.lbp-footer-sm-icon {
color: #ffffff;}.lbp-footer-sm-icon 
>svg {width: 32px;height: 32px;}.lbp-footer-sm-icon {
}
.lbp-menu-sm-icon {
color: #8a5228;}.lbp-menu-sm-icon 
>svg {width: 32px;height: 32px;}.lbp-menu-sm-icon {
}
.lbp-license-title {
 transition-duration:.3s;
}
.lbp-page-body-text:locked{
}
.lbp-page-body-text {
}
.full-span:locked{
}
.full-span {
}
.grd-1-3:locked{
}
.grd-1-3 {
}
.tile__content:locked{
}
.tile__content {
}
.tile__image:locked{
}
.tile__image {
}
.lbp-camtocan:locked{
}
.lbp-camtocan {
}
.lbp-btn__1:locked{
}
.lbp-btn__1 {
 background-color:#8a5228;
 color:#ffffff;
 font-weight:500;
}
.tile__title:locked{
}
.tile__title {
}
.contents-center:locked{
}
.contents-center {
}
.grd-1-2:locked{
}
.grd-1-2 {
}
.tile__details:locked{
}
.tile__details {
}
.v-middle:locked{
}
.v-middle {
}
.p:locked{
}
.p {
}
.p-3-5:locked{
}
.p-3-5 {
}
.p-3-4:locked{
}
.p-3-4 {
}
.p-2-1:locked{
}
.p-2-1 {
}
.p-2-4:locked{
}
.p-2-4 {
}
.p-4-2:locked{
}
.p-4-2 {
}
.p-4-3:locked{
}
.p-4-3 {
}
.gap-xs:locked{
}
.gap-xs {
}
.brk-md:locked{
}
.brk-md {
}
.lbp-camtocanvas:locked{
}
.lbp-camtocanvas {
}
.lbp-camtocanvas__gallery {
}
.grd-2-3:locked{
}
.grd-2-3 {
}
.grd-4-1:locked{
}
.grd-4-1 {
}
.ctoc-pan-image:locked{
}
.ctoc-pan-image:activeselector{
}
.ctoc-pan-image {
}
.grd-3:locked{
}
.grd-3 {
}
.grd-3-2:locked{
}
.grd-3-2 {
}
.tile__subtitle:locked{
}
.tile__subtitle {
}
.txt-center:locked{
}
.txt-center {
}
.grd-2-1:locked{
}
.grd-2-1 {
}
.ctoc-home-box:locked{
}
.ctoc-home-box {
}
.tile__list:locked{
}
.tile__list {
}
.flx:locked{
}
.flx {
}
.flx-dyn:locked{
}
.flx-dyn {
}
.flx-dyn-sm:locked{
}
.flx-dyn-sm {
}
.tiles-centre:locked{
}
.tiles-centre {
}
.ctoc-gallery__main:locked{
}
.ctoc-gallery__main {
}
.ctoc-pan-image__sm:locked{
}
.ctoc-pan-image__sm:activeselector{
}
.ctoc-pan-image__sm {
}
/* ### CONTACT FORM WITH CONTACT FORM 7 ### */
: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*/

	/* BODY text: 14px > 18px */
	/* https://utopia.fyi/type/calculator/?c=320,14,1.125,1400,18,1.2,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.74rem, calc(0.70rem + 0.22vw), 0.89rem);
	--fs-1: clamp(0.78rem, calc(0.73rem + 0.24vw), 0.94rem);
	--fs0: clamp(0.88rem, calc(0.80rem + 0.37vw), 1.13rem);
	--fs1: clamp(1.77rem, calc(1.30rem + 2.35vw), 3.36rem);
	--fs2: clamp(1.58rem, calc(1.21rem + 1.81vw), 2.80rem);
	--fs3: clamp(1.40rem, calc(1.13rem + 1.38vw), 2.33rem);
	--fs4: clamp(1.25rem, calc(1.04rem + 1.03vw), 1.94rem);
	--fs5: clamp(1.11rem, calc(0.96rem + 0.76vw), 1.62rem);
	--fs6: clamp(0.98rem, calc(0.88rem + 0.54vw), 1.35rem);

    --fs-xl: clamp(1.77rem, calc(1.30rem + 2.35vw), 3.36rem);
    --fs-xxl: clamp(2.2807rem, 1.5188rem + 3.8097vw, 4.8522rem);

  /* == VERSION: -v8- 3 Aug 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. #faf9f8 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(3vw + 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: 4vmin;     /* 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: 10em;  /* width for tile in dynamic CSSGRID */
  --col-dyn-sm: 16em;  /* width for tile in dynamic CSSGRID */
  --col-dyn: 22em;     /* 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;
  
  /* HERO and BANNER image heights */
  --hero-height: 25vmax;
  --banner-height: 25vw; /* Supplemental pages sometimes have a banner of less height */

  /* A global variable for drop shadows */
  --shadow-sm: 0 1px 3px 0 rgba(0,0,0,.3),0 0 0 1px rgba(0,0,0,.04);
  --shadow: 0 2px 15px -4px rgb(50 50 50 / .4);
  --shadow-lg: 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);

  /* ===================*/

  /* ####     UPDATE ONLY BELOW HERE!!     #### */
  /* ---- Custom site settings exist above ---- */

  /* == VERSION: -v8- 3 Aug 2025 == */

  /*  
      - fixed single flx column
      - fixed dynamic flx layout: flx-dyn-xs, flx-dyn-sm, flx-dyn, flx-dyn-lg
      - added shadow variables [above] and CSS classes [above shadows below]
  */

  --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;  /* probably not used anymore */
  --tile-tb: 3vw;  /* probably not used anymore */

  /* 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);

  /* 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 */

/* BREAKPOINT CLASSES */
.brk-xl,  /* 1100px */
.brk-lg,  /* 991px */
.brk-md,  /* 767px */
.brk-sm,  /* 579px */
.brk-xs { /* 480px */
}

/* 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: 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 > * {
  display: flex;
  align-content: start;
  align-content: flex-start;
}
.flx > *:has(.tile__inner) {
  width: 100%;
}
.flx .tile__inner {
  width: 100%;
  display: flex;
  flex-flow: row wrap;
  align-items: stretch;
}

.flx-col {
  flex-flow: column;
}

/* 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);
/*   margin-bottom: var(--row-gap-xs); */
}
.flx.gap-sm > * {
  margin: 0 calc(var(--gap-sm) / 2) var(--row-gap-sm);
/*   margin-bottom: var(--row-gap-sm); */
}
.flx.gap > *,
.flx.gap-md > * {
  margin: 0 calc(var(--gap) / 2) var(--row-gap);
/*   margin-bottom: var(--row-gap); */
}
.flx.gap-lg > * {
  margin: 0 calc(var(--gap-lg) / 2) var(--row-gap-lg);
/*   margin-bottom: var(--row-gap-lg); */
}
.flx.gap-xl > * {
  margin: 0 calc(var(--gap-xl) / 2) var(--row-gap-xl);
/*   margin-bottom: 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.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-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)) */

/* For a dynamic grid based on fixed widths declared for these variables above:
    --col-dyn-xs
    --col-dyn-sm
    --col-dyn
    --col-dyn-lg */
.flx.flx-dyn-xs > * {
  flex: 0 1 var(--col-dyn-xs);
}
.flx.flx-dyn-sm > * {
  flex: 0 1 var(--col-dyn-sm);
}
.flx.flx-dyn > * {
  flex: 0 1 var(--col-dyn);
}
.flx.flx-dyn-lg > * {
  flex: 0 1 var(--col-dyn-lg);
}

.flx.flx-dyn-xs.gap-xs > * {
  flex: 0 1 calc(var(--col-dyn-xs) - var(--gap-xs));
  margin-left: calc(var(--gap-xs) / 2);
  margin-right: calc(var(--gap-xs) / 2);
}
.flx.flx-dyn-xs.gap-sm > * {
  flex: 0 1 calc(var(--col-dyn-xs) - var(--gap-sm));
  margin-left: calc(var(--gap-sm) / 2);
  margin-right: calc(var(--gap-sm) / 2);
}
.flx.flx-dyn-xs.gap > * {
  flex: 0 1 calc(var(--col-dyn-xs) - var(--gap));
  margin-left: calc(var(--gap) / 2);
  margin-right: calc(var(--gap) / 2);
}
.flx.flx-dyn-xs.gap-lg > * {
  flex: 0 1 calc(var(--col-dyn-xs) - var(--gap-lg));
  margin-left: calc(var(--gap-lg) / 2);
  margin-right: calc(var(--gap-lg) / 2);
}

.flx.flx-dyn-sm.gap-xs > * {
  flex: 0 1 calc(var(--col-dyn-sm) - var(--gap-xs));
  margin-left: calc(var(--gap-xs) / 2);
  margin-right: calc(var(--gap-xs) / 2);
}
.flx.flx-dyn-sm.gap-sm > * {
  flex: 0 1 calc(var(--col-dyn-sm) - var(--gap-sm));
  margin-left: calc(var(--gap-sm) / 2);
  margin-right: calc(var(--gap-sm) / 2);
}
.flx.flx-dyn-sm.gap > * {
  flex: 0 1 calc(var(--col-dyn-sm) - var(--gap));
  margin-left: calc(var(--gap) / 2);
  margin-right: calc(var(--gap) / 2);
}
.flx.flx-dyn-sm.gap-lg > * {
  flex: 0 1 calc(var(--col-dyn-sm) - var(--gap-lg));
  margin-left: calc(var(--gap-lg) / 2);
  margin-right: calc(var(--gap-lg) / 2);
}

.flx.flx-dyn.gap-xs > * {
  flex: 0 1 calc(var(--col-dyn) - var(--gap-xs));
  margin-left: calc(var(--gap-xs) / 2);
  margin-right: calc(var(--gap-xs) / 2);
}
.flx.flx-dyn.gap-sm > * {
  flex: 0 1 calc(var(--col-dyn) - var(--gap-sm));
  margin-left: calc(var(--gap-sm) / 2);
  margin-right: calc(var(--gap-sm) / 2);
}
.flx.flx-dyn.gap > * {
  flex: 0 1 calc(var(--col-dyn) - var(--gap));
  margin-left: calc(var(--gap) / 2);
  margin-right: calc(var(--gap) / 2);
}
.flx.flx-dyn.gap-lg > * {
  flex: 0 1 calc(var(--col-dyn) - var(--gap-lg));
  margin-left: calc(var(--gap-lg) / 2);
  margin-right: calc(var(--gap-lg) / 2);
}

.flx.flx-dyn-lg.gap-xs > * {
  flex: 0 1 calc(var(--col-dyn-lg) - var(--gap-xs));
  margin-left: calc(var(--gap-xs) / 2);
  margin-right: calc(var(--gap-xs) / 2);
}
.flx.flx-dyn-lg.gap-sm > * {
  flex: 0 1 calc(var(--col-dyn-lg) - var(--gap-sm));
  margin-left: calc(var(--gap-sm) / 2);
  margin-right: calc(var(--gap-sm) / 2);
}
.flx.flx-dyn-lg.gap > * {
  flex: 0 1 calc(var(--col-dyn-lg) - var(--gap));
  margin-left: calc(var(--gap) / 2);
  margin-right: calc(var(--gap) / 2);
}
.flx.flx-dyn-lg.gap-lg > * {
  flex: 0 1 calc(var(--col-dyn-lg) - var(--gap-lg));
  margin-left: calc(var(--gap-lg) / 2);
  margin-right: calc(var(--gap-lg) / 2);
}

/* 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,
.grd .v-middle {
  align-content: center;
}
.flx.v-middle,
.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;
}
.txt-center > *,
.txt-centre > * {
  text-align: center;
}
.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__list,
.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__list,
.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__list,
.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__list,
.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 == */
.glb-shadow__sm {
  box-shadow: var(--shadow-sm);
}
.glb-shadow {
  /* Set in Global Settings at the top of this stylesheet */
  box-shadow: var(--shadow);
}
.glb-shadow__lg {
  box-shadow: var(--shadow-lg);
}

.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-md:not(.no-break):not(.brk-md):not(.brk-sm):not(.brk-xs) > *,
  .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) {
  /* may not get used */
  /*:root {
    --p-m: calc(var(--p) * var(--p-mobile));
    --p-xs: calc(var(--p-m) / (var(--scaling) * 2));
    --p-sm: calc(var(--p-m) / var(--scaling));
    --p-md: var(--p-m);
    --p-lg: calc(var(--p-m) * var(--scaling));
    --p-xl: calc(var(--p-m) * (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);
  }*/

  .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-md:not(.no-break):not(.brk-md):not(.brk-sm):not(.brk-xs) > *,
  .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-3:not(.no-break):not(.brk-md):not(.brk-sm):not(.brk-xs) > * {
    width: 100%;
  }
  .flx-3.gap-xs:not(.no-break):not(.brk-md):not(.brk-sm):not(.brk-xs) > * {
    width: 100%;
  }
  .flx-3.gap-sm:not(.no-break):not(.brk-md):not(.brk-sm):not(.brk-xs) > * {
    width: 100%;
  }
  .flx-3.gap:not(.no-break):not(.brk-md):not(.brk-sm):not(.brk-xs) > * {
    width: 100%;
  }
  .flx-3.gap-lg:not(.no-break):not(.brk-md):not(.brk-sm):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-md: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) > *,
  .flx-6.gap-md:not(.no-break):not(.brk-md):not(.brk-sm):not(.brk-xs) > *,
  .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;
}

a.disabled {
  pointer-events: none;
  cursor: default;
}

/* Just in case iframes are added, keep them formatted and reasonably sized */
iframe {
  aspect-ratio: 16 / 9;
  width: 100%;
  max-width: 600px;
  height: 100%
}

/* Printing Stuff */
@media print {
  body { 
      background-color: white;
      color: black;
      padding: 10px;
  }
  .no-print {
    display: none !important;
  }
  .print-main {
    width: 100% !important; /* Haven't used yet. Idea is to nominate a "main container" for content to be printed within */
  }
  @page {
      size: A4 portrait; 
      margin: 2cm; 
  }
}

/* <br> 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;
}
/* ### CAMERA TO CANVAS ### */
.lbp-camtocanvas .tile__image {
  max-width: 450px;
}
.lbp-camtocanvas .tile__details,
.lbp-camtocanvas .lbp-btn {
  box-shadow: var(--shadow);
}
.ctoc-pan-image {
  width: 80%;
  position: relative;
  border: 1px solid #9b9b9b;
  overflow: hidden;
  transition: .3s;
}
.ctoc-pan-image img {
}
.ctoc-home-box .tile__image {
  transition: .3s;
  overflow: hidden;
}
.ctoc-home-box .tile__image img {
  transition: .3s;
}
.ctoc-home-box .tile__image:hover {
  transform: translateY(-3px);
}
.ctoc-home-box .tile__image:hover img {
  transform: scale(102%);
}

/* ### CONTACT FORM ### */
#lbp-contact-form {
	display:flex;
	flex-flow: row wrap;
	justify-content: space-between;
}

#lbp-contact-form label {
	margin-bottom: 2%;
}

.lbp-contact-topline {
	width: 49%;
}

.lbp-contact-fullwidth {
	width: 100%;
}

.wpcf7-form-control.wpcf7-textarea {
  height: 145px;
  border: none;
  border-bottom: 1px solid #39b54a;
  background: #f2f2f2;
}
input.wpcf7-form-control.wpcf7-submit {
    position: relative;
    display: inline-block;
    width: auto;
    height: 39px;
    line-height: 1.7em;
    margin: 0;
    padding: .3em 1em;
    font-size: 20px;
    font-weight: 500;
    text-align: left;
    text-decoration: none;
    cursor: pointer;
    white-space: nowrap;
    outline: 0;
    -o-border-radius: 2px;
    -moz-border-radius: 2px;
    -webkit-border-radius: 2px;
    -ms-border-radius: 2px;
    border-radius: 2px;
    text-shadow: none;
    background-color: transparent;
    -webkit-transition: all .1s linear;
    -moz-transition: all .1s linear;
    -ms-transition: all .1s linear;
    -o-transition: all .1s linear;
    transition: all .1s linear;
    -webkit-box-sizing: initial;
    -moz-box-sizing: initial;
    box-sizing: initial;
}
.lbp-contact-submit {
  text-align: right;
	margin: 0 0 0 auto;
}

/* This merely moves the ajax loader GIF to the left of the button */
.lbp-contact-submit label {
  display:flex;
  flex-flow: row-reverse;
  justify-content: flex-start;
  align-items: center;
}

input.wpcf7-form-control.wpcf7-text,
.wpcf7-form-control.wpcf7-textarea {
  border: none;
  background: #eee;
  line-height: 1.6em;
  font-size: 18px;
  color: #999;
  font-weight: 500;
}
input.wpcf7-form-control.wpcf7-date,
input.wpcf7-form-control.wpcf7-number,
input.wpcf7-form-control.wpcf7-text,
select.wpcf7-form-control.wpcf7-select,
textarea.wpcf7-form-control.wpcf7-textarea {
  width: 100%;
  padding: 16px;
}
input.wpcf7-form-control.wpcf7-submit,
input.wpcf7-form-control.wpcf7-submit:not([disabled]) {
/*   background-color: #4cbc5c; */
  border-color: #8e5329;
  border-style: solid;
  color: #8e5329;
}
input.wpcf7-form-control.wpcf7-text:focus,
input[type="text"]:focus, 
textarea.wpcf7-form-control.wpcf7-textarea:focus {
	color: #3e3e3e;
}
input.wpcf7-form-control.wpcf7-submit:hover,
input.wpcf7-form-control.wpcf7-submit:not([disabled]):hover {
  background-color: #8e5329;
	color: #fff;
}
  
div.wpcf7-response-output {
  background: #fff;
}

@media only screen and (max-width: 992px) {
  .ctoc-home-box .tile__list {
    transition: .3s;
    overflow: hidden;
  }
  .ctoc-pan-image {
    width: 90%;
  }
}

@media only screen and (max-width: 767px) {
    .lbp-contact-heading h2{font-size:20px; line-height:26px;padding:10px 20px;}
    #lbp-contact-form {flex-flow:column;}
	.lbp-contact-topline {
		width: 100%;
	}
  .lbp-camtocanvas {
    gap: calc(var(--gap-lg) * 2) !important;
  }
}.lbp-page-body-text h4{
 margin-bottom:20px;
}
.lbp-about-text img{
 width:20vw;
 max-width:150px;
 min-width:80px;
}
#lbp-home-title-logo{
 width:40vw;
 max-width:250px;
}
#lbp-main-image-block{
background-size: cover; background-repeat:no-repeat;
 display:flex;
 flex-direction:row;
 align-items:center;
 justify-content:center;
 position:relative;
 height:100%;
 width:100%;
 padding-left:20px;
 padding-right:20px;
 overflow:hidden;
 background-position:50% 50%;
}
#-off-canvas-69-978.oxy-off-canvas-toggled.oxy-off-canvas .offcanvas-inner{
transform:translateY(40px); position:absolute;
 bottom:unset ;
 opacity:1;
}
#-off-canvas-69-978.lbp-menu .offcanvas-inner{
 max-width:320px;
 height:80vh;
 width:40vw;
 opacity:0;
 min-height:500px;
}
#_gallery-2-75.oxy-gallery.oxy-gallery-masonry{
}
.no-fouc{
 display:none;
}
body{
-webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; font-size: clamp(1rem, 1.8vw, 1.2rem);
}
@media (max-width: 1120px) {
#_gallery-2-75.oxy-gallery.oxy-gallery-masonry{
column-count: 4 !important;
}
}

@media (max-width: 767px) {
#_gallery-2-75.oxy-gallery.oxy-gallery-masonry{
column-count: 3 !important;
}
}

@media (max-width: 479px) {
#_gallery-2-75.oxy-gallery.oxy-gallery-masonry{
column-count: 2 !important;
}
}

@media (max-width: 767px) {
#-off-canvas-69-978.lbp-menu .offcanvas-inner{
 width:80vw;
}
}

@media (max-width: 479px) {
#lbp-main-image-block{
 padding-left:8px;
 padding-right:8px;
}
}