/* 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-xs: 1rem; --padding-s: 2rem; --padding-m: 3rem; --padding-l: 5rem; --padding-xl: 8rem; --padding-xxl: 10rem; /* Base Margin Variables - changing these affects all the new margin sizes site-wide. */ --margin-xs: 1rem; --margin-s: 2rem; --margin-m: 3rem; --margin-l: 5rem; --margin-xl: 8rem; --margin-xxl: 10rem; /* Media Query scaling */ --tablet-scale: 0; /* Divide by this for max-width: 768px */ --mobile-scale: 1.5; /* Divide by this for max-width: 576px */ } /* That's it. * You don't need to change anything below this line. -------------------------------------------------------------------------------*/ /* Padding Classes */ .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); } /* Margin Classes */ .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); } /* These are the padding and margin settings for above and below blocks. Please adjust these to suit the design */ /*Paddings*/ .padding-bottom, .pb { padding-bottom: calc(8rem * var(--scale-factor)); } .padding-top, .pt { padding-top: calc(8rem * var(--scale-factor)); } .padding-both, .pbth { padding-bottom: calc(8rem * var(--scale-factor)); padding-top: calc(8rem * var(--scale-factor)); } .large-padding-bottom, .lpb { padding-bottom: calc(12rem * var(--scale-factor)); } .large-padding-top, .lpt { padding-top: calc(12rem * var(--scale-factor)); } .large-padding-both, .lpbth { padding-bottom: calc(12rem * var(--scale-factor)); padding-top: calc(12rem * var(--scale-factor)); } /**Margins**/ .margin-bottom, .mb { margin-bottom: calc(5rem * var(--scale-factor)); } .margin-top, .mt { margin-top: calc(5rem * var(--scale-factor)); } .margin-both, .mbth { margin-bottom: calc(5rem * var(--scale-factor)); margin-top: calc(5rem * var(--scale-factor)); } .large-margin-bottom, .lmb { margin-bottom: calc(10rem * var(--scale-factor)); } .large-margin-top, .lmt { margin-top: calc(10rem * var(--scale-factor)); } .large-margin-both, .lmbth { margin-bottom: calc(10rem * var(--scale-factor)); margin-top: calc(10rem * var(--scale-factor)); } /* These are the new xs, s, m, l, xl and xxl classes */ /* Media queries - the values are divided by the scaling set above */ /*@media (max-width: 768px) { :root { --padding-xs: calc(var(--padding-xs) / var(--tablet-scale)); --padding-s: calc(var(--padding-s) / var(--tablet-scale)); --padding-m: calc(var(--padding-m) / var(--tablet-scale)); --padding-l: calc(var(--padding-l) / var(--tablet-scale)); --padding-xl: calc(var(--padding-xl) / var(--tablet-scale)); --padding-xxl: calc(var(--padding-xxl) / var(--tablet-scale)); --margin-xs: calc(var(--margin-xs) / var(--tablet-scale)); --margin-s: calc(var(--margin-s) / var(--tablet-scale)); --margin-m: calc(var(--margin-m) / var(--tablet-scale)); --margin-l: calc(var(--margin-l) / var(--tablet-scale)); --margin-xl: calc(var(--margin-xl) / var(--tablet-scale)); --margin-xxl: calc(var(--margin-xxl) / var(--tablet-scale)); } } @media (max-width: 576px) { :root { --padding-xs: calc(var(--padding-xs) / var(--mobile-scale)); --padding-s: calc(var(--padding-s) / var(--mobile-scale)); --padding-m: calc(var(--padding-m) / var(--mobile-scale)); --padding-l: calc(var(--padding-l) / var(--mobile-scale)); --padding-xl: calc(var(--padding-xl) / var(--mobile-scale)); --padding-xxl: calc(var(--padding-xxl) / var(--mobile-scale)); --margin-xs: calc(var(--margin-xs) / var(--mobile-scale)); --margin-s: calc(var(--margin-s) / var(--mobile-scale)); --margin-m: calc(var(--margin-m) / var(--mobile-scale)); --margin-l: calc(var(--margin-l) / var(--mobile-scale)); --margin-xl: calc(var(--margin-xl) / var(--mobile-scale)); --margin-xxl: calc(var(--margin-xxl) / var(--mobile-scale)); } }*/ /* These are the fine-tine CSS classes, designed to be used sparingly, but providing the option for endless fiddling */ /* Margin all */ .m1 { margin: calc(1rem * var(--scale-factor)); } .m2 { margin: calc(2rem * var(--scale-factor)); } .m3 { margin: calc(3rem * var(--scale-factor)); } .m4 { margin: calc(4rem * var(--scale-factor)); } .m5 { margin: calc(5rem * var(--scale-factor)); } .m6 { margin: calc(6rem * var(--scale-factor)); } .m7 { margin: calc(7rem * var(--scale-factor)); } .m8 { margin: calc(8rem * var(--scale-factor)); } .m9 { margin: calc(9rem * var(--scale-factor)); } .m10 { margin: calc(10rem * var(--scale-factor)); } .m11 { margin: calc(11rem * var(--scale-factor)); } .m12 { margin: calc(12rem * var(--scale-factor)); } .m13 { margin: calc(13rem * var(--scale-factor)); } .m14 { margin: calc(14rem * var(--scale-factor)); } .m15 { margin: calc(15rem * var(--scale-factor)); } .m16 { margin: calc(16rem * var(--scale-factor)); } .m17 { margin: calc(17rem * var(--scale-factor)); } .m18 { margin: calc(18rem * var(--scale-factor)); } .m19 { margin: calc(19rem * var(--scale-factor)); } .m20 { margin: calc(20rem * var(--scale-factor)); } /* Margin Top */ .mt1 { margin-top: calc(1rem * var(--scale-factor)); } .mt2 { margin-top: calc(2rem * var(--scale-factor)); } .mt3 { margin-top: calc(3rem * var(--scale-factor)); } .mt4 { margin-top: calc(4rem * var(--scale-factor)); } .mt5 { margin-top: calc(5rem * var(--scale-factor)); } .mt6 { margin-top: calc(6rem * var(--scale-factor)); } .mt7 { margin-top: calc(7rem * var(--scale-factor)); } .mt8 { margin-top: calc(8rem * var(--scale-factor)); } .mt9 { margin-top: calc(9rem * var(--scale-factor)); } .mt10 { margin-top: calc(10rem * var(--scale-factor)); } .mt11 { margin-top: calc(11rem * var(--scale-factor)); } .mt12 { margin-top: calc(12rem * var(--scale-factor)); } .mt13 { margin-top: calc(13rem * var(--scale-factor)); } .mt14 { margin-top: calc(14rem * var(--scale-factor)); } .mt15 { margin-top: calc(15rem * var(--scale-factor)); } .mt16 { margin-top: calc(16rem * var(--scale-factor)); } .mt17 { margin-top: calc(17rem * var(--scale-factor)); } .mt18 { margin-top: calc(18rem * var(--scale-factor)); } .mt19 { margin-top: calc(19rem * var(--scale-factor)); } .mt20 { margin-top: calc(20rem * var(--scale-factor)); } /* Margin Bottom */ .mb1 { margin-bottom: calc(1rem * var(--scale-factor)); } .mb2 { margin-bottom: calc(2rem * var(--scale-factor)); } .mb3 { margin-bottom: calc(3rem * var(--scale-factor)); } .mb4 { margin-bottom: calc(4rem * var(--scale-factor)); } .mb5 { margin-bottom: calc(5rem * var(--scale-factor)); } .mb6 { margin-bottom: calc(6rem * var(--scale-factor)); } .mb7 { margin-bottom: calc(7rem * var(--scale-factor)); } .mb8 { margin-bottom: calc(8rem * var(--scale-factor)); } .mb9 { margin-bottom: calc(9rem * var(--scale-factor)); } .mb10 { margin-bottom: calc(10rem * var(--scale-factor)); } .mb11 { margin-bottom: calc(11rem * var(--scale-factor)); } .mb12 { margin-bottom: calc(12rem * var(--scale-factor)); } .mb13 { margin-bottom: calc(13rem * var(--scale-factor)); } .mb14 { margin-bottom: calc(14rem * var(--scale-factor)); } .mb15 { margin-bottom: calc(15rem * var(--scale-factor)); } .mb16 { margin-bottom: calc(16rem * var(--scale-factor)); } .mb17 { margin-bottom: calc(17rem * var(--scale-factor)); } .mb18 { margin-bottom: calc(18rem * var(--scale-factor)); } .mb19 { margin-bottom: calc(19rem * var(--scale-factor)); } .mb20 { margin-bottom: calc(20rem * var(--scale-factor)); } /* Margin Left */ .ml1 { margin-left: calc(1rem * var(--scale-factor)); } .ml2 { margin-left: calc(2rem * var(--scale-factor)); } .ml3 { margin-left: calc(3rem * var(--scale-factor)); } .ml4 { margin-left: calc(4rem * var(--scale-factor)); } .ml5 { margin-left: calc(5rem * var(--scale-factor)); } .ml6 { margin-left: calc(6rem * var(--scale-factor)); } .ml7 { margin-left: calc(7rem * var(--scale-factor)); } .ml8 { margin-left: calc(8rem * var(--scale-factor)); } .ml9 { margin-left: calc(9rem * var(--scale-factor)); } .ml10 { margin-left: calc(10rem * var(--scale-factor)); } .ml11 { margin-left: calc(11rem * var(--scale-factor)); } .ml12 { margin-left: calc(12rem * var(--scale-factor)); } .ml13 { margin-left: calc(13rem * var(--scale-factor)); } .ml14 { margin-left: calc(14rem * var(--scale-factor)); } .ml15 { margin-left: calc(15rem * var(--scale-factor)); } .ml16 { margin-left: calc(16rem * var(--scale-factor)); } .ml17 { margin-left: calc(17rem * var(--scale-factor)); } .ml18 { margin-left: calc(18rem * var(--scale-factor)); } .ml19 { margin-left: calc(19rem * var(--scale-factor)); } .ml20 { margin-left: calc(20rem * var(--scale-factor)); } /* Margin Right */ .mr1 { margin-right: calc(1rem * var(--scale-factor)); } .mr2 { margin-right: calc(2rem * var(--scale-factor)); } .mr3 { margin-right: calc(3rem * var(--scale-factor)); } .mr4 { margin-right: calc(4rem * var(--scale-factor)); } .mr5 { margin-right: calc(5rem * var(--scale-factor)); } .mr6 { margin-right: calc(6rem * var(--scale-factor)); } .mr7 { margin-right: calc(7rem * var(--scale-factor)); } .mr8 { margin-right: calc(8rem * var(--scale-factor)); } .mr9 { margin-right: calc(9rem * var(--scale-factor)); } .mr10 { margin-right: calc(10rem * var(--scale-factor)); } .mr11 { margin-right: calc(11rem * var(--scale-factor)); } .mr12 { margin-right: calc(12rem * var(--scale-factor)); } .mr13 { margin-right: calc(13rem * var(--scale-factor)); } .mr14 { margin-right: calc(14rem * var(--scale-factor)); } .mr15 { margin-right: calc(15rem * var(--scale-factor)); } .mr16 { margin-right: calc(16rem * var(--scale-factor)); } .mr17 { margin-right: calc(17rem * var(--scale-factor)); } .mr18 { margin-right: calc(18rem * var(--scale-factor)); } .mr19 { margin-right: calc(19rem * var(--scale-factor)); } .mr20 { margin-right: calc(20rem * var(--scale-factor)); } /* Padding all */ .p1 { padding: calc(1rem * var(--scale-factor)); } .p2 { padding: calc(2rem * var(--scale-factor)); } .p3 { padding: calc(3rem * var(--scale-factor)); } .p4 { padding: calc(4rem * var(--scale-factor)); } .p5 { padding: calc(5rem * var(--scale-factor)); } .p6 { padding: calc(6rem * var(--scale-factor)); } .p7 { padding: calc(7rem * var(--scale-factor)); } .p8 { padding: calc(8rem * var(--scale-factor)); } .p9 { padding: calc(9rem * var(--scale-factor)); } .p10 { padding: calc(10rem * var(--scale-factor)); } .p11 { padding: calc(11rem * var(--scale-factor)); } .p12 { padding: calc(12rem * var(--scale-factor)); } .p13 { padding: calc(13rem * var(--scale-factor)); } .p14 { padding: calc(14rem * var(--scale-factor)); } .p15 { padding: calc(15rem * var(--scale-factor)); } .p16 { padding: calc(16rem * var(--scale-factor)); } .p17 { padding: calc(17rem * var(--scale-factor)); } .p18 { padding: calc(18rem * var(--scale-factor)); } .p19 { padding: calc(19rem * var(--scale-factor)); } .p20 { padding: calc(20rem * var(--scale-factor)); } /* Padding Top */ .pt1 { padding-top: calc(1rem * var(--scale-factor)); } .pt2 { padding-top: calc(2rem * var(--scale-factor)); } .pt3 { padding-top: calc(3rem * var(--scale-factor)); } .pt4 { padding-top: calc(4rem * var(--scale-factor)); } .pt5 { padding-top: calc(5rem * var(--scale-factor)); } .pt6 { padding-top: calc(6rem * var(--scale-factor)); } .pt7 { padding-top: calc(7rem * var(--scale-factor)); } .pt8 { padding-top: calc(8rem * var(--scale-factor)); } .pt9 { padding-top: calc(9rem * var(--scale-factor)); } .pt10 { padding-top: calc(10rem * var(--scale-factor)); } .pt11 { padding-top: calc(11rem * var(--scale-factor)); } .pt12 { padding-top: calc(12rem * var(--scale-factor)); } .pt13 { padding-top: calc(13rem * var(--scale-factor)); } .pt14 { padding-top: calc(14rem * var(--scale-factor)); } .pt15 { padding-top: calc(15rem * var(--scale-factor)); } .pt16 { padding-top: calc(16rem * var(--scale-factor)); } .pt17 { padding-top: calc(17rem * var(--scale-factor)); } .pt18 { padding-top: calc(18rem * var(--scale-factor)); } .pt19 { padding-top: calc(19rem * var(--scale-factor)); } .pt20 { padding-top: calc(20rem * var(--scale-factor)); } /* Padding Left */ .pl1 { padding-left: calc(1rem * var(--scale-factor)); } .pl2 { padding-left: calc(2rem * var(--scale-factor)); } .pl3 { padding-left: calc(3rem * var(--scale-factor)); } .pl4 { padding-left: calc(4rem * var(--scale-factor)); } .pl5 { padding-left: calc(5rem * var(--scale-factor)); } .pl6 { padding-left: calc(6rem * var(--scale-factor)); } .pl7 { padding-left: calc(7rem * var(--scale-factor)); } .pl8 { padding-left: calc(8rem * var(--scale-factor)); } .pl9 { padding-left: calc(9rem * var(--scale-factor)); } .pl10 { padding-left: calc(10rem * var(--scale-factor)); } .pl11 { padding-left: calc(11rem * var(--scale-factor)); } .pl12 { padding-left: calc(12rem * var(--scale-factor)); } .pl13 { padding-left: calc(13rem * var(--scale-factor)); } .pl14 { padding-left: calc(14rem * var(--scale-factor)); } .pl15 { padding-left: calc(15rem * var(--scale-factor)); } .pl16 { padding-left: calc(16rem * var(--scale-factor)); } .pl17 { padding-left: calc(17rem * var(--scale-factor)); } .pl18 { padding-left: calc(18rem * var(--scale-factor)); } .pl19 { padding-left: calc(19rem * var(--scale-factor)); } .pl20 { padding-left: calc(20rem * var(--scale-factor)); } /* Padding Right */ .pr1 { padding-right: calc(1rem * var(--scale-factor)); } .pr2 { padding-right: calc(2rem * var(--scale-factor)); } .pr3 { padding-right: calc(3rem * var(--scale-factor)); } .pr4 { padding-right: calc(4rem * var(--scale-factor)); } .pr5 { padding-right: calc(5rem * var(--scale-factor)); } .pr6 { padding-right: calc(6rem * var(--scale-factor)); } .pr7 { padding-right: calc(7rem * var(--scale-factor)); } .pr8 { padding-right: calc(8rem * var(--scale-factor)); } .pr9 { padding-right: calc(9rem * var(--scale-factor)); } .pr10 { padding-right: calc(10rem * var(--scale-factor)); } .pr11 { padding-right: calc(11rem * var(--scale-factor)); } .pr12 { padding-right: calc(12rem * var(--scale-factor)); } .pr13 { padding-right: calc(13rem * var(--scale-factor)); } .pr14 { padding-right: calc(14rem * var(--scale-factor)); } .pr15 { padding-right: calc(15rem * var(--scale-factor)); } .pr16 { padding-right: calc(16rem * var(--scale-factor)); } .pr17 { padding-right: calc(17rem * var(--scale-factor)); } .pr18 { padding-right: calc(18rem * var(--scale-factor)); } .pr19 { padding-right: calc(19rem * var(--scale-factor)); } .pr20 { padding-right: calc(20rem * var(--scale-factor)); } /* Padding Bottom */ .pb1 { padding-bottom: calc(1rem * var(--scale-factor)); } .pb2 { padding-bottom: calc(2rem * var(--scale-factor)); } .pb3 { padding-bottom: calc(3rem * var(--scale-factor)); } .pb4 { padding-bottom: calc(4rem * var(--scale-factor)); } .pb5 { padding-bottom: calc(5rem * var(--scale-factor)); } .pb6 { padding-bottom: calc(6rem * var(--scale-factor)); } .pb7 { padding-bottom: calc(7rem * var(--scale-factor)); } .pb8 { padding-bottom: calc(8rem * var(--scale-factor)); } .pb9 { padding-bottom: calc(9rem * var(--scale-factor)); } .pb10 { padding-bottom: calc(10rem * var(--scale-factor)); } .pb11 { padding-bottom: calc(11rem * var(--scale-factor)); } .pb12 { padding-bottom: calc(12rem * var(--scale-factor)); } .pb13 { padding-bottom: calc(13rem * var(--scale-factor)); } .pb14 { padding-bottom: calc(14rem * var(--scale-factor)); } .pb15 { padding-bottom: calc(15rem * var(--scale-factor)); } .pb16 { padding-bottom: calc(16rem * var(--scale-factor)); } .pb17 { padding-bottom: calc(17rem * var(--scale-factor)); } .pb18 { padding-bottom: calc(18rem * var(--scale-factor)); } .pb19 { padding-bottom: calc(19rem * var(--scale-factor)); } .pb20 { padding-bottom: calc(20rem * var(--scale-factor)); } /* Border Radius */ .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 */ .bg1 h1, .bg1 h2, .bg1 h3, .bg1 h4, .bg1 h5, .bg1 h6, .bg2 h1, .bg2 h2, .bg2 h3, .bg2 h4, .bg2 h5, .bg2 h6, .bg3 h1, .bg3 h2, .bg3 h3, .bg3 h4, .bg3 h5, .bg3 h6, .bg4 h1, .bg4 h2, .bg4 h3, .bg4 h4, .bg4 h5, .bg4 h6, .bg5 h1, .bg5 h2, .bg5 h3, .bg5 h4, .bg5 h5, .bg5 h6, .bg6 h1, .bg6 h2, .bg6 h3, .bg6 h4, .bg6 h5, .bg6 h6, .bg7 h1, .bg7 h2, .bg7 h3, .bg7 h4, .bg7 h5, .bg7 h6, .bg8 h1, .bg8 h2, .bg8 h3, .bg8 h4, .bg8 h5, .bg8 h6 { color: #fff !important; } /* Boxes and Tiles */ .boxed { box-shadow: rgba(0, 0, 0, 0.1) 0px 20px 25px -5px, rgba(0, 0, 0, 0.04) 0px 10px 10px -5px; } .boxed p:last-of-type { margin-bottom: 0; } .boxed a.button { margin-top: 2rem; } /* 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; } .av, .av .grid { vertical-align: middle; align-items: center; } .vt { vertical-align: top; } .vb { vertical-align: bottom; } /* Display */ .ib { display: inline-block; } .il { display: inline; } .blk { display: block; } /* Positioning */ .sticky { position: sticky; top: 8rem; } .rel { position: relative; } .ab { position: absolute; } .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; } /* Background Position */ .bg-pos-left-top { background-position: left top; } .bg-pos-left-center { background-position: left center; } .bg-pos-left-bottom { background-position: left bottom; } .bg-pos-right-top { background-position: right top; } .bg-pos-right-center { background-position: right center; } .bg-pos-right-bottom { background-position: right bottom; } .bg-pos-center-top { background-position: center top; } .bg-pos-center-center { background-position: center; } .bg-pos-center-bottom { background-position: center bottom; } .bg-pos-0-0 { background-position: 0% 0%; } .bg-pos-0-50 { background-position: 0% 50%; } .bg-pos-0-100 { background-position: 0% 100%; } .bg-pos-50-0 { background-position: 50% 0%; } .bg-pos-50-50 { background-position: 50% 50%; } .bg-pos-50-100 { background-position: 50% 100%; } .bg-pos-100-0 { background-position: 100% 0%; } .bg-pos-100-50 { background-position: 100% 50%; } .bg-pos-100-100 { background-position: 100% 100%; } /* Background Size */ .bg-size-cover { background-size: cover; } .bg-size-contain { background-size: contain; } .bg-size-auto { background-size: auto; } /* Grid Gaps */ .gg0 .grid { grid-gap: 0rem; } .gg1 .grid { grid-gap: 1rem; } .gg2 .grid { grid-gap: 2rem; } .gg3 .grid { grid-gap: 3rem; } .gg4 .grid { grid-gap: 4rem; } .gg5 .grid { grid-gap: 5rem; } .gg6 .grid { grid-gap: 6rem; } .gg7 .grid { grid-gap: 7rem; } .gg8 .grid { grid-gap: 8rem; } .gg9 .grid { grid-gap: 9rem; } .gg10 .grid { grid-gap: 10rem; } /* Grids */ .grid-1 { grid-template-columns: repeat(1, 1fr); } .grid-2 { grid-template-columns: repeat(2, 1fr); } .grid-3 { grid-template-columns: repeat(3, 1fr); } .grid-4 { grid-template-columns: repeat(4, 1fr); } .grid-5 { grid-template-columns: repeat(5, 1fr); } .grid-6 { grid-template-columns: repeat(6, 1fr); } /* Columns spans */ .col.col-span-2 { grid-column: span 2; } .col.col-span-3 { grid-column: span 3; } .col.col-span-4 { grid-column: span 4; } /* Row spans */ .col.row-span-2 { grid-row: span 2; } .col.row-span-3 { grid-row: span 3; } .col.row-span-4 { grid-row: span 4; } @media (max-width: 768px) { .col.col-span-2, .col.col-span-3, .col.col-span-4 { grid-column: span 1; } .col.[class*="col-span-"] { grid-column: span 1; } .col.[class*="row-span-"] { grid-row: span 1; } } /* Row spans for smaller screens - this resets everything back to span one column on mobiles */ @media (max-width: 576px) { .col.row-span-2, .col.row-span-3, .col.row-span-4 { grid-row: span 1; } } .vertical-middle, .vertical-middle .grid{vertical-align:middle;align-items:center;} /**Images**/ .full-width-image img { width: 100%;} img.alignleft {padding-right:1rem;padding-top:5px;} img.alignright {padding-left:1rem;padding-top:5px;} img.aligncenter {display:block;margin-left:auto !important;margin-right:auto !important; } .alignright {float: right !important;margin-left:1rem;} .alignleft {float: left !important;margin-right:1rem;} /*Alignment*/ .align-right{text-align:right} .align-center, .centered, .aligncenter {text-align:center;} .align-left {text-align: left;} /* Brand Gradients */ .gradient-1 { background: linear-gradient(to right, var(--brand-1), var(--brand-2)); } /**NEVER REMOVE**/ .wp-block{font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica Neue,sans-serif;}