/******* Do not edit this file ******* Simple Custom CSS and JS - by Silkypress.com Saved: May 03 2025 | 12:30:52 */ /* ///// Alpha Grid System ////// ////////////////////////////// *//*** Grid Formatting Toolkit ***/ /* reference: https://elad.medium.com/becoming-a-css-grid-ninja-f4c6db018cc1 */ /*///// Defaults /////*/ [class*="cols-"],[class*="rows-"] { display: grid; box-sizing: border-box; grid-gap:0; grid-auto-flow: row; } /* div grid defaults to 1 */ [class*="cols-"] > div { grid-column: auto / span 1; box-sizing:border-box; grid-row: auto / span 1; justify-self: stretch; } .cols-dense,.rows-dense { grid-auto-flow: dense; } /* Use to fill spaces */ .cols-col ,.rows-col { grid-auto-flow: column; } /* Use to make a one liner grid */ .grid-start { align-content: start !important; } .grid-center { align-content: center !important; } .grid-end { align-content: end !important; } /*///// Grid Sizes /////*/ .cols-3 { grid-template-columns: repeat(3 , 1fr); } /* { grid-template-columns: repeat(3 , auto); } */ .cols-4 { grid-template-columns: repeat(4 , 1fr); } /* { grid-template-columns: repeat(4 , auto); } */ .cols-5 { grid-template-columns: repeat(5 , 1fr); } /* { grid-template-columns: repeat(5 , auto); } */ .cols-6 { grid-template-columns: repeat(6 , 1fr); } /* { grid-template-columns: repeat(6 , auto); } */ .cols-10 { grid-template-columns: repeat(10, 1fr); } /* { grid-template-columns: repeat(10, auto); } */ .cols-12 { grid-template-columns: repeat(12, 1fr); } /* { grid-template-columns: repeat(12, auto); } */ .cols-16 { grid-template-columns: repeat(16, 1fr); } /* { grid-template-columns: repeat(16, auto); } */ .cols-24 { grid-template-columns: repeat(24, 1fr); } /* { grid-template-columns: repeat(24, auto); } */ .auto { /* placeholder only for snapping grids. see application in @media below */ } /*** Column Grid ***/ /*** Row Grid ***/ div[c^="2"] { grid-column: auto / span 2 } div[r^="2"] { grid-row: auto / span 2 } div[c^="3"] { grid-column: auto / span 3 } div[r^="3"] { grid-row: auto / span 3 } div[c^="4"] { grid-column: auto / span 4 } div[r^="4"] { grid-row: auto / span 4 } div[c^="5"] { grid-column: auto / span 5 } div[r^="5"] { grid-row: auto / span 5 } div[c^="6"] { grid-column: auto / span 6 } div[r^="6"] { grid-row: auto / span 6 } div[c^="7"] { grid-column: auto / span 7 } div[r^="7"] { grid-row: auto / span 7 } div[c^="8"] { grid-column: auto / span 8 } div[r^="8"] { grid-row: auto / span 8 } div[c^="9"] { grid-column: auto / span 9 } div[r^="9"] { grid-row: auto / span 9 } div[c^="10"] { grid-column: auto / span 10 } div[r^="10"] { grid-row: auto / span 10 } div[c^="11"] { grid-column: auto / span 11 } div[r^="11"] { grid-row: auto / span 11 } div[c^="12"] { grid-column: auto / span 12 } div[r^="12"] { grid-row: auto / span 12 } div[c^="13"] { grid-column: auto / span 13 } div[r^="13"] { grid-row: auto / span 13 } div[c^="14"] { grid-column: auto / span 14 } div[r^="14"] { grid-row: auto / span 14 } div[c^="15"] { grid-column: auto / span 15 } div[r^="15"] { grid-row: auto / span 15 } div[c^="16"] { grid-column: auto / span 16 } div[r^="16"] { grid-row: auto / span 16 } div[c^="17"] { grid-column: auto / span 17 } div[r^="17"] { grid-row: auto / span 17 } div[c^="18"] { grid-column: auto / span 18 } div[r^="18"] { grid-row: auto / span 18 } div[c^="19"] { grid-column: auto / span 19 } div[r^="19"] { grid-row: auto / span 19 } div[c^="20"] { grid-column: auto / span 20 } div[r^="20"] { grid-row: auto / span 20 } div[c^="21"] { grid-column: auto / span 21 } div[r^="21"] { grid-row: auto / span 21 } div[c^="22"] { grid-column: auto / span 22 } div[r^="22"] { grid-row: auto / span 22 } div[c^="23"] { grid-column: auto / span 23 } div[r^="23"] { grid-row: auto / span 23 } div[c^="24"] { grid-column: auto / span 24 } div[r^="24"] { grid-row: auto / span 24 } /*** Column Grid Start ***/ /*** Row Grid Start ***/ div[gs*="c1"] { grid-column-start: 1 } div[gs*="r1"] { grid-row-start: 1 } div[gs*="c2"] { grid-column-start: 2 } div[gs*="r2"] { grid-row-start: 2 } div[gs*="c3"] { grid-column-start: 3 } div[gs*="r3"] { grid-row-start: 3 } div[gs*="c4"] { grid-column-start: 4 } div[gs*="r4"] { grid-row-start: 4 } div[gs*="c5"] { grid-column-start: 5 } div[gs*="r5"] { grid-row-start: 5 } div[gs*="c6"] { grid-column-start: 6 } div[gs*="r6"] { grid-row-start: 6 } div[gs*="c7"] { grid-column-start: 7 } div[gs*="r7"] { grid-row-start: 7 } div[gs*="c8"] { grid-column-start: 8 } div[gs*="r8"] { grid-row-start: 8 } div[gs*="c9"] { grid-column-start: 9 } div[gs*="r9"] { grid-row-start: 9 } div[gs*="c10"] { grid-column-start: 10 } div[gs*="r10"] { grid-row-start: 10 } div[gs*="c11"] { grid-column-start: 11 } div[gs*="r11"] { grid-row-start: 11 } div[gs*="c12"] { grid-column-start: 12 } div[gs*="r12"] { grid-row-start: 12 } div[gs*="c13"] { grid-column-start: 13 } div[gs*="r13"] { grid-row-start: 13 } div[gs*="c14"] { grid-column-start: 14 } div[gs*="r14"] { grid-row-start: 14 } div[gs*="c15"] { grid-column-start: 15 } div[gs*="r15"] { grid-row-start: 15 } div[gs*="c16"] { grid-column-start: 16 } div[gs*="r16"] { grid-row-start: 16 } div[gs*="c17"] { grid-column-start: 17 } div[gs*="r17"] { grid-row-start: 17 } div[gs*="c18"] { grid-column-start: 18 } div[gs*="r18"] { grid-row-start: 18 } div[gs*="c19"] { grid-column-start: 19 } div[gs*="r19"] { grid-row-start: 19 } div[gs*="c20"] { grid-column-start: 20 } div[gs*="r20"] { grid-row-start: 20 } div[gs*="c21"] { grid-column-start: 21 } div[gs*="r21"] { grid-row-start: 21 } div[gs*="c22"] { grid-column-start: 22 } div[gs*="r22"] { grid-row-start: 22 } div[gs*="c23"] { grid-column-start: 23 } div[gs*="r23"] { grid-row-start: 23 } div[gs*="c24"] { grid-column-start: 24 } div[gs*="r24"] { grid-row-start: 24 } @media (max-width : 1176px) { body[debug] { background:rgba(255,0,0,0.25) !important } /* untested in most scenarios */ .auto.cols-24 > div:not([c]) { grid-column: auto / span 2; } .auto.cols-24 > div[c^="2"] { grid-column: auto / span 4; } .auto.cols-24 > div[c^="3"], .auto.cols-24 > div[c^="4"], .auto.cols-24 > div[c^="5"], .auto.cols-24 > div[c^="6"] { grid-column: auto / span 6; } .auto.cols-24 > div[c^="7"], .auto.cols-24 > div[c^="8"], .auto.cols-24 > div[c^="9"], .auto.cols-24 > div[c^="10"], .auto.cols-24 > div[c^="11"], .auto.cols-24 > div[c^="12"] { grid-column: auto / span 12; } } @media (max-width : 480px){ body[debug] { background:rgba(0,255,0,0.25) !important } /* untested in most scenarios */ .auto.cols-3 > div:not([c]) { grid-column: auto / span 3; } .auto.cols-4 > div:not([c]), .auto.cols-4 > div[c^="3"], .auto.cols-4 > div[c^="4"] { grid-column: auto / span 4; } .auto.cols-5 > div:not([c]) { grid-column: auto / span 5; } .auto.cols-5 > div[c^="2"], .auto.cols-5 > div[c^="3"], .auto.cols-5 > div[c^="4"], .auto.cols-5 > div[c^="5"] { grid-column: auto / span 5; } .auto.cols-6 > div:not([c]) { grid-column: auto / span 3; } .auto.cols-6 > div[c^="2"], .auto.cols-6 > div[c^="3"], .auto.cols-6 > div[c^="4"], .auto.cols-6 > div[c^="5"], .auto.cols-6 > div[c^="6"] { grid-column: auto / span 6; } .auto.cols-10 > div:not([c]) { grid-column: auto / span 2; } .auto.cols-10 > div[c^="3"], .auto.cols-10 > div[c^="4"] { grid-column: auto / span 4; } .auto.cols-10 > div[c^="5"], .auto.cols-10 > div[c^="6"], .auto.cols-10 > div[c^="7"] { grid-column: auto / span 6; } .auto.cols-10 > div[c^="8"], .auto.cols-10 > div[c^="9"], .auto.cols-10 > div[c^="10"] { grid-column: auto / span 10; } .auto.cols-12 > div:not([c]) { grid-column: auto / span 2; } .auto.cols-12 > div[c^="2"], .auto.cols-12 > div[c^="3"], .auto.cols-12 > div[c^="4"], .auto.cols-12 > div[c^="5"] { grid-column: auto / span 6; } .auto.cols-12 > div[c^="6"], .auto.cols-12 > div[c^="7"], .auto.cols-12 > div[c^="8"], .auto.cols-12 > div[c^="9"], .auto.cols-12 > div[c^="10"], .auto.cols-12 > div[c^="11"] { grid-column: auto / span 12; } .auto.cols-16 > div:not([c]) { grid-column: auto / span 2; } .auto.cols-16 > div[c] { grid-column: auto / span 16; } .auto.cols-16 > div[c^="6"] { grid-column: auto / span 6; } .auto.cols-16 > div[c^="7"], .auto.cols-16 > div[c^="8"] { grid-column: auto / span 8; } .auto.cols-16 > div[c^="9"], .auto.cols-16 > div[c^="10"] { grid-column: auto / span 12; } .auto.cols-24 > div[c] { grid-column: auto / span 24; } .auto.cols-24 > div[c^="2"], .auto.cols-24 > div[c^="3"], .auto.cols-24 > div[c^="4"], .auto.cols-24 > div[c^="5"], .auto.cols-24 > div[c^="6"] { grid-column: auto / span 6; } .auto.cols-24 > div[c^="7"], .auto.cols-24 > div[c^="8"], .auto.cols-24 > div[c^="9"], .auto.cols-24 > div[c^="10"], .auto.cols-24 > div[c^="11"], .auto.cols-24 > div[c^="12"] { grid-column: auto / span 12; } } /*///// Height Grid /////*/ /* note: static height. not compatible row grid. do not use with row [c] */ /* ##### subject for review to extend utils [h] and [w] attributes without needing .rows grid this is due to the rows being variable in terms page height standards unlike columns which width is usually limited to current screen width (not page width). */ /*** Row Height 24 ***/ .rows-24 > div { min-height: 30px } .rows-24.hx > div { max-height: 30px } .rows-24 > div[h="2"] { min-height: 60px } .rows-24 > div[h="x2"] { max-height: 60px } .rows-24 > div[h="3"] { min-height: 90px } .rows-24 > div[h="x3"] { max-height: 90px } .rows-24 > div[h="4"] { min-height: 120px } .rows-24 > div[h="x4"] { max-height: 120px } .rows-24 > div[h="5"] { min-height: 150px } .rows-24 > div[h="x5"] { max-height: 150px } .rows-24 > div[h="6"] { min-height: 180px } .rows-24 > div[h="x6"] { max-height: 180px } .rows-24 > div[h="7"] { min-height: 210px } .rows-24 > div[h="x7"] { max-height: 210px } .rows-24 > div[h="8"] { min-height: 240px } .rows-24 > div[h="x8"] { max-height: 240px } .rows-24 > div[h="9"] { min-height: 270px } .rows-24 > div[h="x9"] { max-height: 270px } .rows-24 > div[h="10"] { min-height: 300px } .rows-24 > div[h="x10"] { max-height: 300px } .rows-24 > div[h="11"] { min-height: 330px } .rows-24 > div[h="x11"] { max-height: 330px } .rows-24 > div[h="12"] { min-height: 360px } .rows-24 > div[h="x12"] { max-height: 360px } .rows-24 > div[h="13"] { min-height: 390px } .rows-24 > div[h="x13"] { max-height: 390px } .rows-24 > div[h="14"] { min-height: 420px } .rows-24 > div[h="x14"] { max-height: 420px } .rows-24 > div[h="15"] { min-height: 450px } .rows-24 > div[h="x15"] { max-height: 450px } .rows-24 > div[h="16"] { min-height: 480px } .rows-24 > div[h="x16"] { max-height: 480px } .rows-24 > div[h="17"] { min-height: 510px } .rows-24 > div[h="x17"] { max-height: 510px } .rows-24 > div[h="18"] { min-height: 540px } .rows-24 > div[h="x18"] { max-height: 540px } .rows-24 > div[h="19"] { min-height: 570px } .rows-24 > div[h="x19"] { max-height: 570px } .rows-24 > div[h="20"] { min-height: 600px } .rows-24 > div[h="x20"] { max-height: 600px } .rows-24 > div[h="21"] { min-height: 630px } .rows-24 > div[h="x21"] { max-height: 630px } .rows-24 > div[h="22"] { min-height: 660px } .rows-24 > div[h="x22"] { max-height: 660px } .rows-24 > div[h="23"] { min-height: 690px } .rows-24 > div[h="x23"] { max-height: 690px } .rows-24 > div[h="24"] { min-height: 720px } .rows-24 > div[h="x24"] { max-height: 720px } /*** Row Height 36 ***/ .rows-36 > div { min-height: 20px } .rows-36.hx > div { max-height: 20px } .rows-36 > div[h="2"] { min-height: 40px } .rows-36 > div[h="x2"] { max-height: 40px } .rows-36 > div[h="3"] { min-height: 60px } .rows-36 > div[h="x3"] { max-height: 60px } .rows-36 > div[h="4"] { min-height: 80px } .rows-36 > div[h="x4"] { max-height: 80px } .rows-36 > div[h="5"] { min-height: 100px } .rows-36 > div[h="x5"] { max-height: 100px } .rows-36 > div[h="6"] { min-height: 120px } .rows-36 > div[h="x6"] { max-height: 120px } .rows-36 > div[h="7"] { min-height: 140px } .rows-36 > div[h="x7"] { max-height: 140px } .rows-36 > div[h="8"] { min-height: 160px } .rows-36 > div[h="x8"] { max-height: 160px } .rows-36 > div[h="9"] { min-height: 180px } .rows-36 > div[h="x9"] { max-height: 180px } .rows-36 > div[h="10"] { min-height: 200px } .rows-36 > div[h="x10"] { max-height: 200px } .rows-36 > div[h="11"] { min-height: 220px } .rows-36 > div[h="x11"] { max-height: 220px } .rows-36 > div[h="12"] { min-height: 240px } .rows-36 > div[h="x12"] { max-height: 240px } .rows-36 > div[h="13"] { min-height: 260px } .rows-36 > div[h="x13"] { max-height: 260px } .rows-36 > div[h="14"] { min-height: 280px } .rows-36 > div[h="x14"] { max-height: 280px } .rows-36 > div[h="15"] { min-height: 300px } .rows-36 > div[h="x15"] { max-height: 300px } .rows-36 > div[h="16"] { min-height: 320px } .rows-36 > div[h="x16"] { max-height: 320px } .rows-36 > div[h="17"] { min-height: 340px } .rows-36 > div[h="x17"] { max-height: 340px } .rows-36 > div[h="18"] { min-height: 360px } .rows-36 > div[h="x18"] { max-height: 360px } .rows-36 > div[h="19"] { min-height: 380px } .rows-36 > div[h="x19"] { max-height: 380px } .rows-36 > div[h="20"] { min-height: 400px } .rows-36 > div[h="x20"] { max-height: 400px } .rows-36 > div[h="21"] { min-height: 420px } .rows-36 > div[h="x21"] { max-height: 420px } .rows-36 > div[h="22"] { min-height: 440px } .rows-36 > div[h="x22"] { max-height: 440px } .rows-36 > div[h="23"] { min-height: 460px } .rows-36 > div[h="x23"] { max-height: 460px } .rows-36 > div[h="24"] { min-height: 480px } .rows-36 > div[h="x24"] { max-height: 480px } .rows-36 > div[h="25"] { min-height: 500px } .rows-36 > div[h="x25"] { max-height: 500px } .rows-36 > div[h="26"] { min-height: 520px } .rows-36 > div[h="x26"] { max-height: 520px } .rows-36 > div[h="27"] { min-height: 540px } .rows-36 > div[h="x27"] { max-height: 540px } .rows-36 > div[h="28"] { min-height: 560px } .rows-36 > div[h="x28"] { max-height: 560px } .rows-36 > div[h="29"] { min-height: 580px } .rows-36 > div[h="x29"] { max-height: 580px } .rows-36 > div[h="30"] { min-height: 600px } .rows-36 > div[h="x30"] { max-height: 600px } .rows-36 > div[h="31"] { min-height: 620px } .rows-36 > div[h="x31"] { max-height: 620px } .rows-36 > div[h="32"] { min-height: 640px } .rows-36 > div[h="x32"] { max-height: 640px } .rows-36 > div[h="33"] { min-height: 660px } .rows-36 > div[h="x33"] { max-height: 660px } .rows-36 > div[h="34"] { min-height: 680px } .rows-36 > div[h="x34"] { max-height: 680px } .rows-36 > div[h="35"] { min-height: 700px } .rows-36 > div[h="x35"] { max-height: 700px } .rows-36 > div[h="36"] { min-height: 720px } .rows-36 > div[h="x36"] { max-height: 720px } /*** Grid Gaps ***/ div[gap^="1" ] ,div[gap*="c1"] ,div[gap*="c1i"] div[class*="cols-"], div[gap ="1i"] div[class*="rows-"],div[gap = "1i"] div[class*="cols-"] { grid-column-gap: 0.125em !important; } div[gap^="1" ] ,div[gap*="r1"] ,div[gap*="r1i"] div[class*="rows-"], div[gap ="1i"] div[class*="cols-"],div[gap = "1i"] div[class*="rows-"] { grid-row-gap: 0.125em !important; } div[gap^="5" ] ,div[gap*="c5"] ,div[gap*="c5i"] div[class*="cols-"], div[gap ="5i"] div[class*="rows-"],div[gap = "5i"] div[class*="cols-"] { grid-column-gap: 0.25em !important; } div[gap^="5" ] ,div[gap*="r5"] ,div[gap*="r5i"] div[class*="rows-"], div[gap ="5i"] div[class*="cols-"],div[gap = "5i"] div[class*="rows-"] { grid-row-gap: 0.25em !important; } div[gap^="10" ],div[gap*="c10"] ,div[gap*="c10i"] div[class*="cols-"], div[gap ="10i"] div[class*="rows-"],div[gap = "10i"] div[class*="cols-"] { grid-column-gap: 0.5em !important; } div[gap^="10" ],div[gap*="r10"] ,div[gap*="r10i"] div[class*="rows-"], div[gap ="10i"] div[class*="cols-"],div[gap = "10i"] div[class*="rows-"] { grid-row-gap: 0.5em !important; } div[gap^="20" ],div[gap*="c20"] ,div[gap*="c20i"] div[class*="cols-"], div[gap ="20i"] div[class*="rows-"],div[gap = "20i"] div[class*="cols-"] { grid-column-gap: 1em !important; } div[gap^="20" ],div[gap*="r20"] ,div[gap*="r20i"] div[class*="rows-"], div[gap ="20i"] div[class*="cols-"],div[gap = "20i"] div[class*="rows-"] { grid-row-gap: 1em !important; } div[gap^="30" ],div[gap*="c30"] ,div[gap*="c30i"] div[class*="cols-"], div[gap ="30i"] div[class*="rows-"],div[gap = "30i"] div[class*="cols-"] { grid-column-gap: 1.5em !important; } div[gap^="30" ],div[gap*="r30"] ,div[gap*="r30i"] div[class*="rows-"], div[gap ="30i"] div[class*="cols-"],div[gap = "30i"] div[class*="rows-"] { grid-row-gap: 1.5em !important; } div[gap^="40" ],div[gap*="c40"] ,div[gap*="c40i"] div[class*="cols-"], div[gap ="40i"] div[class*="rows-"],div[gap = "40i"] div[class*="cols-"] { grid-column-gap: 2em !important; } div[gap^="40" ],div[gap*="r40"] ,div[gap*="r40i"] div[class*="rows-"], div[gap ="40i"] div[class*="cols-"],div[gap = "40i"] div[class*="rows-"] { grid-row-gap: 2em !important; } div[gap^="0" ],div[gap*="c0"] ,div[gap ="c0i"] div[class*="cols-"] div[gap ="0i"] div[class*="rows-"] ,div[gap = "0i"] div[class*="cols-"] { grid-column-gap: 0em !important; } div[gap^="0" ],div[gap*="r0"] ,div[gap ="r0i"] div[class*="rows-"] div[gap ="0i"] div[class*="cols-"] ,div[gap = "0i"] div[class*="rows-"] { grid-column-gap: 0em !important; } /*** Debug ***/ body[debug] [class*="cols-"]:not(.no-debug), [class*="cols-"].debug { background-color: #38bdf81a; background-image: linear-gradient(135deg,#0ea5e980 10%,transparent 0,transparent 50%,#0ea5e980 0,#0ea5e980 60%,transparent 0,transparent); background-size: 7.07px 7.07px; } body[debug] [class*="cols-"]:not(.no-debug) > div, [class*="cols-"].debug > div { background: rgba( 99,102,241, 0.5); } body[debug] [class*="cols-"]:not(.no-debug) > div:nth-child(odd), [class*="cols-"].debug > div:nth-child(odd) { background: rgba(165,180,252, 0.5); } /*** Details ***/ hr[clear] { margin:0px; padding:0px; clear:both; } [wrap] { position:relative; } .no-pad { padding:0px !important; } .no-margin { margin: 0px !important; } .hide { display:none !important; }