/* Helper selectors * These are a range of selectors that you can use in the theme or in blocks to save time * You only need to change the values below, all the other values are scaled based on the device size. /* Base scale factor */ :root { --scale-factor: 1; /* This is used to scale down the OLD padding and margins using media queries for smaller screens. Note the media queries at the bottom of this file */ /* Base Padding Variables - changing these affects all the new padding sizes site-wide. */ --padding-xxs: 1rem; --padding-xs: 2rem; --padding-s: 3rem; --padding-m: 4rem; --padding-l: 5rem; --padding-xl: 6rem; --padding-xxl: 7rem; --padding-xxxl: 8rem; /* Base Margin Variables - changing these affects all the new margin sizes site-wide. */ --margin-xxs: 1rem; --margin-xs: 2rem; --margin-s: 3rem; --margin-m: 4rem; --margin-l: 5rem; --margin-xl: 6rem; --margin-xxl: 7rem; --margin-xxxl: 8rem; } @media (max-width: 768px) { :root { /* IPAD Base Padding Variables - changing these affects all the new padding sizes site-wide. */ --padding-xxs: .5rem; --padding-xs: 1rem; --padding-s: 1.5rem; --padding-m: 2rem; --padding-l: 2.5rem; --padding-xl: 3rem; --padding-xxl: 3.5rem; --padding-xxxl: 4rem; /* IPAD Base Margin Variables - changing these affects all the new margin sizes site-wide. */ --margin-xxs: .5rem; --margin-xs: 1rem; --margin-s: 1.5rem; --margin-m: 2rem; --margin-l: 2.5rem; --margin-xl: 3rem; --margin-xxl: 3.5rem; --margin-xxxl: 4rem; } } @media (max-width: 576px) { :root { /* PHONE Base Padding Variables - changing these affects all the new padding sizes site-wide. */ --padding-xxs: .25rem; --padding-xs: .5rem; --padding-s: .75rem; --padding-m: 1rem; --padding-l: 1.25rem; --padding-xl: 1.5rem; --padding-xxl: 1.75rem; --padding-xxxl: 2rem; /* PHONE Base Margin Variables - changing these affects all the new margin sizes site-wide. */ --margin-xxs: .25rem; --margin-xs: .5rem; --margin-s: .75rem; --margin-m: 1rem; --margin-l: 1.25rem; --margin-xl: 1.5rem; --margin-xxl: 1.75rem; --margin-xxxl: 2rem; } } /* That's it. * You don't need to change anything below this line. -------------------------------------------------------------------------------*/ /* These are the padding and margin settings for above and below blocks. Please adjust these to suit the design - you only need to change variable - note that media queries are replaced by Clamp here */ :root { /* Section padding clamps */ --section-padding-min: 4rem; --section-padding-fluid: 8vw; --section-padding-max: 8rem; --section-padding-large-min: 6rem; --section-padding-large-fluid: 12vw; --section-padding-large-max: 12rem; /* Section margin clamps */ --section-margin-min: 2.5rem; --section-margin-fluid: 5vw; --section-margin-max: 5rem; --section-margin-large-min: 5rem; --section-margin-large-fluid: 10vw; --section-margin-large-max: 10rem; } /* Section Padding */ .padding-bottom, .pb { padding-bottom: clamp(var(--section-padding-min), var(--section-padding-fluid), var(--section-padding-max)); } .padding-top, .pt { padding-top: clamp(var(--section-padding-min), var(--section-padding-fluid), var(--section-padding-max)); } .padding-both, .pbth { padding-top: clamp(var(--section-padding-min), var(--section-padding-fluid), var(--section-padding-max)); padding-bottom: clamp(var(--section-padding-min), var(--section-padding-fluid), var(--section-padding-max)); } .large-padding-bottom, .lpb { padding-bottom: clamp(var(--section-padding-large-min), var(--section-padding-large-fluid), var(--section-padding-large-max)); } .large-padding-top, .lpt { padding-top: clamp(var(--section-padding-large-min), var(--section-padding-large-fluid), var(--section-padding-large-max)); } .large-padding-both, .lpbth { padding-top: clamp(var(--section-padding-large-min), var(--section-padding-large-fluid), var(--section-padding-large-max)); padding-bottom: clamp(var(--section-padding-large-min), var(--section-padding-large-fluid), var(--section-padding-large-max)); } /* Section Margin */ .margin-bottom, .mb { margin-bottom: clamp(var(--section-margin-min), var(--section-margin-fluid), var(--section-margin-max)); } .margin-top, .mt { margin-top: clamp(var(--section-margin-min), var(--section-margin-fluid), var(--section-margin-max)); } .margin-both, .mbth { margin-top: clamp(var(--section-margin-min), var(--section-margin-fluid), var(--section-margin-max)); margin-bottom: clamp(var(--section-margin-min), var(--section-margin-fluid), var(--section-margin-max)); } .large-margin-bottom, .lmb { margin-bottom: clamp(var(--section-margin-large-min), var(--section-margin-large-fluid), var(--section-margin-large-max)); } .large-margin-top, .lmt { margin-top: clamp(var(--section-margin-large-min), var(--section-margin-large-fluid), var(--section-margin-large-max)); } .large-margin-both, .lmbth { margin-top: clamp(var(--section-margin-large-min), var(--section-margin-large-fluid), var(--section-margin-large-max)); margin-bottom: clamp(var(--section-margin-large-min), var(--section-margin-large-fluid), var(--section-margin-large-max)); } .client-work .column-content { min-height: 30vw;} .client-work-40 .column-content { min-height: 40vw;} .client-work-50 .column-content { min-height: 40vw;} .client-work-60 .column-content { min-height: 40vw;} .client-work-70 .column-content { min-height: 40vw;} .client-work-80 .column-content { min-height: 40vw;} .itl { background-position: top left !important; } .itc { background-position: top center !important; } .itr { background-position: top right !important; } .icl { background-position: center left !important; } .icc { background-position: center center !important; } .icr { background-position: center right !important; } .ibl { background-position: bottom left; !important } .ibc { background-position: bottom center; !important } .ibr { background-position: bottom right; !important } .bgcon { background-size: contain !important; } .r50 { max-width: 50%; } /* Fine tuning padding and margings */ /* Padding Classes */ .plxxs { padding-left: var(--padding-xxs); } .prxxs { padding-right: var(--padding-xxs); } .ptxxs { padding-top: var(--padding-xxs); } .pbxxs { padding-bottom: var(--padding-xxs); } .pbthxxs { padding-top: var(--padding-xxs); padding-bottom: var(--padding-xxs); } .pxxs { padding: var(--padding-xxs); } .plxs { padding-left: var(--padding-xs); } .prxs { padding-right: var(--padding-xs); } .ptxs { padding-top: var(--padding-xs); } .pbxs { padding-bottom: var(--padding-xs); } .pbthxs { padding-top: var(--padding-xs); padding-bottom: var(--padding-xs); } .pxs { padding: var(--padding-xs); } .pls { padding-left: var(--padding-s); } .prs { padding-right: var(--padding-s); } .pts { padding-top: var(--padding-s); } .pbs { padding-bottom: var(--padding-s); } .pbths { padding-top: var(--padding-s); padding-bottom: var(--padding-s); } .ps { padding: var(--padding-s); } .plm { padding-left: var(--padding-m); } .prm { padding-right: var(--padding-m); } .ptm { padding-top: var(--padding-m); } .pbm { padding-bottom: var(--padding-m); } .pbthm { padding-top: var(--padding-m); padding-bottom: var(--padding-m); } .pm { padding: var(--padding-m); } .pll { padding-left: var(--padding-l); } .prl { padding-right: var(--padding-l); } .ptl { padding-top: var(--padding-l); } .pbl { padding-bottom: var(--padding-l); } .pbthl { padding-top: var(--padding-l); padding-bottom: var(--padding-l); } .pl { padding: var(--padding-l); } .plxl { padding-left: var(--padding-xl); } .prxl { padding-right: var(--padding-xl); } .ptxl { padding-top: var(--padding-xl); } .pbxl { padding-bottom: var(--padding-xl); } .pbthxl { padding-top: var(--padding-xl); padding-bottom: var(--padding-xl); } .pxl { padding: var(--padding-xl); } .plxxl { padding-left: var(--padding-xxl); } .prxxl { padding-right: var(--padding-xxl); } .ptxxl { padding-top: var(--padding-xxl); } .pbxxl { padding-bottom: var(--padding-xxl); } .pbthxxl { padding-top: var(--padding-xxl); padding-bottom: var(--padding-xxl); } .pxxl { padding: var(--padding-xxl); } .plxxxl { padding-left: var(--padding-xxxl); } .prxxxl { padding-right: var(--padding-xxxl); } .ptxxxl { padding-top: var(--padding-xxxl); } .pbxxxl { padding-bottom: var(--padding-xxxl); } .pbthxxxl { padding-top: var(--padding-xxxl); padding-bottom: var(--padding-xxxl); } .pxxxl { padding: var(--padding-xxxl); } /* Margin Classes */ .mlxxs { margin-left: var(--margin-xxs); } .mrxxs { margin-right: var(--margin-xxs); } .mtxxs { margin-top: var(--margin-xxs); } .mbxxs { margin-bottom: var(--margin-xxs); } .mbthxxs { margin-top: var(--margin-xxs); margin-bottom: var(--margin-xxs); } .mxxs { margin: var(--margin-xxs); } .mlxs { margin-left: var(--margin-xs); } .mrxs { margin-right: var(--margin-xs); } .mtxs { margin-top: var(--margin-xs); } .mbxs { margin-bottom: var(--margin-xs); } .mbthxs { margin-top: var(--margin-xs); margin-bottom: var(--margin-xs); } .mxs { margin: var(--margin-xs); } .mls { margin-left: var(--margin-s); } .mrs { margin-right: var(--margin-s); } .mts { margin-top: var(--margin-s); } .mbs { margin-bottom: var(--margin-s); } .mbths { margin-top: var(--margin-s); margin-bottom: var(--margin-s); } .ms { margin: var(--margin-s); } .mlm { margin-left: var(--margin-m); } .mrm { margin-right: var(--margin-m); } .mtm { margin-top: var(--margin-m); } .mbm { margin-bottom: var(--margin-m); } .mbthm { margin-top: var(--margin-m); margin-bottom: var(--margin-m); } .mm { margin: var(--margin-m); } .mll { margin-left: var(--margin-l); } .mrl { margin-right: var(--margin-l); } .mtl { margin-top: var(--margin-l); } .mbl { margin-bottom: var(--margin-l); } .mbthl { margin-top: var(--margin-l); margin-bottom: var(--margin-l); } .ml { margin: var(--margin-l); } .mlxl { margin-left: var(--margin-xl); } .mrxl { margin-right: var(--margin-xl); } .mtxl { margin-top: var(--margin-xl); } .mbxl { margin-bottom: var(--margin-xl); } .mbthxl { margin-top: var(--margin-xl); margin-bottom: var(--margin-xl); } .mxl { margin: var(--margin-xl); } .mlxxl { margin-left: var(--margin-xxl); } .mrxxl { margin-right: var(--margin-xxl); } .mtxxl { margin-top: var(--margin-xxl); } .mbxxl { margin-bottom: var(--margin-xxl); } .mbthxxl { margin-top: var(--margin-xxl); margin-bottom: var(--margin-xxl); } .mxxl { margin: var(--margin-xxl); } .mlxxxl { margin-left: var(--margin-xxxl); } .mrxxxl { margin-right: var(--margin-xxxl); } .mtxxxl { margin-top: var(--margin-xxxl); } .mbxxxl { margin-bottom: var(--margin-xxxl); } .mbthxxxl { margin-top: var(--margin-xxxl); margin-bottom: var(--margin-xxxl); } .mxxxl { margin: var(--margin-xxxl); } /* Borders */ /* 1px borders */ .b1-1 { border: 1px solid var(--brand-1); } .b1-2 { border: 1px solid var(--brand-2); } .b1-3 { border: 1px solid var(--brand-3); } .b1-4 { border: 1px solid var(--brand-4); } .b1-5 { border: 1px solid var(--brand-5); } .b1-6 { border: 1px solid var(--brand-6); } .b1-7 { border: 1px solid var(--brand-7); } .b1-8 { border: 1px solid var(--brand-8); } /* 2px borders */ .b2-1 { border: 2px solid var(--brand-1); } .b2-2 { border: 2px solid var(--brand-2); } .b2-3 { border: 2px solid var(--brand-3); } .b2-4 { border: 2px solid var(--brand-4); } .b2-5 { border: 2px solid var(--brand-5); } .b2-6 { border: 2px solid var(--brand-6); } .b2-7 { border: 2px solid var(--brand-7); } .b2-8 { border: 2px solid var(--brand-8); } /* 3px borders */ .b3-1 { border: 3px solid var(--brand-1); } .b3-2 { border: 3px solid var(--brand-2); } .b3-3 { border: 3px solid var(--brand-3); } .b3-4 { border: 3px solid var(--brand-4); } .b3-5 { border: 3px solid var(--brand-5); } .b3-6 { border: 3px solid var(--brand-6); } .b3-7 { border: 3px solid var(--brand-7); } .b3-8 { border: 3px solid var(--brand-8); } /* 4px borders */ .b4-1 { border: 4px solid var(--brand-1); } .b4-2 { border: 4px solid var(--brand-2); } .b4-3 { border: 4px solid var(--brand-3); } .b4-4 { border: 4px solid var(--brand-4); } .b4-5 { border: 4px solid var(--brand-5); } .b4-6 { border: 4px solid var(--brand-6); } .b4-7 { border: 4px solid var(--brand-7); } .b4-8 { border: 4px solid var(--brand-8); } /* 5px borders */ .b5-1 { border: 5px solid var(--brand-1); } .b5-2 { border: 5px solid var(--brand-2); } .b5-3 { border: 5px solid var(--brand-3); } .b5-4 { border: 5px solid var(--brand-4); } .b5-5 { border: 5px solid var(--brand-5); } .b5-6 { border: 5px solid var(--brand-6); } .b5-7 { border: 5px solid var(--brand-7); } .b5-8 { border: 5px solid var(--brand-8); } /* Border Radius */ /* All corners */ .br1 { border-radius: 1rem; } .br2 { border-radius: 2rem; } .br3 { border-radius: 3rem; } .br4 { border-radius: 4rem; } .br5 { border-radius: 5rem; } .br6 { border-radius: 6rem; } .br7 { border-radius: 7rem; } .br8 { border-radius: 8rem; } .br9 { border-radius: 9rem; } .br10 { border-radius: 10rem; } /* Background Colors */ .bg1 { background-color: var(--brand-1); color: #fff !important; } .bg2 { background-color: var(--brand-2); color: #fff !important; } .bg3 { background-color: var(--brand-3); color: #fff !important; } .bg4 { background-color: var(--brand-4); color: #fff !important; } .bg5 { background-color: var(--brand-5); color: #fff !important; } .bg6 { background-color: var(--brand-6); color: #fff !important; } .bg7 { background-color: var(--brand-7); color: #fff !important; } .bg8 { background-color: var(--brand-8); color: #fff !important; } .bgw { background-color: #fff; } /* Background Headings */ :is(.bg1, .bg2, .bg3, .bg4, .bg5, .bg6, .bg7, .bg8) :is(h1, h2, h3, h4, h5, h6) {color: #fff !important; } /* Boxes and Tiles */ .boxed { box-shadow: var(--shadow) 0px 20px 25px -5px, rgba(0, 0, 0, 1) 0px 10px 10px -5px; } .boxed p:last-of-type { margin-bottom: 0; } /* Text Colors */ .txt1 { color: var(--brand-1) !important; } .txt2 { color: var(--brand-2) !important; } .txt3 { color: var(--brand-3) !important; } .txt4 { color: var(--brand-4) !important; } .white-text { color: #fff !important; } /* Font Sizes */ .fs1 { font-size: 1rem; } .fs2 { font-size: 2rem; } .fs3 { font-size: 3rem; } .fs4 { font-size: 4rem; } .fs5 { font-size: 5rem; } .fs6 { font-size: 6rem; } .fs7 { font-size: 7rem; } .fs8 { font-size: 8rem; } .fs9 { font-size: 9rem; } .fs10 { font-size: 10rem; } /* Alignments */ .tac { text-align: center; } .tal { text-align: left; } .tar { text-align: right; } .vt { vertical-align: top; } .vb { vertical-align: bottom; } /* Display */ .ib { display: inline-block; } .il { display: inline; } .blk { display: block; } /* Positioning */ .sticky { position: sticky; top: 20rem; } .rel { position: relative; } .ab { position: absolute; } :is(.z-1, .z0, .z1, .z2, .z3, .z4, .z5, .z6, .z7, .z8, .z9, .z10) {position: relative; } .z-1 { z-index: -1; } .z0 { z-index: 0; } .z1 { z-index: 1; } .z2 { z-index: 2; } .z3 { z-index: 3; } .z4 { z-index: 4; } .z5 { z-index: 5; } .z6 { z-index: 6; } .z7 { z-index: 7; } .z8 { z-index: 8; } .z9 { z-index: 9; } .z10 { z-index: 10; } /**Images**/ .multiply img, img.multiply { mix-blend-mode: multiply; } .full-width-image img { width: 100%;} /*Alignment*/ .align-right{text-align:right} .align-center, .centered, .aligncenter {text-align:center;} .align-left {text-align: left;} /* ============================================================ FLEXBOX UTILITIES ============================================================ Usage: combine classes on any element, e.g.:
Responsive variants use the same breakpoints as the rest of helper-styles.css: -lg = max-width: 1024px (tablet landscape and below) -md = max-width: 768px (tablet portrait and below) -sm = max-width: 576px (mobile and below) Example:
will be a row on desktop and switch to a column on mobile only. ============================================================ */ /* ------------------------------------------------------------ Base - Display ------------------------------------------------------------ */ .flex { display: flex; } /* ------------------------------------------------------------ Direction ------------------------------------------------------------ */ .flex-col { flex-direction: column; /*height: 100%; remove if parent has no given height */ } .flex-col-reverse { flex-direction: column-reverse; } .flex-row-reverse { flex-direction: row-reverse; } /* ------------------------------------------------------------ Wrapping ------------------------------------------------------------ */ .flex-wrap { flex-wrap: wrap; } .flex-nowrap { flex-wrap: nowrap; } /* ------------------------------------------------------------ Justify Content (main axis) ------------------------------------------------------------ */ .justify-start { justify-content: flex-start; } .justify-end { justify-content: flex-end; } .justify-center { justify-content: center; } .justify-between { justify-content: space-between; } .justify-around { justify-content: space-around; } .justify-evenly { justify-content: space-evenly; } /* ------------------------------------------------------------ Align Items (cross axis) ------------------------------------------------------------ */ .align-start { align-items: flex-start; } .align-end { align-items: flex-end; } .align-center { align-items: center; } .align-stretch { align-items: stretch; } .align-baseline { align-items: baseline; } /* ------------------------------------------------------------ Flex Sizing ------------------------------------------------------------ */ .flex-1 { flex: 1; } /* grow and fill available space */ .flex-grow { flex-grow: 1; } /* grow but don't set shrink/basis */ .flex-shrink-0 { flex-shrink: 0; } /* prevent shrinking (e.g. icons, logos) */ /* ------------------------------------------------------------ Responsive - Tablet Landscape (max-width: 1024px) ------------------------------------------------------------ */ @media (max-width: 1024px) { .flex-lg { display: flex; } .flex-col-lg { flex-direction: column; } .flex-col-reverse-lg { flex-direction: column-reverse; } .flex-row-reverse-lg { flex-direction: row-reverse; } .flex-wrap-lg { flex-wrap: wrap; } .flex-nowrap-lg { flex-wrap: nowrap; } .justify-start-lg { justify-content: flex-start; } .justify-end-lg { justify-content: flex-end; } .justify-center-lg { justify-content: center; } .justify-between-lg { justify-content: space-between; } .justify-around-lg { justify-content: space-around; } .justify-evenly-lg { justify-content: space-evenly; } .align-start-lg { align-items: flex-start; } .align-end-lg { align-items: flex-end; } .align-center-lg { align-items: center; } .align-stretch-lg { align-items: stretch; } .align-baseline-lg { align-items: baseline; } .flex-1-lg { flex: 1; } .flex-grow-lg { flex-grow: 1; } .flex-shrink-0-lg { flex-shrink: 0; } } /* ------------------------------------------------------------ Responsive - Tablet Portrait (max-width: 768px) ------------------------------------------------------------ */ @media (max-width: 768px) { .flex-md { display: flex; } .flex-col-md { flex-direction: column; } .flex-col-reverse-md { flex-direction: column-reverse; } .flex-row-reverse-md { flex-direction: row-reverse; } .flex-wrap-md { flex-wrap: wrap; } .flex-nowrap-md { flex-wrap: nowrap; } .justify-start-md { justify-content: flex-start; } .justify-end-md { justify-content: flex-end; } .justify-center-md { justify-content: center; } .justify-between-md { justify-content: space-between; } .justify-around-md { justify-content: space-around; } .justify-evenly-md { justify-content: space-evenly; } .align-start-md { align-items: flex-start; } .align-end-md { align-items: flex-end; } .align-center-md { align-items: center; } .align-stretch-md { align-items: stretch; } .align-baseline-md { align-items: baseline; } .flex-1-md { flex: 1; } .flex-grow-md { flex-grow: 1; } .flex-shrink-0-md { flex-shrink: 0; } } /* ------------------------------------------------------------ Responsive - Mobile (max-width: 576px) ------------------------------------------------------------ */ @media (max-width: 576px) { .flex-sm { display: flex; } .flex-col-sm { flex-direction: column; } .flex-col-reverse-sm { flex-direction: column-reverse; } .flex-row-reverse-sm { flex-direction: row-reverse; } .flex-wrap-sm { flex-wrap: wrap; } .flex-nowrap-sm { flex-wrap: nowrap; } .justify-start-sm { justify-content: flex-start; } .justify-end-sm { justify-content: flex-end; } .justify-center-sm { justify-content: center; } .justify-between-sm { justify-content: space-between; } .justify-around-sm { justify-content: space-around; } .justify-evenly-sm { justify-content: space-evenly; } .align-start-sm { align-items: flex-start; } .align-end-sm { align-items: flex-end; } .align-center-sm { align-items: center; } .align-stretch-sm { align-items: stretch; } .align-baseline-sm { align-items: baseline; } .flex-1-sm { flex: 1; } .flex-grow-sm { flex-grow: 1; } .flex-shrink-0-sm { flex-shrink: 0; } } /**NEVER REMOVE**/ .wp-block{font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica Neue,sans-serif;}