/* ### 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*/ /* large */ /* BODY text: 21px > 24px */ /* @link https://utopia.fyi/type/calculator?c=320,21,1.2,1400,24,1.25,6,2,&s=0.75|0.5|0.25,1.5|2|3|4|6,s-l */ /*--fs-2: clamp(0.91rem, calc(0.90rem + 0.07vw), 0.96rem); --fs-1: clamp(1.09rem, calc(1.06rem + 0.16vw), 1.20rem); --fs0: clamp(1.31rem, calc(1.26rem + 0.28vw), 1.50rem); --fs1: clamp(3.92rem, calc(3.39rem + 2.67vw), 5.72rem); --fs2: clamp(3.27rem, calc(2.88rem + 1.94vw), 4.58rem); --fs3: clamp(2.72rem, calc(2.44rem + 1.39vw), 3.66rem); --fs4: clamp(2.27rem, calc(2.07rem + 0.98vw), 2.93rem); --fs5: clamp(1.89rem, calc(1.76rem + 0.67vw), 2.34rem); --fs6: clamp(1.58rem, calc(1.49rem + 0.44vw), 1.88rem);*/ /* smaller sizing */ /* BODY text: 18px > 20px */ /* @link https://utopia.fyi/type/calculator?c=320,18,1.2,1400,20,1.25,6,2,&s=0.75|0.5|0.25,1.5|2|3|4|6,s-l */ /*--fs-2: clamp(0.78rem, calc(0.78rem + 0.03vw), 0.80rem); --fs-1: clamp(0.94rem, calc(0.92rem + 0.09vw), 1.00rem); --fs0: clamp(1.13rem, calc(1.09rem + 0.19vw), 1.25rem); --fs1: clamp(3.36rem, calc(2.94rem + 2.09vw), 4.77rem); --fs2: clamp(2.80rem, calc(2.50rem + 1.50vw), 3.82rem); --fs3: clamp(2.33rem, calc(2.12rem + 1.07vw), 3.05rem); --fs4: clamp(1.94rem, calc(1.80rem + 0.74vw), 2.44rem); --fs5: clamp(1.62rem, calc(1.52rem + 0.49vw), 1.95rem); --fs6: clamp(1.35rem, calc(1.29rem + 0.31vw), 1.56rem);*/ /* smaller sizing */ /* BODY text: 18px > 22px */ /* @link https://utopia.fyi/type/calculator/?c=320,18,1.125,1400,22,1.25,6,2,&s=0.75|0.5|0.25,1.5|2|3|4|6,s-l */ /*--fs-2: clamp(0.88rem, calc(0.89rem + -0.01vw), 0.89rem); --fs-1: clamp(1.00rem, calc(0.97rem + 0.15vw), 1.10rem); --fs0: clamp(1.13rem, calc(1.05rem + 0.37vw), 1.38rem); --fs1: clamp(2.28rem, calc(1.40rem + 4.39vw), 5.25rem); --fs2: clamp(2.03rem, calc(1.38rem + 3.21vw), 4.20rem); --fs3: clamp(1.80rem, calc(1.34rem + 2.30vw), 3.36rem); --fs4: clamp(1.60rem, calc(1.28rem + 1.61vw), 2.69rem); --fs5: clamp(1.42rem, calc(1.21rem + 1.07vw), 2.15rem); --fs6: clamp(1.27rem, calc(1.13rem + 0.67vw), 1.72rem);*/ /* smaller again */ /* BODY text: 16px > 20px */ /* @link https://utopia.fyi/type/calculator?c=320,16,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.78rem, calc(0.79rem + -0.01vw), 0.79rem); --fs-1: clamp(0.89rem, calc(0.87rem + 0.07vw), 0.94rem); --fs0: clamp(1.00rem, calc(0.96rem + 0.19vw), 1.13rem); --fs1: clamp(2.03rem, calc(1.63rem + 1.97vw), 3.36rem); --fs2: clamp(1.80rem, calc(1.51rem + 1.48vw), 2.80rem); --fs3: clamp(1.60rem, calc(1.39rem + 1.08vw), 2.33rem); --fs4: clamp(1.42rem, calc(1.27rem + 0.77vw), 1.94rem); --fs5: clamp(1.27rem, calc(1.16rem + 0.53vw), 1.62rem); --fs6: clamp(1.13rem, calc(1.06rem + 0.33vw), 1.35rem);*/ /* @link https://utopia.fyi/type/calculator?c=320,16,1.2,1400,18,1.333,6,2,&s=0.75|0.5|0.25,1.5|2|3|4|6,s-l&g=s,l,xl,12 */ /* BODY text: 16px > 18px */ /*--fs-2: clamp(0.63rem, calc(0.71rem + -0.09vw), 0.69rem); --fs-1: clamp(0.83rem, calc(0.83rem + 0.02vw), 0.84rem); --fs0: clamp(1.00rem, calc(0.96rem + 0.19vw), 1.13rem); --fs1: clamp(2.99rem, calc(2.00rem + 4.93vw), 6.31rem); --fs2: clamp(2.49rem, calc(1.82rem + 3.33vw), 4.74rem); --fs3: clamp(2.07rem, calc(1.64rem + 2.19vw), 3.55rem); --fs4: clamp(1.73rem, calc(1.45rem + 1.39vw), 2.66rem); --fs5: clamp(1.44rem, calc(1.27rem + 0.83vw), 2.00rem); --fs6: clamp(1.20rem, calc(1.11rem + 0.44vw), 1.50rem);*/ /* @link https://utopia.fyi/type/calculator?c=320,18,1.125,1400,26,1.2,6,2,&s=0.75|0.5|0.25,1.5|2|3|4|6,s-l&g=s,l,xl,12 */ /* Large variation from large to small screen */ /*--fs-2: clamp(0.8889rem, 0.8179rem + 0.3549vw, 1.1285rem); --fs-1: clamp(1rem, 0.8951rem + 0.5247vw, 1.3542rem); --fs0: clamp(1.125rem, 0.9769rem + 0.7407vw, 1.625rem); --fs6: clamp(1.2656rem, 1.0628rem + 1.0139vw, 1.95rem); --fs5: clamp(1.4238rem, 1.1524rem + 1.3573vw, 2.34rem); --fs4: clamp(1.6018rem, 1.2444rem + 1.787vw, 2.808rem); --fs3: clamp(1.802rem, 1.3376rem + 2.3223vw, 3.3696rem); --fs2: clamp(2.0273rem, 1.4299rem + 2.987vw, 4.0435rem); --fs1: clamp(2.2807rem, 1.5188rem + 3.8097vw, 4.8522rem);*/ /* BODY text: 15px > 18px */ /* @link https://utopia.fyi/type/calculator/?c=320,15,1.125,1400,18,1.125,6,2,&s=0.75|0.5|0.25,1.5|2|3|4|6,s-l */ --fs-2: clamp(0.74rem, calc(0.70rem + 0.22vw), 0.89rem); --fs-1: clamp(0.83rem, calc(0.78rem + 0.25vw), 1.00rem); --fs0: clamp(0.94rem, calc(0.88rem + 0.28vw), 1.13rem); --fs1: clamp(1.90rem, calc(1.79rem + 0.56vw), 2.28rem); --fs2: clamp(1.69rem, calc(1.59rem + 0.50vw), 2.03rem); --fs3: clamp(1.50rem, calc(1.41rem + 0.44vw), 1.80rem); --fs4: clamp(1.34rem, calc(1.26rem + 0.40vw), 1.60rem); --fs5: clamp(1.19rem, calc(1.12rem + 0.35vw), 1.42rem); --fs6: clamp(1.06rem, calc(0.99rem + 0.31vw), 1.27rem); /* 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); */ /* @link https://utopia.fyi/type/calculator?c=320,14,1.125,1400,16,1.125,6,2,&s=0.75|0.5|0.25,1.5|2|3|4|6,s-l&g=s,l,xl,12 */ --fs-2: clamp(0.6914rem, 0.6621rem + 0.1463vw, 0.7901rem); --fs-1: clamp(0.7778rem, 0.7449rem + 0.1646vw, 0.8889rem); --fs0: clamp(0.875rem, 0.838rem + 0.1852vw, 1rem); --fs1: clamp(1.7739rem, 1.6988rem + 0.3754vw, 2.0273rem); --fs2: clamp(1.5768rem, 1.51rem + 0.3337vw, 1.802rem); --fs3: clamp(1.4016rem, 1.3423rem + 0.2966vw, 1.6018rem); --fs4: clamp(1.2458rem, 1.1931rem + 0.2637vw, 1.4238rem); --fs5: clamp(1.1074rem, 1.0605rem + 0.2344vw, 1.2656rem); --fs6: clamp(0.9844rem, 0.9427rem + 0.2083vw, 1.125rem); /* @link https://utopia.fyi/type/calculator?c=320,13,1.125,1400,14,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.6076rem, 0.6521rem + -0.0509vw, 0.642rem); --fs-1: clamp(0.7222rem, 0.7202rem + 0.0103vw, 0.7292rem); --fs0: clamp(0.8125rem, 0.794rem + 0.0926vw, 0.875rem); --fs6: clamp(0.9141rem, 0.8738rem + 0.2014vw, 1.05rem); --fs5: clamp(1.0283rem, 0.9597rem + 0.3432vw, 1.26rem); --fs4: clamp(1.1569rem, 1.0516rem + 0.5261vw, 1.512rem); --fs3: clamp(1.3015rem, 1.1495rem + 0.7599vw, 1.8144rem); --fs2: clamp(1.4642rem, 1.2529rem + 1.0565vw, 2.1773rem); --fs1: clamp(1.6472rem, 1.3611rem + 1.4305vw, 2.6127rem);*/ /* @link https://utopia.fyi/type/calculator?c=320,13,1.125,1400,14,1.125,6,2,&s=0.75|0.5|0.25,1.5|2|3|4|6,s-l&g=s,l,xl,12 */ --fs-2: clamp(0.642rem, 0.6273rem + 0.0732vw, 0.6914rem); --fs-1: clamp(0.7222rem, 0.7058rem + 0.0823vw, 0.7778rem); --fs0: clamp(0.8125rem, 0.794rem + 0.0926vw, 0.875rem); --fs6: clamp(0.9141rem, 0.8932rem + 0.1042vw, 0.9844rem); --fs5: clamp(1.0283rem, 1.0049rem + 0.1172vw, 1.1074rem); --fs4: clamp(1.1569rem, 1.1305rem + 0.1318vw, 1.2458rem); --fs3: clamp(1.3015rem, 1.2718rem + 0.1483vw, 1.4016rem); --fs2: clamp(1.4642rem, 1.4308rem + 0.1669vw, 1.5768rem); --fs1: clamp(1.6472rem, 1.6096rem + 0.1877vw, 1.7739rem); --fs-xl: clamp(1.77rem, calc(1.30rem + 2.35vw), 3.36rem); --fs-xl: clamp(1.7739rem, 1.4147rem + 1.7957vw, 2.986rem); /* COLOURS */ /* Use Oxygen Global colours that are set within the Oxygen Builder Global Settings To use the variables, simply use eg. color(3) 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: calc(1vw + 8px); --sect-tb: calc(2vw + 20px); /* use for default Oxy SECTION top&bottom padding */ --marg-bottom: 200px; --sect-top: 30px; /* COLUMNS */ /* ...for FLEXBOX centre justification */ /* NOTE: 'Gap' is not necessary if using space-between or space-around justification */ /* NOTE: This framwork was made because the standard CSS 'gap' doesn't work as desired (for FlexBox) This framework enables flexbox 'tiles' to be flush left and right aligned */ /* GLOBAL SIZING VARIABLES: Global gap spacing and default settings - these are the default values throughout the site */ --gap: 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: 19em; /* 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 */ --site-content-width: 1100px; /* 100% for full-width */ --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); --shadow-filt: drop-shadow( 0 0 2px #987); /* ===================*/ /* #### UPDATE ONLY BELOW HERE!! #### */ /* ---- Custom site settings exist above ---- */ /* == VERSION: -v9 - 14 Oct 2025 == */ /* - removed some formatting "restrictions" on nested .grd and .flx (such as .t-p-... ) */ --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); } /* ### TILES INTERNAL PADDING ### */ .flx.t-p-xs > *:not(:has(.tile__inner)), .flx.t-p-xs > * > .tile__inner, .grd.t-p-xs > *:not(:has(.tile__inner)), .grd.t-p-xs > * > .tile__inner { padding: var(--p-xs); } .flx.t-p-sm > *:not(:has(.tile__inner)), .flx.t-p-sm > * > .tile__inner, .grd.t-p-sm > *:not(:has(.tile__inner)), .grd.t-p-sm > * > .tile__inner { padding: var(--p-sm); } .flx.t-p > *:not(:has(.tile__inner)), .flx.t-p > * > .tile__inner, .grd.t-p > *:not(:has(.tile__inner)), .grd.t-p > * > .tile__inner { padding: var(--p); } .flx.t-p-lg > *:not(:has(.tile__inner)), .flx.t-p-lg > * > .tile__inner, .grd.t-p-lg > *:not(:has(.tile__inner)), .grd.t-p-lg > * > .tile__inner { padding: var(--p-lg); } .flx.t-p-xl > *:not(:has(.tile__inner)), .flx.t-p-xl > * > .tile__inner, .grd.t-p-xl > *:not(:has(.tile__inner)), .grd.t-p-xl > * > .tile__inner { padding: var(--p-xl); } /* X and Y axis padding .p-X-Y 1 = xs 2 = sm 3 = default (p or p-md) 4 = lg */ .flx.t-p-1-0 > *:not(:has(> .tile__inner)), .flx.t-p-1-0 > * > .tile__inner, .grd.t-p-1-0 > *:not(:has(> .tile__inner)), .grd.t-p-1-0 > * > .tile__inner { padding: 0 var(--p-xs); } .flx.t-p-0-1 > *:not(:has(> .tile__inner)), .flx.t-p-0-1 > * > .tile__inner, .grd.t-p-0-1 > *:not(:has(> .tile__inner)), .grd.t-p-0-1 > * > .tile__inner, { padding: var(--p-xs) 0; } .flx.t-p-0-2 > *:not(:has(> .tile__inner)), .flx.t-p-0-2 > * > .tile__inner, .grd.t-p-0-2 > *:not(:has(> .tile__inner)), .grd.t-p-0-2 > * > .tile__inner { padding: var(--p-sm) 0; } .flx.t-p-2-0 > *:not(:has(> .tile__inner)), .flx.t-p-2-0 > * > .tile__inner, .grd.t-p-2-0 > *:not(:has(> .tile__inner)), .grd.t-p-2-0 > * > .tile__inner { padding: 0 var(--p-sm); } .flx.t-p-0-3 > *:not(:has(> .tile__inner)), .flx.t-p-0-3 > * > .tile__inner, .grd.t-p-0-3 > *:not(:has(> .tile__inner)), .grd.t-p-0-3 > * > .tile__inner { padding: var(--p) 0; } .flx.t-p-3-0 > *:not(:has(> .tile__inner)), .flx.t-p-3-0 > * > .tile__inner, .grd.t-p-3-0 > *:not(:has(> .tile__inner)), .grd.t-p-3-0 > * > .tile__inner { padding: 0 var(--p); } .flx.t-p-0-4 > *:not(:has(> .tile__inner)), .flx.t-p-0-4 > * > .tile__inner, .grd.t-p-0-4 > *:not(:has(> .tile__inner)), .grd.t-p-0-4 > * > .tile__inner { padding: var(--p-lg) 0; } .flx.t-p-4-0 > *:not(:has(> .tile__inner)), .flx.t-p-4-0 > * > .tile__inner, .grd.t-p-4-0 > *:not(:has(> .tile__inner)), .grd.t-p-4-0 > * > .tile__inner { padding: 0 var(--p-lg); } .flx.t-p-0-5 > *:not(:has(> .tile__inner)), .flx.t-p-0-5 > * > .tile__inner, .grd.t-p-0-5 > *:not(:has(> .tile__inner)), .grd.t-p-0-5 > * > .tile__inner { padding: var(--p-xl) 0; } .flx.t-p-5-0 > *:not(:has(> .tile__inner)), .flx.t-p-5-0 > * > .tile__inner, .grd.t-p-5-0 > *:not(:has(> .tile__inner)), .grd.t-p-5-0 > * > .tile__inner { padding: 0 var(--p-xl); } .flx.t-p-1-2 > *:not(:has(> .tile__inner)), .flx.t-p-1-2 > * > .tile__inner, .grd.t-p-1-2 > *:not(:has(> .tile__inner)), .grd.t-p-1-2 > * > .tile__inner { padding: var(--p-sm) var(--p-xs); } .flx.t-p-2-1 > *:not(:has(> .tile__inner)), .flx.t-p-2-1 > * > .tile__inner, .grd.t-p-2-1 > *:not(:has(> .tile__inner)), .grd.t-p-2-1 > * > .tile__inner { padding: var(--p-xs) var(--p-sm); } .flx.t-p-1-3 > *:not(:has(> .tile__inner)), .flx.t-p-1-3 > * > .tile__inner, .grd.t-p-1-3 > *:not(:has(> .tile__inner)), .grd.t-p-1-3 > * > .tile__inner { padding: var(--p) var(--p-xs); } .flx.t-p-3-1 > *:not(:has(> .tile__inner)), .flx.t-p-3-1 > * > .tile__inner, .grd.t-p-3-1 > *:not(:has(> .tile__inner)), .grd.t-p-3-1 > * > .tile__inner { padding: var(--p-xs) var(--p); } .flx.t-p-2-3 > *:not(:has(> .tile__inner)), .flx.t-p-2-3 > * > .tile__inner, .grd.t-p-2-3 > *:not(:has(> .tile__inner)), .grd.t-p-2-3 > * > .tile__inner { padding: var(--p) var(--p-sm); } .flx.t-p-3-2 > *:not(:has(> .tile__inner)), .flx.t-p-3-2 > * > .tile__inner, .grd.t-p-3-2 > *:not(:has(> .tile__inner)), .grd.t-p-3-2 > * > .tile__inner { padding: var(--p-sm) var(--p); } .flx.t-p-3-4 > *:not(:has(> .tile__inner)), .flx.t-p-3-4 > * > .tile__inner, .grd.t-p-3-4 > *:not(:has(> .tile__inner)), .grd.t-p-3-4 > * > .tile__inner { padding: var(--p-lg) var(--p); } .flx.t-p-4-3 > *:not(:has(> .tile__inner)), .flx.t-p-4-3 > * > .tile__inner, .grd.t-p-4-3 > *:not(:has(> .tile__inner)), .grd.t-p-4-3 > * > .tile__inner { padding: var(--p) var(--p-lg); } .flx.t-p-2-4 > *:not(:has(> .tile__inner)), .flx.t-p-2-4 > * > .tile__inner, .grd.t-p-2-4 > *:not(:has(> .tile__inner)), .grd.t-p-2-4 > * > .tile__inner { padding: var(--p-lg) var(--p-sm); } .flx.t-p-4-2 > *:not(:has(> .tile__inner)), .flx.t-p-4-2 > * > .tile__inner, .grd.t-p-4-2 > *:not(:has(> .tile__inner)), .grd.t-p-4-2 > * > .tile__inner { padding: var(--p-sm) var(--p-lg); } .flx.t-p-1-4 > *:not(:has(> .tile__inner)), .flx.t-p-1-4 > * > .tile__inner, .grd.t-p-1-4 > *:not(:has(> .tile__inner)), .grd.t-p-1-4 > * > .tile__inner { padding: var(--p-lg) var(--p-xs); } .flx.t-p-4-1 > *:not(:has(> .tile__inner)), .flx.t-p-4-1 > * > .tile__inner, .grd.t-p-4-1 > *:not(:has(> .tile__inner)), .grd.t-p-4-1 > * > .tile__inner { padding: var(--p-xs) var(--p-lg); } .flx.t-p-1-5 > *:not(:has(> .tile__inner)), .flx.t-p-1-5 > * > .tile__inner, .grd.t-p-1-5 > *:not(:has(> .tile__inner)), .grd.t-p-1-5 > * > .tile__inner { padding: var(--p-xl) var(--p-xs); } .flx.t-p-5-1 > *:not(:has(> .tile__inner)), .flx.t-p-5-1 > * > .tile__inner, .grd.t-p-5-1 > *:not(:has(> .tile__inner)), .grd.t-p-5-1 > * > .tile__inner { padding: var(--p-xs) var(--p-xl); } /*.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); } .flx.t-p-xl > *:not(.grd):not(.flx):not(:has(.tile__inner)), .flx.t-p-xl > * > .tile__inner, .grd.t-p-xl > *:not(.grd):not(.flx):not(:has(.tile__inner)), .grd.t-p-xl > * > .tile__inner { padding: var(--p-xl); }*/ /* X and Y axis padding .p-X-Y 1 = xs 2 = sm 3 = default (p or p-md) 4 = lg *//* .flx.t-p-1-0 > *:not(.grd):not(.flx):not(:has(.tile__inner)), .flx.t-p-1-0 > * > .tile__inner > *, .grd.t-p-1-0 > *:not(.grd):not(.flx):not(:has(.tile__inner)), .grd.t-p-1-0 > * > .tile__inner > * { padding: 0 var(--p-xs); } .flx.t-p-0-1 > *:not(.grd):not(.flx):not(:has(.tile__inner)), .flx.t-p-0-1 > * > .tile__inner > *, .grd.t-p-0-1 > *:not(.grd):not(.flx):not(:has(.tile__inner)), .grd.t-p-0-1 > * > .tile__inner > * { padding: var(--p-xs) 0; } .flx.t-p-0-2 > *:not(.grd):not(.flx):not(:has(.tile__inner)), .flx.t-p-0-2 > * > .tile__inner > *, .grd.t-p-0-2 > *:not(.grd):not(.flx):not(:has(.tile__inner)), .grd.t-p-0-2 > * > .tile__inner > * { padding: var(--p-sm) 0; } .flx.t-p-2-0 > *:not(.grd):not(.flx):not(:has(.tile__inner)), .flx.t-p-2-0 > * > .tile__inner > *, .grd.t-p-2-0 > *:not(.grd):not(.flx):not(:has(.tile__inner)), .grd.t-p-2-0 > * > .tile__inner > * { padding: 0 var(--p-sm); } .flx.t-p-0-3 > *:not(.grd):not(.flx):not(:has(.tile__inner)), .flx.t-p-0-3 > * > .tile__inner > *, .grd.t-p-0-3 > *:not(.grd):not(.flx):not(:has(.tile__inner)), .grd.t-p-0-3 > * > .tile__inner > * { padding: var(--p) 0; } .flx.t-p-3-0 > *:not(.grd):not(.flx):not(:has(.tile__inner)), .flx.t-p-3-0 > * > .tile__inner > *, .grd.t-p-3-0 > *:not(.grd):not(.flx):not(:has(.tile__inner)), .grd.t-p-3-0 > * > .tile__inner > * { padding: 0 var(--p); } .flx.t-p-0-4 > *:not(.grd):not(.flx):not(:has(.tile__inner)), .flx.t-p-0-4 > * > .tile__inner > *, .grd.t-p-0-4 > *:not(.grd):not(.flx):not(:has(.tile__inner)), .grd.t-p-0-4 > * > .tile__inner > * { padding: var(--p-lg) 0; } .flx.t-p-4-0 > *:not(.grd):not(.flx):not(:has(.tile__inner)), .flx.t-p-4-0 > * > .tile__inner > *, .grd.t-p-4-0 > *:not(.grd):not(.flx):not(:has(.tile__inner)), .grd.t-p-4-0 > * > .tile__inner > * { padding: 0 var(--p-lg); } .flx.t-p-0-5 > *:not(.grd):not(.flx):not(:has(.tile__inner)), .flx.t-p-0-5 > * > .tile__inner > *, .grd.t-p-0-5 > *:not(.grd):not(.flx):not(:has(.tile__inner)), .grd.t-p-0-5 > * > .tile__inner > * { padding: var(--p-xl) 0; } .flx.t-p-5-0 > *:not(.grd):not(.flx):not(:has(.tile__inner)), .flx.t-p-5-0 > * > .tile__inner > *, .grd.t-p-5-0 > *:not(.grd):not(.flx):not(:has(.tile__inner)), .grd.t-p-5-0 > * > .tile__inner > * { padding: 0 var(--p-xl); } .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; } .flx-col.tiles-center, .flx-col.tiles-centre { align-items: 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; } .flx .c-left, .grd .c-left { justify-content: flex-start; text-align: left; } .flx .c-right, .grd .c-right { justify-content: flex-end; text-align: right; } .flx .c-centre, .grd .c-centre { justify-content: center; text-align: center; } .flx-between, .c-between { display: flex; justify-content: space-between; } .flx-around, .c-around { justify-content: space-around; } .full-span { grid-column: 1 / -1; flex: 1 0 100%; max-width: unset; } .full-width { /* for section div */ max-width: 100% !important; } .txt-center > *, .txt-centre > * { text-align: center; } .flx.contents-center > *:not(.grd), .flx.contents-center .tile__inner:not(.grd) > *:not(.grd) { align-items: center; text-align: center !important; } .grd.contents-center > *:not(.flx), .grd.contents-center .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;*/ align-items: 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-grow: 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%); } .fixed-top { position: fixed; top: 0; left: 0; right: 0; } /* ### Use only classes that are necessary ### */ .tile__inner, /* Used inside of the div in Oxy REPEATER. This div can have an href applied */ .tile__header, .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; /* alternative - inset light text on dark background */ /*background-color: #ffffff; -webkit-background-clip: text; -moz-background-clip: text; background-clip: text; color: #ffffff61; text-shadow: rgb(0 0 0 / 76%) 1px -1px 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% } /* legal list styles */ .legal { ol { list-style-type: none; } ol { counter-reset:top sub subsub; padding-inline-start: 1.7em; } ol ol{ counter-reset:sub; padding-inline-start: 2em; } ol ol ol{ counter-reset:subsub; padding-inline-start: 2.4em; } ol li:before { counter-increment:top; content: counter(top) ". "; margin-left: -1.7em; width: 1.7em; display: inline-block; } ol ol li:before { counter-increment:sub; content: counter(top) "." counter(sub) " "; margin-left: -2em; width: 2em; display: inline-block; } ol ol ol li:before { counter-increment:subsub; content: counter(top) "." counter(sub) "." counter(subsub) " "; margin-left: -2.4em; width: 2.4em; display: inline-block; } } /* 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; } } /*
formatting */ * br { content: ""; display: block; margin-top: 8px; } img { max-width: 100%; /*height: auto;*/ } /*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); } .top-p0 { padding-top: 0; } .bottom-p0 { padding-bottom: 0; } .pad-tb0 { padding-top: 0; padding-bottom: 0; } /* X and Y axis padding .p-X-Y 1 = xs 2 = sm 3 = default 4 = lg */ .p-0-1, .p-0-2, .p-0-3, .p-0-4, .p-0-5 { padding-left: 0; padding-right: 0; } .p-1-0, .p-1-2, .p-1-3, .p-1-4, .p-1-5 { padding-left: var(--p-xs); padding-right: var(--p-xs); } .p-2-0, .p-2-1, .p-2-3, .p-2-4, .p-2-5 { padding-left: var(--p-sm); padding-right: var(--p-sm); } .p-3-0, .p-3-1, .p-3-2, .p-3-4, .p-3-5 { padding-left: var(--p); padding-right: var(--p); } .p-4-0, .p-4-1, .p-4-2, .p-4-3, .p-4-5 { padding-left: var(--p-lg); padding-right: var(--p-lg); } .p-5-0, .p-5-1, .p-5-2, .p-5-3, .p-5-4 { padding-left: var(--p-xl); padding-right: var(--p-xl); } .p-0-1, .p-2-1, .p-3-1, .p-4-1, .p-5-1 { padding-top: var(--p-xs); padding-bottom: var(--p-xs); } .p-0-2, .p-1-2, .p-3-2, .p-4-2, .p-5-2 { padding-top: var(--p-sm); padding-bottom: var(--p-sm); } .p-0-3, .p-1-3, .p-2-3, .p-4-3, .p-5-3 { padding-top: var(--p); padding-bottom: var(--p); } .p-0-4, .p-1-4, .p-2-4, .p-3-4, .p-5-4 { padding-top: var(--p-lg); padding-bottom: var(--p-lg); } .p-0-5, .p-1-5, .p-2-5, .p-3-5, .p-4-5 { padding-top: var(--p-xl); padding-bottom: var(--p-xl); } .bdr-rad-xs { border-radius: var(--bdr-rad-xs); } .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; }