/* BODY TOP PADDING OVERRIDE BECAUSE OF THE MENU ON TOP */
body { padding-top: 2px; color: #4d5156; margin-block-start: 0; margin-block-end: 0 }

p { font-size: Clamp(14px, Calc(14px + (6 * ((100vw - 400px) / 1200))), 20px); line-height: 1.65; text-align: justify; margin-top: 20px }
    p.text-muted { color: #8b8b8b !important; padding: 0px 4% 0px 6%; line-height: 1.35 }

h6, .h6, h5, .h5, h4, .h4, h3, .h3, h2, .h2, h1, .h1 { margin-top: 20px; margin-bottom: 0; line-height: 1.2; font-weight: bold }
h1, .h1 { font-size: Clamp(26px, Calc(26px + (24 * ((100vw - 700px) / 900))), 50px) }
    h1 small { font-size: Clamp(20px, Calc(20px + (10 * ((100vw - 700px) / 900))), 30px); padding-left: 25px; display: block; line-height: 1; font-weight: 600 }
h2, .h2 { font-size: 3.6vw }
    .card .card-body h2 { font-variant: small-caps; letter-spacing: -1px; font-size: 24px }
.sub-title-seo { font-size: Clamp(22px, Calc(22px + (20 * ((100vw - 700px) / 900))), 42px) }
h3, .h3 { font-size: 3.2vw }
.search-engine-optimization-steps h3 { font-size: 20px }
h4, .h4 { font-size: 3vw }
h5, .h5 { font-size: 2.5vw }
h6, .h6 { font-size: 2vw }



.container { padding-right: calc(var(--mdb-gutter-x)); padding-left: calc(var(--mdb-gutter-x)) }
section { padding: 20px 0px }



/* SCREEN SIZE LESS THAN 575px */
/*
@media(max-width: 575px) {
    :root { font-size: 14px !important }
    h1, .h1 { font-size: 25px; letter-spacing: -0.5px }
        h1 small { font-size: 20px }
    h2, .h2 { font-size: 23px }
    .card .card-body h2 { font-size: 28px; letter-spacing: -0.5px }
    .sub-title-seo { font-size: 36px }
    h3, .h3 { font-size: 21px }
    .search-engine-optimization-steps h3 { font-size: 20px }
    h4, .h4 { font-size: 19px }
    h5, .h5 { font-size: 17px }
    h6, .h6 { font-size: 16px }

    .container { padding-right: calc(var(--mdb-gutter-x)*.5); padding-left: calc(var(--mdb-gutter-x)*.5) }
}
*/

/* SCREEN SIZE MORE THAN 576 */
/*
@media(min-width: 576px) {


    .card .card-body h2 { font-size: 26px }

    .sub-title-seo { font-size: 22px; font-weight: 300 }


    .search-engine-optimization-steps h3 { font-size: 18px }
}

*/

/* SCREEN SIZE MORE THAN 768px */
/*
@media(min-width: 768px) {


    .card .card-body h2 { font-size: 30px }

    .sub-title-seo { font-size: 25px }


    .search-engine-optimization-steps h3 { font-size: 19px }
}

*/

/* SCREEN SIZE MORE THAN 992px */
/*
@media(min-width: 992px) {

    :root { font-size: 20px !important }
    .card .card-body h2 { font-size: 24px; letter-spacing: -0.5px }

    .sub-title-seo { font-size: 31px }


    .search-engine-optimization-steps h3 { font-size: 16px }
}

*/


@media(max-width: 575px) {
    .container { padding-right: calc(var(--mdb-gutter-x)*.5); padding-left: calc(var(--mdb-gutter-x)*.5) }
}

/* SCREEN SIZE MORE THAN 1440px */
@media(min-width: 1440px) {

  /*  .container { max-width: 1300px }*/
}

/* SCREEN SIZE MORE THAN 1800px */
@media(min-width: 1800px) {

    .container { max-width: 1600px }
}


/* COLORFUL LINE DIVIDER */
.colorful-div { display: block; padding: 0px; height: 2px; width: 100%; background-image: linear-gradient(to right, red,orange,yellow,green,blue,indigo,violet); margin: 0px }

.colorful-border { display: block; height: 3px; width: 60%; background-image: linear-gradient(to right, #00beff45,#a7aaff7a,#f78eff87); margin: 5px 20% 10px 20%; border-top: 1px solid #bbbbbb42 }

/* MEGA MENU DROP DOWN STYLES */

.dropdown-hover:hover > .dropdown-menu { display: inline-block }

.dropdown-hover > .dropdown-toggle:active { /*Without this, clicking will make it sticky*/ pointer-events: none }


.navbar, .navbar-brand { padding: 0px }

    .navbar-brand img { margin-right: 0; width: 100%; max-height: 31px }

    .navbar a.nav-link { padding-top: 4px; padding-bottom: 4px }

ul.navbar-nav { margin-block-start: 0em; margin-block-end: 0em; margin-inline-start: 0px; margin-inline-end: 0px; padding-inline-start: 0px }

/* SEO STRATEGY STAGES */
.search-engine-optimization-steps { background-image: url('/img/optimized/96/search-engine-optimization-strategies-96x96.webp'); background-position: 0px 0px; display: inline-block; width: 96px; height: 96px }

.search-engine-optimization-strategy { margin: 0 }



.card {    box-shadow: 0 3px 20px 5px #00000030, 0px 5px 8px 2px #00000030; }







.card .card-img-top { width: 100%; margin: 0 auto; text-align: center; background-color: black }

    .card .card-img-top img { width: 100%; border-top-left-radius: var(--mdb-card-inner-border-radius); border-top-right-radius: var(--mdb-card-inner-border-radius) }


.lead, .light { font-family: MontserratLight !important }
.fw-bold, .bold { font-weight: 600 !important }


ol { list-style-type: decimal-leading-zero }

    ol > li { margin-top: 0px }



button.navbar-toggler div { width: 23px; height: 4px; background-color: black; margin: 4px 0 }


/* FONT COLORS */


/* Variable Definitions */

:root { --bg-color-11-top: rgb(199 209 212); --bg-color-11-bottom: rgb(218 218 218); --bg-color-12-top: rgb(243 243 243); --bg-color-12-bottom: rgb(225 225 225); --bg-color-13-top: rgb(239 227 233); --bg-color-13-bottom: rgb(228 197 213); --bg-color-14-top: rgb(185 206 180); --bg-color-14-bottom: rgb(168 185 148); --bg-color-15-top: rgb(237 255 129); --bg-color-15-bottom: rgb(223 235 154); --bg-color-16-top: rgb(235 235 235); --bg-color-16-bottom: rgb(210 214 188); --bg-gray-1: #f5f5f5; --bg-gray-2: #eee; --bg-gray-3: #e7e7e7; --bg-gray-4: #ddd; --bg-gray-5: #d6d6d6; --bg-gray-6: #ccc; --bg-gray-7: #c5c5c5; --bg-gray-8: #bbb; --bg-gray-9: #b5b5b5; --c-purple-1: purple; --c-purple-2: #AC6FAF; --c-purple-3: #bd539d; --c-purple-4: #9c27b0; --c-purple-5: #8d6095; --c-purple-6: indigo; --c-blue-1: #a6d6de; --c-blue-2: #7996c9; --c-blue-3: #707da8; --c-blue-4: #438692; --c-blue-5: #4490cc; --c-blue-6: #2c77d6; --c-blue-7: #3f51b5; --c-blue-8: #161cae; --c-blue-9: #1F497D; --c-green-1: #c9ff64; --c-green-2: #00d862; --c-green-3: #4caf50; --c-green-4: #5bc65f; --c-green-5: #409e64; --c-green-6: #7daf7f; --c-green-7: #89c410; --c-green-8: green; --c-green-9: #0f582c; --c-pink-1: #F077BC; --c-pink-2: #ee5b91; --c-pink-3: #ff00ad; --c-pink-4: #ee237d; --c-pink-5: #b03763; --c-red-1: #ff003e; --c-red-2: #e72a21; --c-red-3: red; --c-red-4: #DE1F1F; --c-red-5: #ce1515; --c-red-6: #87332a; --c-orange-1: orange; --c-orange-2: #ff9800; --c-orange-3: #E36C09; --c-orange-4: #df6a00; --c-brown-1: #c5895b; --c-brown-2: #db6912; --c-brown-3: #b28857; --c-brown-4: #933f00; --c-brown-5: #895110; --c-brown-6: #616161; --c-yellow-1: #f5ff00; --c-yellow-2: #ffeb3b; --c-yellow-3: #ffe500; --c-yellow-4: #e6bc11; --c-black-1: #ddd; --c-black-2: #bbb; --c-black-3: #aaa; --c-black-4: #999; --c-black-5: #777; --c-black-6: #555; --c-black-7: #444; --c-black-8: #333; --c-black-9: #222 }

/* Class Definitions */
.color-purple-1 { color: var(--c-purple-1) }
.color-purple-2 { color: var(--c-purple-2) }
.color-purple-3 { color: var(--c-purple-3) }
.color-purple-4 { color: var(--c-purple-4) }
.color-purple-5 { color: var(--c-purple-5) }
.color-purple-6 { color: var(--c-purple-6) }
.color-blue-1 { color: var(--c-blue-1) }
.color-blue-2 { color: var(--c-blue-2) }
.color-blue-3 { color: var(--c-blue-3) }
.color-blue-4 { color: var(--c-blue-4) }
.color-blue-5 { color: var(--c-blue-5) }
.color-blue-6 { color: var(--c-blue-6) }
.color-blue-7 { color: var(--c-blue-7) }
.color-blue-8 { color: var(--c-blue-8) }
.color-blue-9 { color: var(--c-blue-9) }
.color-green-1 { color: var(--c-green-1) }
.color-green-2 { color: var(--c-green-2) }
.color-green-3 { color: var(--c-green-3) }
.color-green-4 { color: var(--c-green-4) }
.color-green-5 { color: var(--c-green-5) }
.color-green-6 { color: var(--c-green-6) }
.color-green-7 { color: var(--c-green-7) }
.color-green-8 { color: var(--c-green-8) }
.color-green-9 { color: var(--c-green-9) }
.color-pink-1 { color: var(--c-pink-1) }
.color-pink-2 { color: var(--c-pink-2) }
.color-pink-3 { color: var(--c-pink-3) }
.color-pink-4 { color: var(--c-pink-4) }
.color-pink-5 { color: var(--c-pink-5) }
.color-red-1 { color: var(--c-red-1) }
.color-red-2 { color: var(--c-red-2) }
.color-red-3 { color: var(--c-red-3) }
.color-red-4 { color: var(--c-red-4) }
.color-red-5 { color: var(--c-red-5) }
.color-red-6 { color: var(--c-red-6) }
.color-orange-1 { color: var(--c-orange-1) }
.color-orange-2 { color: var(--c-orange-2) }
.color-orange-3 { color: var(--c-orange-3) }
.color-orange-4 { color: var(--c-orange-4) }
.color-brown-1 { color: var(--c-brown-1) }
.color-brown-2 { color: var(--c-brown-2) }
.color-brown-3 { color: var(--c-brown-3) }
.color-brown-4 { color: var(--c-brown-4) }
.color-brown-5 { color: var(--c-brown-5) }
.color-brown-6 { color: var(--c-brown-6) }
.color-yellow-1 { color: var(--c-yellow-1) }
.color-yellow-2 { color: var(--c-yellow-2) }
.color-yellow-3 { color: var(--c-yellow-3) }
.color-yellow-4 { color: var(--c-yellow-4) }
.color-black-1 { color: var(--c-black-1) }
.color-black-2 { color: var(--c-black-2) }
.color-black-3 { color: var(--c-black-3) }
.color-black-4 { color: var(--c-black-4) }
.color-black-5 { color: var(--c-black-5) }
.color-black-6 { color: var(--c-black-6) }
.color-black-7 { color: var(--c-black-7) }
.color-black-8 { color: var(--c-black-8) }
.color-black-9 { color: var(--c-black-9) }




/* BACKGROUND COLORS */
.bg-1 { background-image: linear-gradient(90deg, rgb(82 56 111), rgb(42 32 49)); color: #e0e0e0; border-top: 1px solid #a7a7a7; border-bottom: 1px solid #a7a7a7; box-shadow: 0px 0px 9px 0px #50376b; position: relative; padding-top: 2.5rem !important; padding-bottom: 2.5rem !important }
    .bg-1 a { color: #ffde15 }
        .bg-1 a:hover { color: #19e5ff }

.bg-2 { background-image: linear-gradient(90deg, rgb(227 233 255), rgb(233 235 239)); border-top: 1px solid #a7a7a7; border-bottom: 1px solid #c2c2c2; box-shadow: 0px 0px 13px 0px #97a2d4; position: relative; padding-top: 2.5rem !important; padding-bottom: 2.5rem !important }

.bg-3 { background-image: linear-gradient(90deg, rgb(243 243 243), rgb(219 219 219)); color: #111111; border-top: 1px solid #b1b1b1; border-bottom: 1px solid #8d8d8d; box-shadow: 0px 1px 11px -3px #000000ba; position: relative; padding-top: 2.5rem !important; padding-bottom: 2.5rem !important }

.bg-4 { background-image: linear-gradient(90deg, rgb(20 36 105), rgb(133 38 139)); color: #e0e0e0; border-top: 1px solid #a7a7a7; border-bottom: 1px solid #a7a7a7; box-shadow: 0px 0px 9px 0px #50376b; position: relative; padding-top: 2.5rem !important; padding-bottom: 2.5rem !important }
    .bg-4 a { color: #96c3e8; font-weight: 600 }
        .bg-4 a:hover { color: #19e5ff }

.bg-5 { background-image: linear-gradient(90deg, rgb(123 28 85), rgb(49 48 110)); color: #e0e0e0; border-top: 1px solid #a7a7a7; border-bottom: 1px solid #a7a7a7; box-shadow: 0px 0px 9px 0px #50376b; position: relative; padding-top: 2.5rem !important; padding-bottom: 2.5rem !important }
    .bg-5 a { color: #c9ff64; letter-spacing: -0.5px }
        .bg-5 a:hover { color: #19e5ff }

.bg-6 { background-image: linear-gradient(90deg, rgb(255 205 230), rgb(205 224 230)); color: #262626; border-top: 1px solid #a7a7a7; border-bottom: 1px solid #a7a7a7; box-shadow: 0px 0px 9px 0px #50376b; position: relative; padding-top: 2.5rem !important; padding-bottom: 2.5rem !important }

.bg-7 { background-image: linear-gradient(90deg, rgb(234 234 234), rgb(255 255 255)); color: #262626; border: 1px solid #c6c6c6; box-shadow: 2px 3px 5px 0px #848484; position: relative; padding-top: 2.5rem !important; padding-bottom: 2.5rem !important }

.bg-8 { background-image: linear-gradient(90deg, rgb(50 50 57), #475588); color: #e0e0e0; border-top: 1px solid #a7a7a7; border-bottom: 1px solid #a7a7a7; box-shadow: 0px 0px 9px 0px #50376b; position: relative; padding-top: 2.5rem !important; padding-bottom: 2.5rem !important }
    .bg-8 a { color: #baea41; font-weight: 600 }
        .bg-8 a:hover { color: #19e5ff }

.bg-9 { background-image: linear-gradient(90deg, rgb(67 66 66), rgb(63 63 132), #7c4584); color: #fafafa; border-top: 1px solid #a7a7a7; border-bottom: 1px solid #a7a7a7; box-shadow: 0px 0px 11px 1px #000000db; position: relative; padding-top: 2.5rem !important; padding-bottom: 2.5rem !important }
    .bg-9 a { color: #ff75b6 }
        .bg-9 a:hover { color: #19e5ff }

.bg-10 { background-image: linear-gradient(45deg, rgb(255 227 0 / 45%), rgb(255 112 0 / 30%), rgb(250 0 0 / 30%), rgb(255 0 241 / 30%), rgb(77 9 246 / 30%)); border-top: 1px solid #a7a7a7; border-bottom: 1px solid #a7a7a7; box-shadow: 0px 0px 11px 1px #000000db; position: relative; padding-top: 2.5rem !important; padding-bottom: 2.5rem !important; color: #000000 }
    .bg-10 a { color: #0037ff; font-weight: 600 }
        .bg-10 a:hover { color: #19e5ff }

.bg-11 { background-image: linear-gradient(180deg, var(--bg-color-11-top) 0%, rgb(255 255 255) 15%, rgb(255 255 255) 85%, var(--bg-color-11-bottom) 100%); position: relative; padding-top: 1rem !important; padding-bottom: 1rem !important }
.bg-12 { background-image: linear-gradient(180deg, var(--bg-color-12-top) 0%, rgb(255 255 255) 50%, var(--bg-color-12-bottom) 100%); position: relative; padding-top: 1rem !important; padding-bottom: 1rem !important }
.bg-13 { background-image: linear-gradient(180deg, var(--bg-color-13-top) 0%, rgb(255 255 255) 20%, rgb(255 255 255) 80%, var(--bg-color-13-top) 100%); position: relative; padding-top: 1rem !important; padding-bottom: 1rem !important }
.bg-14 { background-image: linear-gradient(180deg, var(--bg-color-14-top) 0%, rgb(255 255 255) 15%, rgb(255 255 255) 85%, var(--bg-color-14-bottom) 100%); position: relative; padding-top: 1rem !important; padding-bottom: 1rem !important }
.bg-15 { background-image: linear-gradient(180deg, var(--bg-color-15-top) 0%, rgb(255 255 255) 15%, rgb(255 255 255) 85%, var(--bg-color-15-bottom) 100%); position: relative; padding-top: 1rem !important; padding-bottom: 1rem !important }
.bg-16 { background-image: linear-gradient(180deg, rgb(214 214 214) 0%, rgb(255 255 255) 19%, rgb(255 255 255) 82%, rgb(224 224 224) 100%); position: relative; padding-top: 1rem !important; padding-bottom: 1rem !important }
.bg-white { background-color: white !important }
.bg-gray-1 { background-color: var(--bg-gray-1) }
.bg-gray-2 { background-color: var(--bg-gray-2) }
.bg-gray-3 { background-color: var(--bg-gray-3) }
.bg-gray-4 { background-color: var(--bg-gray-4) }
.bg-gray-5 { background-color: var(--bg-gray-5) }
.bg-gray-6 { background-color: var(--bg-gray-6) }
.bg-gray-7 { background-color: var(--bg-gray-7) }
.bg-gray-5 { background-color: var(--bg-gray-8) }
.bg-gray-6 { background-color: var(--bg-gray-9) }


/* CUSTOM ORDERED LIST STYLE */ /* STYLE 1 */
ol.colored-cards { display: grid; gap: 1.75rem; grid-template-columns: repeat(auto-fit, minmax(min(45ch, 100%), 1fr)); padding: 0rem; margin: 0; list-style: none; counter-reset: cardCount }
    ol.colored-cards > .colored-card { color: hsl(0 0% 40%); background-color: #ffffff; text-align: center; padding: 2rem; border-radius: .5rem; box-shadow: .5rem .5rem 1rem hsl(0 0% 0% / .25); position: relative; counter-increment: cardCount }
        ol.colored-cards > .colored-card::before { --top: 1.5rem; --left: -1rem; content: "Option " counter(cardCount, decimal-leading-zero); color: hsl(0 0% 100%); padding: 0.25rem 1rem; background-color: var(--accent-color); border-radius: 0 0 .5rem .5rem; box-shadow: -0.125rem 0.125rem 0.25rem hsl(0 0% 0% / .25); /* position */ position: absolute; top: 0; right: 100%; transform-origin: top right; transform: rotate(-90deg) translate(calc(var(--top) * -1), var(--left)); white-space: nowrap }
        ol.colored-cards > .colored-card > i { color: var(--accent-color); font-size: 2rem }
        ol.colored-cards > .colored-card > h2 { font-weight: 400; color: var(--accent-color); margin-top: 0 }


/* STYLE 2 */
div.ribbon-cards { padding: 0rem; min-height: 100vh; display: grid; place-items: center }
ul.ribbon-cards { width: min(100%, 60rem); overflow: hidden; margin-inline: auto; padding-inline: clamp(1rem, 5vw, 5rem); list-style: none; perspective: calc(100vw); display: grid; row-gap: 8px }
    ul.ribbon-cards li.ribbon-card { position: relative; padding-block: 1rem; padding-inline: 0.5rem; background-color: var(--ribbon-bg-color); background-image: linear-gradient(to right, rgb(0 0 0 / .15), transparent); transform-style: preserve-3d; color: var(--color); display: grid; grid-template: 'icon' 'title' 'content'; row-gap: 0.5rem; column-gap: 0.5rem }
        ul.ribbon-cards li.ribbon-card::before, ul.ribbon-cards li.ribbon-card::after { --side-rotate: 60deg; content: ""; position: absolute; top: 0; height: 100%; width: 100%; transform-origin: calc(50% - (50% * var(--ry))) 50%; transform: rotateY(calc(var(--side-rotate) * var(--ry))); background-color: inherit; background-image: linear-gradient(calc(90deg * var(--ry)), rgb(0 0 0 / .25), rgb(0 0 0 / .5)) }
        ul.ribbon-cards li.ribbon-card::before { --ry: -1; right: 100% }
        ul.ribbon-cards li.ribbon-card::after { --ry: 1; left: 100% }

        ul.ribbon-cards li.ribbon-card .icon { grid-area: icon; display: grid; place-items: center }
            ul.ribbon-cards li.ribbon-card .icon i { font-size: 2rem }
        ul.ribbon-cards li.ribbon-card .title { grid-area: title; font-size: 1.25rem; font-weight: 700; text-align: center }
        ul.ribbon-cards li.ribbon-card .content { grid-area: content }

@media (min-width: 30rem) {
    ul.ribbon-cards li.ribbon-card { grid-template: 'icon title' 'icon content'; text-align: left }
        ul.ribbon-cards li.ribbon-card .title { text-align: left }
}



/* STYLE 4 NUMBERS ONLY */









:root { --bg1: linear-gradient(180deg, var(--bg-color-12-top) 0rem, rgb(255 255 255) 20rem); --blue: #588fc3; --green: #62c383; --purple: #9b59b6; --gold: #f1c40f; --red: #e74c3c; --orange: #e67e22; --pink: #d40084; --shadow1: 0 2px 4px #00000026, 0 3px 6px #0000001f; --shadow2: 0 2px 6px #00000044, 0 4px 7px #00000022 }


ul.seo-large-number-list { font-size: var(--font-size); display: flex; flex-wrap: wrap; justify-content: center }
    ul.seo-large-number-list > li { position: relative; width: 100%; border-radius: 0.5em; padding: 0.5em; z-index: 1; transition: all 0.2s; list-style: none }
    ul.seo-large-number-list li .numberWrap { position: absolute }
    ul.seo-large-number-list li .sub-content { padding: 0em 3em 1em 11em; position: relative }
    ul.seo-large-number-list li .number { font-family: 'MavenPro', sans-serif; font-size: 14em; font-weight: 900; width: 0.8em; text-align: center; line-height: 0.9; text-shadow: -7px -5px 1px #e0e0e0 }

        ul.seo-large-number-list li .number.fontColor1, .fontColor1 { color: var(--blue) }
        ul.seo-large-number-list li .number.fontColor2, .fontColor2 { color: var(--green) }
        ul.seo-large-number-list li .number.fontColor3, .fontColor3 { color: var(--purple) }
        ul.seo-large-number-list li .number.fontColor4, .fontColor4 { color: var(--pink) }
        ul.seo-large-number-list li .number.fontColor5, .fontColor5 { color: var(--red) }
        ul.seo-large-number-list li .number.fontColor6, .fontColor6 { color: var(--orange) }

    ul.seo-large-number-list li .coverWrap { transform: rotate(130deg); position: absolute; width: 18em; height: 15em; left: -3em; top: -1em }
        ul.seo-large-number-list li .coverWrap .numberCover { position: absolute; background: #ffffffed; width: 18em; height: 6em; border-radius: 50% 50% 0 0; border-bottom: 3px solid #f5f8f7; transition: all 0.4s }
            ul.seo-large-number-list li .coverWrap .numberCover::before { position: absolute; content: ""; bottom: 5px; left: 4em; right: 4em; top: 5em; box-shadow: 0 0 30px 17px #48668577; border-radius: 100px / 10px; z-index: -1 }
            ul.seo-large-number-list li .coverWrap .numberCover::after { position: absolute; bottom: 0; content: ""; left: -10%; width: 120%; height: 150%; background: radial-gradient( at bottom, #48668533, transparent, transparent ); z-index: 1 }
    ul.seo-large-number-list > li > .content { margin: 3em 3em 1em 14em; position: relative; min-height: 9em }

        ul.seo-large-number-list > li > .content > h3 { font-size: 2.4em; font-family: MontserratLight; font-weight: 600; letter-spacing: -1pt }



/* STYLE 3 */
.olcards,
.olcards * { margin: 0; padding: 0; box-sizing: border-box }

.olcards { list-style: none; counter-reset: cardCount; display: flex; flex-direction: column; --cardsGap: 1rem; gap: var(--cardsGap); padding-bottom: 0; padding-inline-start: 0px }
    .olcards li { counter-increment: cardCount; display: flex }

        .olcards li::before { content: counter(cardCount, upper-roman)"."; min-width: 1em; color: #bbbbbb; font-size: 1.4em; font-weight: 900; font-family: MontserratLight; z-index: 1; display: flex; justify-content: right; align-items: center; height: 1em }

        .olcards li .content { --inlinePadding: 0em; --boxPadding: 0em; display: grid; padding: 0em 0em 0em 1.5em; grid-template-areas:
                "icon title"
                "icon text"; gap: 0em; position: relative; line-height: 1.3 }

        .olcards li .icon { grid-area: icon; align-self: center; font-size: 2em }
        .olcards li .content .title { grid-area: title; font-size: 1.25em; font-weight: 700; line-height: 1.3 }
        .olcards li .content .text { grid-area: text; line-height: 1.3; font-size: 1em }



/* STYLE 5 RIBBONS */
ul.seo-ribbons, ul.seo-ribbons > * { margin: 0; padding: 0; box-sizing: border-box }
ul.seo-ribbons { --outset: clamp(1rem, 5vw + 2px, 2rem); width: calc(100%+var(--outset)); margin-inline: auto; padding-inline: var(--outset); padding-bottom: calc(var( --outset) * 1.5); display: grid; gap: calc(var( --outset) * 1); list-style: none; position: relative }

    ul.seo-ribbons::before { content: ""; inset-inline: var(--outset); bottom: var(--outset); top: 0; background: #ffffff; position: absolute; z-index: -1; box-shadow: inset 0 0 8px rgb(0 0 0 / .5); border-radius: calc(var(--outset) / 2) }
    ul.seo-ribbons .title { display: grid; align-items: center; text-align: center; font-size: 2rem; font-weight: 700; min-height: calc(var(--outset) * 2.5); margin-bottom: calc(var(--outset) * -1); padding-inline: var(--outset); padding-top: 1rem; padding-bottom: 0.5rem }

    ul.seo-ribbons li { position: relative; padding: calc(var(--outset) / 2); color: var(--text-color, white); background-color: var(--bg-color, grey); box-shadow: 0 3px 7px 2px rgb(0 0 0 / 84%); --gradSides: rgb(255 255 255 / 0.25); background-image: linear-gradient( 90deg, var(--gradSides), transparent calc(var(--outset) * 0.5) calc(100% - var(--outset) * 0.5), var(--gradSides) ); min-height: 5rem; /* margin-top: 2em; */ }
        ul.seo-ribbons li::before, ul li::after { content: ""; position: absolute; width: var(--outset); height: calc(100% + var(--outset) * 2); bottom: 0; background-color: inherit; border-radius: var(--brTL, 0) var(--brTR, 0) var(--brBR, 0) var(--brBL, 0); --circleY: var(--outset); --circleColor: rgb( 0 0 0 / .5); background-image: radial-gradient( circle at var(--circleX) var(--circleY), var(--circleColor) var(--outset), transparent calc(var(--outset) + 0px) ), linear-gradient( var(--gradDir), var(--gradSides), transparent calc(var(--outset) * 0.25) calc(100% - var(--outset) * 0.75), rgb(0 0 0 / 0.25) ) }
        ul.seo-ribbons li::before { right: 100%; --brTL: var(--outset); --brBL: var(--outset); --circleX: 100%; --gradDir: -90deg; --clip-posX: 100% }
        ul.seo-ribbons li::after { left: 100%; --brTR: var(--outset); --brBR: var(--outset); --circleX: 0%; --gradDir: 90deg; --clip-posX: 0 }

        ul.seo-ribbons li:not(:first-of-type)::before,
        ul.seo-ribbons li:not(:first-of-type)::after { -webkit-mask-image: radial-gradient( circle at var(--clip-posX) 0%, rgb(0 0 0 / 0) calc(var(--outset) - 1px), rgba(0 0 0 / 1) var(--outset) ); mask-image: radial-gradient( circle at var(--clip-posX) 0%, rgb(0 0 0 / 0) calc(var(--outset) - 1px), rgba(0 0 0 / 1) var(--outset) ) }





.adminButton, .adminButtonBlue, .adminButtonAdd, .adminButtonSave, .adminButtonDelete, .adminButtonBack { background: url('/images/menu_bg1.png') repeat-x left top !important; padding: 3px 16px 3px 16px; display: inline-block; color: #FFF !important; text-decoration: none !important; font-size: 13px !important; font-weight: normal !important; line-height: 21px; border-radius: 4px; text-align: center !important; text-transform: uppercase !important; border: 1px outset #656565; margin-right: 20px; letter-spacing: 0.6px }
    .adminButton:hover, .adminButtonBlue:hover, .adminButtonAdd:hover, .adminButtonSave:hover, .adminButtonDelete:hover, .adminButtonBack:hover { cursor: pointer; opacity: 0.7; filter: opacity(70); /* For IE8 and earlier */ }
.adminButtonDelete { background: url('/images/menu_bg5.png') no-repeat left top !important; margin-left: 50px !important; float: right }
.adminButtonBack { background: url('/images/menu_bg1.png') repeat-x top left !important }
.adminButtonSave { background: url('/images/menu_bg8.png') repeat-x top left !important }
.adminInput { border: 1px solid #ADADAD; border-radius: 4px; padding: 4px }
.adminInputCenter { text-align: center; border: 1px solid #ADADAD; border-radius: 4px; padding: 0px }
.adminInputNoWidth { border: 1px solid #acacac }
textarea.adminInput { width: calc(100% - 10px) !important }
select.adminInput { width: 300px; padding: 2px 4px }
    select.adminInput.half { width: 100px }
.uppercase { text-transform: uppercase }
label { padding-left: 3px }
.ricksButtons, a.ricksButtons { background: url('/images/menu_bg1.png') repeat-x left top !important; padding: 0px 13px 0px 11px; display: inline-block; color: #FFF !important; text-decoration: none !important; font-size: 13px !important; font-weight: normal !important; font-family: Arial !important; line-height: 21px; border-radius: 4px; text-align: center !important; text-transform: uppercase !important; border: 1px outset #656565; letter-spacing: 0.6px }
    .ricksButtons:hover, a.ricksButtons:hover { opacity: 0.7; filter: opacity(70); /* For IE8 and earlier */ border: 1px solid #484848 !important; cursor: pointer }
    .ricksButtons img { margin: 1px 6px 3px; vertical-align: middle }
table.adminContent { border-collapse: collapse; color: #333; font-size: 13px; margin: 0px; width: 100%; vertical-align: middle; text-align: left }
    table.adminContent td.adminTitle { padding: 4px 4px 4px 4px }
    table.adminContent td.adminData { padding: 4px 4px 4px 4px }
td.adminTitle { text-align: left; vertical-align: middle; white-space: nowrap; width: 200px }
td.adminTitleSymbol { text-align: center; vertical-align: middle; width: 56px }
td.adminTitle img { vertical-align: middle; padding-bottom: 5px; padding-right: 5px }
td.adminData { text-align: left; vertical-align: middle }
tr.adminSeparator hr { background-color: #D3D3D3; border: medium none; color: #D3D3D3; height: 1px; margin-top: 10px; margin-bottom: 10px; padding: 0 }
a.adminTitle { line-height: 36px; font-size: 16px }

.select-style { text-transform: uppercase; padding: 4px 10px; width: 100% }