/*+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
+                    WARNING:    DO NOT UPDATE OR CHANGE THIS FILE                    +
+     IF YOU WANT MODIFY THESE STYLES PLEASE USE THE OVERRIDE FILE IN YOUR CSS_SITE   +
+     FOLDER, UPDATES TO THESE STYLES DELETED UPON NEXT TEMPLATE UPGRADE              +
+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++*/


/*------------------------------------------------
   GET RID OF MIN HEIGHT ON BODY
------------------------------------------------*/

.NoMinHeight #MainContent, .no-min-height #MainContent {
    min-height: 0px;
}

/*------------------------------------------------------
    GRID GAP
----------------------------------*/

body[class*="gap-2"] .container,
[class*="gap-2"] .MaxGutter,
[class*="gap-2"] .MaxGutter .grid-nest {
    gap: 2px;
}

body[class*="gap-5"] .container,
[class*="gap-5"] .MaxGutter,
[class*="gap-5"] .MaxGutter .grid-nest {
    gap: 5px;
}

body[class*="gap-8"] .container,
[class*="gap-8"] .MaxGutter,
[class*="gap-8"] .MaxGutter .grid-nest {
    gap: 8px;
}

body[class*="gap-10"] .container,
[class*="gap-10"] .MaxGutter,
[class*="gap-10"] .MaxGutter .grid-nest {
    gap: 10px;
}


body[class*="gap-15"] .container,
[class*="gap-15"] .MaxGutter,
[class*="gap-15"] .MaxGutter .grid-nest {
    gap: 15px;
}

body[class*="gap-20"] .container,
[class*="gap-20"] .MaxGutter,
[class*="gap-20"] .MaxGutter .grid-nest {
    gap: 20px;
}

[class*="gap-20"] .grid-container {
    padding-bottom: 20px;
}

body[class*="gap-25"] .container,
[class*="gap-25"] .MaxGutter,
[class*="gap-25"] .MaxGutter .grid-nest {
    gap: 25px;
}

[class*="gap-25"] .grid-container {
    padding-bottom: 25px;
}

body[class*="gap-30"] .container,
[class*="gap-30"] .MaxGutter,
[class*="gap-30"] .MaxGutter .grid-nest {
    gap: 30px;
}

[class*="gap-30"] .grid-container {
    padding-bottom: 30px;
}

body[class*="gap-35"] .container,
[class*="gap-35"] .MaxGutter,
[class*="gap-35"] .MaxGutter .grid-nest {
    gap: 35px;
}

[class*="gap-35"] .grid-container {
    padding-bottom: 35px;
}


body[class*="gap-35"] .container,
[class*="gap-35"] .MaxGutter,
[class*="gap-35"] .MaxGutter .grid-nest {
    gap: 35px;
}

[class*="gap-35"] .grid-container {
    padding-bottom: 35px;
}


body[class*="gap-40"] .container,
[class*="gap-40"] .MaxGutter,
[class*="gap-40"] .MaxGutter .grid-nest {
    gap: 40px;
}

[class*="gap-40"] .grid-container {
    padding-bottom: 40px;
}


body[class*="gap-45"] .container,
[class*="gap-45"] .MaxGutter,
[class*="gap-45"] .MaxGutter .grid-nest {
    gap: 45px;
}

[class*="gap-45"] .grid-container {
    padding-bottom: 45px;
}

body[class*="gap-50"] .container,
[class*="gap-50"] .MaxGutter,
[class*="gap-50"] .MaxGutter .grid-nest {
    gap: 50px;
}

[class*="gap-50"] .grid-container {
    padding-bottom: 50px;
}



/*--------------------------------------------------------------------------
   SET HEIGHT ON BOXES OR SECTIONS RELATIVE TO WINDOW SIZE
------------------------------------------------*/
.full {
    min-height: var(--full);
}

.half {
    min-height: var(--half);
}

.third {
    min-height: var(--third);
}

.two-thirds {
    min-height: calc(var(--third) * 2);
}

.quarter {
    min-height: var(--quarter);
}

.three-quarters {
    min-height: calc(var(--quarter) * 3);
}

.eighth {
    min-height: var(--eighth);
}

    .full .MaxGutter, .half .MaxGutter, .third .MaxGutter, .two-thirds .MaxGutter, .quarter .MaxGutter, .three-quarters .MaxGutter, .eighth .MaxGutter {
        align-content: center;
    }

main .full, main .half, main .third, main .two-thirds, main .quarter, main .three-quarters, main .eighth {
    display: grid;
    align-content: start;
}

.mobile .full {
    min-height: var(--full-mobile);
}

.mobile .half {
    min-height: var(--half-mobile);
}

.mobile .third {
    min-height: var(--third-mobile);
}

.mobile .two-thirds {
    min-height: calc(var(--third-mobile) * 2);
}

.mobile .quarter {
    min-height: var(--quarter-mobile);
}

.mobile .three-quarters {
    min-height: calc(var(--quarter-mobile) * 3);
}

.mobile .eighth {
    min-height: var(--eighth-mobile);
}


/*--------------------------------------------------------------------------
   CONTENT PLACEMENT
------------------------------------------------*/

.top {
    align-content: start;
    place-items: unset center;
}

.bottom {
    align-content: end;
    place-items: unset;
}

.bg-top, .bg-top .item-headshot {
    background-position: top !important;
}

.bg-top-left, .bg-top-left .item-headshot {
    background-position: top left !important;
}

.bg-top-center, .bg-top-center .item-headshot {
    background-position: top center !important;
}

.bg-top-right, .bg-top-right .item-headshot {
    background-position: top right !important;
}

.bg-center, .bg-center .item-headshot {
    background-position: center center !important;
}

.bg-left, .bg-left .item-headshot {
    background-position: left center !important;
}

.bg-right, .bg-right .item-headshot {
    background-position: right center !important;
}


.bg-bottom, .bg-bottom .item-headshot {
    background-position: bottom !important;
}

.bg-bottom-left, .bg-bottom-left .item-headshot {
    background-position: bottom left !important;
}

.bg-bottom-center, .bg-bottom-center .item-headshot {
    background-position: bottom center !important;
}

.bg-bottom-right, .bg-bottom-right .item-headshot {
    background-position: bottom right !important;
}

.bg-contain, .bg-contain .item-headshot {
    background-size: contain !important;
}

.bg-auto, .bg-auto .item-headshot {
    background-size: auto !important;
}

.bg-cover, .bg-cover .item-headshot {
    background-size: cover !important;
}

main .section-stock .overlay-content,
main .section-stock .overlay-content a:not([class*='button-']),
main .section-stock .overlay-content [class*='standout'] {
    color: var(--my-white);
    background: unset;
}

main .overlay-content a:hover, main .overlay-content a:focus {
    text-decoration-color: var(--orange);
}

main .overlay-content a:focus {
    outline: none;
    text-decoration-thickness: 3px;
    text-decoration-style: solid;
    text-underline-offset: 5px;
}

main .overlay-content a[class*='button']:focus {
    outline: solid 2px var(--orange);
}

main .empty, main .empty * {
    padding: 0px;
    margin: 0px;
    height: 0px;
}

.box-padding {
    padding: 10px;
}

/*---------------------------------------------------
    GUTTERS
*/

.grid-item .overlay-content [id*='preview-content'].accordion,
.grid-item .overlay-content [id*='preview-content'].tab-content {
    padding-left: 0px;
    padding-right: 0px;
}

body:not(.mobile):not(.tablet-small) .open-right:not(.small-content) .overlay-content {
    margin-right: 50%;
}

body:not(.mobile):not(.tablet-small) .open-left:not(.small-content) .overlay-content {
    margin-left: 50%;
}

/*--------------------------------------------------------------------------
   OVERRIDE CONTENT MAX WIDTH
------------------------------------------------*/
[id*="box"].content-max-width .MaxGutter {
    max-width: 100%;
}

/*--------------------------------------------\
    FONT SIZES
*/


.medium, li.medium,
[class*='tab-content'] .details-section details[open] li.medium {
    font-size: var(--main-standout-block-font-size);
    line-height: calc(var(--main-standout-block-font-size) + .25em);
}


h1.medium {
    font-size: calc(var(--main-h1-font-size) + 1.3vw);
}

.tablet h1.medium {
    font-size: calc(var(--main-h1-font-size) + 1.25vw);
}

.mobile h1.medium, .smaller-content h1.medium {
    font-size: var(--main-h1-font-size);
}

h2.medium {
    font-size: calc(var(--main-h2-font-size) + 1.1vw);
}

.tablet h2.medium {
    font-size: calc(var(--main-h2-font-size) + 1.02vw);
}

.mobile h2.medium, .smaller-content h2.medium {
    font-size: var(--main-h2-font-size);
}

h3.medium {
    font-size: calc(var(--main-h3-font-size) + 1vw);
}

.tablet h3.medium {
    font-size: calc(var(--main-h3-font-size) + 1vw);
}

.mobile h3.medium, .smaller-content h3.medium {
    font-size: var(--main-h3-font-size);
}

h4.medium {
    font-size: calc(var(--main-h4-font-size) + .7vw);
}

h5.medium {
    font-size: calc(var(--main-h5-font-size) + .55vw);
}

/*-- large --*/
.large, li.large,
[class*='tab-content'] .details-section details[open] li.large{
    font-size: var(--font-size-large);
    line-height: calc(var(--font-size-large) + .35em);
}

[class*="notice"].large:before {
    font-size: 1em;
}

h1.large {
    font-size: calc(var(--main-h1-font-size) + 1.5vw);
}

.tablet h1.large {
    font-size: calc(var(--main-h1-font-size) + 1.35vw);
}

.mobile h1.large, .smaller-content h1.large {
    font-size: var(--main-h1-font-size);
}

h2.large {
    font-size: calc(var(--main-h2-font-size) + 1.3vw);
}

.tablet h2.large {
    font-size: calc(var(--main-h2-font-size) + 1.05vw);
}

.mobile h2.large, .smaller-content h2.large {
    font-size: var(--main-h2-font-size);
}

h3.large {
    font-size: calc(var(--main-h3-font-size) + 1.2vw);
}

.tablet h3.large {
    font-size: calc(var(--main-h3-font-size) + 1.08vw);
}

.mobile h3.large, .smaller-content h3.large {
    font-size: var(--main-h3-font-size);
}

h4.large {
    font-size: calc(var(--main-h4-font-size) + .9vw);
}

h5.large {
    font-size: calc(var(--main-h5-font-size) + .75vw);
}
/*-- larger --*/
.larger, li.larger,
[class*='tab-content'] .details-section details[open] li.larger {
    font-size: var(--font-size-larger);
    line-height: calc(var(--font-size-larger) + .55em);
}

[class*="notice"].larger:before {
    font-size: 1em;
}

h1.larger {
    font-size: calc(var(--main-h1-font-size) + 2vw);
}

.tablet h1.larger {
    font-size: calc(var(--main-h1-font-size) + 1.7vw);
}

.mobile h1.larger, .smaller-content h1.larger {
    font-size: var(--main-h1-font-size);
}

h2.larger {
    font-size: calc(var(--main-h2-font-size) + 1.4vw);
}

.tablet h2.larger {
    font-size: calc(var(--main-h2-font-size) + 1.1vw);
}

.mobile h2.larger, .smaller-content h2.larger {
    font-size: var(--main-h2-font-size);
}


h3.larger {
    font-size: calc(var(--main-h3-font-size) + 1.8vw);
}

.tablet h3.larger {
    font-size: calc(var(--main-h3-font-size) + 1.4vw);
}

.mobile h3.larger, .smaller-content h3.larger {
    font-size: var(--main-h3-font-size);
}

h4.larger {
    font-size: calc(var(--main-h4-font-size) + 1.2vw);
}

h5.larger {
    font-size: calc(var(--main-h5-font-size) + 1vw);
}

.smaller, li.smaller,
[class*='tab-content'] .details-section details[open] li.smaller {
    font-size: smaller;
}

h1.smaller {
    font-size: calc(var(--main-h1-font-size) - 25%);
}

h2.smaller {
    font-size: calc(var(--main-h2-font-size) - 25%);
}

h3.smaller {
    font-size: calc(var(--main-h3-font-size) - 25%);
}

h4.smaller {
    font-size: calc(var(--main-h4-font-size) - 25%);
}

h1[class*='l'], h1[class*='d'], h2[class*='l'], h2[class*='d'],
h3[class*='l'], h3[class*='d'], h4[class*='l'], h4[class*='d'] {
    line-height: unset;
}
/*---------------------------------------------------
    BORDER STYLES
*/

.border-zero {
    --border-width: 0px;
    border-width: 0px !important;
}

.border-thin {
    --border-width: var(--border-width-thin);
    border-width: var(--border-width-thin);
}

.border-medium {
    --border-width: var(--border-width-medium);
    border-width: var(--border-width-medium);
}

.border-thick {
    --border-width: var(--border-width-thick);
    border-width: var(--border-width-thick);
}

.border-heavy {
    --border-width: var(--border-width-heavy);
    border-width: var(--border-width-heavy);
}

.border-ultra {
    --border-width: var(--border-width-ultra);
    border-width: var(--border-width-ultra);
}

[class *='border-']:not([class*='iframe-border']) {
    border-style: solid;
    border-width: var(--border-width);
}

.border-top {
    border-bottom: 0px !important;
    border-left: 0px !important;
    border-right: 0px !important;
}

.border-bottom {
    border-top: 0px !important;
    border-left: 0px !important;
    border-right: 0px !important;
}

.border-left {
    border-top: 0px !important;
    border-bottom: 0px !important;
    border-right: 0px !important;
}

.border-right {
    border-top: 0px !important;
    border-bottom: 0px !important;
    border-left: 0px !important;
}

.border-top-bottom {
    border-left: 0px !important;
    border-right: 0px !important;
}

.border-top-left {
    border-bottom: 0px !important;
    border-right: 0px !important;
}

.border-top-right {
    border-bottom: 0px !important;
    border-left: 0px !important;
}

.border-bottom-left {
    border-top: 0px !important;
    border-right: 0px !important;
}

.border-bottom-right {
    border-top: 0px !important;
    border-left: 0px !important;
}

.border-left-right {
    border-top: 0px !important;
    border-bottom: 0px !important;
}

/* -- border overrides -- */
.border-top-add-zero {
    border-top-width: 0px !important;
}

.border-left-add-zero {
    border-left-width: 0px !important;
}

.border-right-add-zero {
    border-right-width: 0px !important;
}

.border-bottom-add-zero {
    border-bottom-width: 0px !important;
}

.border-top-add-thin {
    border-top-width: var(--border-width-thin) !important;
}

.border-left-add-thin {
    border-left-width: var(--border-width-thin) !important;
}

.border-right-add-thin {
    border-right-width: var(--border-width-thin) !important;
}

.border-bottom-add-thin {
    border-bottom-width: var(--border-width-thin) !important;
}

.border-top-add-medium {
    border-top-width: var(--border-width-medium) !important;
}

.border-left-add-medium {
    border-left-width: var(--border-width-medium) !important;
}

.border-right-add-medium {
    border-right-width: var(--border-width-medium) !important;
}

.border-bottom-add-medium {
    border-bottom-width: var(--border-width-medium) !important;
}

.border-top-add-thick {
    border-top-width: var(--border-width-thick) !important;
}

.border-left-add-thick {
    border-left-width: var(--border-width-thick) !important;
}

.border-right-add-thick {
    border-right-width: var(--border-width-thick) !important;
}

.border-bottom-add-thick {
    border-bottom-width: var(--border-width-thick) !important;
}

.border-top-add-heavy {
    border-top-width: var(--border-width-heavy) !important;
}

.border-left-add-heavy {
    border-left-width: var(--border-width-heavy) !important;
}

.border-right-add-heavy {
    border-right-width: var(--border-width-heavy) !important;
}

.border-bottom-add-heavy {
    border-bottom-width: var(--border-width-heavy) !important;
}

.border-top-add-ultra {
    border-top-width: var(--border-width-ultra) !important;
}

.border-left-add-ultra {
    border-left-width: var(--border-width-ultra) !important;
}

.border-right-add-ultra {
    border-right-width: var(--border-width-ultra) !important;
}

.border-bottom-add-ultra {
    border-bottom-width: var(--border-width-ultra) !important;
}

.border-top-add-1 {
    border-top-color: var(--primary) !important;
}

.border-top-add-2 {
    border-top-color: var(--secondary) !important;
}

.border-top-add-3 {
    border-top-color: var(--neutral) !important;
}

.border-top-add-4 {
    border-top-color: var(--dark) !important;
}

.border-top-add-5 {
    border-top-color: var(--accent-1) !important;
}

.border-top-add-6 {
    border-top-color: var(--accent-2) !important;
}

.border-top-add-white {
    border-top-color: var(--my-white) !important;
}

.border-top-add-black {
    border-top-color: var(--black) !important;
}


.border-left-add-1 {
    border-left-color: var(--primary) !important;
}

.border-left-add-2 {
    border-left-color: var(--secondary) !important;
}

.border-left-add-3 {
    border-left-color: var(--neutral) !important;
}

.border-left-add-4 {
    border-left-color: var(--dark) !important;
}

.border-left-add-5 {
    border-left-color: var(--accent-1) !important;
}

.border-left-add-6 {
    border-left-color: var(--accent-2) !important;
}

.border-left-add-white {
    border-left-color: var(--my-white) !important;
}

.border-left-add-black {
    border-left-color: var(--black) !important;
}


.border-right-add-1 {
    border-right-color: var(--primary) !important;
}

.border-right-add-2 {
    border-right-color: var(--secondary) !important;
}

.border-right-add-3 {
    border-right-color: var(--neutral) !important;
}

.border-right-add-4 {
    border-right-color: var(--dark) !important;
}

.border-right-add-5 {
    border-right-color: var(--accent-1) !important;
}

.border-right-add-6 {
    border-right-color: var(--accent-2) !important;
}

.border-right-add-white {
    border-right-color: var(--my-white) !important;
}

.border-right-add-black {
    border-right-color: var(--black) !important;
}

.border-bottom-add-1 {
    border-bottom-color: var(--primary) !important;
}

.border-bottom-add-2 {
    border-bottom-color: var(--secondary) !important;
}

.border-bottom-add-3 {
    border-bottom-color: var(--neutral) !important;
}

.border-bottom-add-4 {
    border-bottom-color: var(--dark) !important;
}

.border-bottom-add-5 {
    border-bottom-color: var(--accent-1) !important;
}

.border-bottom-add-6 {
    border-bottom-color: var(--accent-2) !important;
}

.border-bottom-add-white {
    border-bottom-color: var(--my-white) !important;
}

.border-bottom-add-black {
    border-bottom-color: var(--black) !important;
}

/*---------------------------------------------------
    BORDER RADIUS
*/

.round-25 {
    min-height: 25vh;
    min-width: 25vh;
    margin: auto;
}

.round-35 {
    min-height: 35vh;
    min-width: 35vh;
    margin: auto;
}

.round-45 {
    min-height: 45vh;
    min-width: 45vh;
    margin: auto;
}

.round-55 {
    min-height: 55vh;
    min-width: 55vh;
    margin: auto;
}

.round-65 {
    min-height: 65vh;
    min-width: 65vh;
    margin: auto;
}

.round-75 {
    min-height: 75vh;
    min-width: 75vh;
    margin: auto;
}

.grid-item[class*=" round-"] {
    place-content: space-around;
    border-radius: 50%;
    width:min-content;
    object-fit:cover;
}

[class*=" round-"] {
    border-radius: 50%;
    place-content: space-around;
}

    [class*=" round-"] .overlay-content {
        border-radius: 50%;
        aspect-ratio: 1 / 1;
        padding: inherit;
        place-content: space-around;
    }

.small-content .grid-item[class*=" round-"],
.mobile .grid-item[class*=" round-"] {
    width:75%;
}

        [class*=" round-"] .overlay-content, [class*=" round-"] .overlay-content * {
            background-color: transparent;
        }

.rounded {
    border-radius: var(--border-radius-small)
}

.pill {
    border-radius: var(--border-radius-pill)
}

.chamfer {
    border-radius: var(--border-radius-chamfer)
}

img.rounded {
    border-radius: var(--border-radius);
}

img.pill {
    border-radius: var(--border-radius-image-pill);
}

img.chamfer {
    border-radius: var(--border-radius-image-chamfer);
}

img[class*=" round-"], img[class^="round-"] {
    border-radius: 100%;
}

img.round-top, img.round-bottom, img.round-left, img.round-right {
    border-radius: var(--border-radius-image-chamfer);
}

[class *='img-round'] img,
[class *='img-round']{
    object-fit: cover;
}

img.round-top {
    border-bottom-left-radius: 0 !important;
    border-bottom-right-radius: 0 !important;
}

img.round-bottom {
    border-top-left-radius: 0 !important;
    border-top-right-radius: 0 !important;
}

img.round-left {
    border-top-right-radius: 0 !important;
    border-bottom-right-radius: 0 !important;
}

img.round-right {
    border-top-left-radius: 0 !important;
    border-bottom-left-radius: 0 !important;
}

img[class*="round-"] {
    border-radius: 100%;
}

img.img-round-20 {
    max-height: 20%;
    width: 20%;
    aspect-ratio: 1 / 1;
}

img.img-round-25 {
    max-height: 25%;
    width: 25%;
    aspect-ratio: 1 / 1;
}

img.img-round-30 {
    max-height: 30%;
    width: 30%;
    aspect-ratio: 1 / 1;
}

img.img-round-35 {
    max-height: 35%;
    width: 35%;
    aspect-ratio: 1 / 1;
}

img.img-round-40 {
    max-height: 40%;
    width: 40%;
    aspect-ratio: 1 / 1;
}

img.img-round-50 {
    max-height: 50%;
    width: 50%;
    aspect-ratio: 1 / 1;
}

img.img-round-60 {
    max-height: 60%;
    width: 60%;
    aspect-ratio: 1 / 1;
}

.img-crop img {
    object-fit: cover !important;
    width: 100%;
    padding: 0px;
    height: 100%;
}

.img-full img {
    object-fit: contain !important;
    width: 100%;
    padding: 0px;
    height: 100%;
}

.content-round-top {
    border-top-left-radius: var(--border-radius);
    border-top-right-radius: var(--border-radius);
}

.content-round-bottom {
    border-bottom-left-radius: var(--border-radius);
    border-bottom-right-radius: var(--border-radius);
}

.content-round-left {
    border-top-left-radius: var(--border-radius);
    border-bottom-left-radius: var(--border-radius);
}

.content-round-right {
    border-top-right-radius: var(--border-radius);
    border-bottom-right-radius: var(--border-radius);
}

.corner-top-left {
    border-top-left-radius: var(--border-radius);
}

.corner-top-right {
    border-top-right-radius: var(--border-radius);
}

.corner-bottom-left {
    border-bottom-left-radius: var(--border-radius);
}

.corner-bottom-right {
    border-bottom-right-radius: var(--border-radius);
}

.mobile [class*="corner-"] {
    border-radius: var(--border-radius);
}

.dome-top {
    border-top-left-radius: 30%;
    border-top-right-radius: 30%;
    padding-top: 5vh !important;
}

.dome-bottom {
    border-bottom-left-radius: 30%;
    border-bottom-right-radius: 30%;
    padding-bottom: 4vh !important;
}

.leaf-left {
    border-radius: 30px 100px;
    padding: 3%;
}

.medium-content.leaf-left {
    border-radius: 30px 85px;
}

.small-content.leaf-left {
    border-radius: 30px 75px;
}

.leaf-right {
    border-radius: 100px 30px;
    padding: 3%;
}

.medium-content.leaf-right {
    border-radius: 85px 30px;
}

.small-content.leaf-right {
    border-radius: 75px 30px;
}

.leaf-left .overlay-content,
.leaf-right .overlay-content {
    width: calc(100% - 50px);
    margin-left: 15px;
    margin-top: 30px;
}

[class*='wash-'].leaf-right .overlay-content:before {
    border-radius: 100px 30px;
}
[class*='wash-'].leaf-left .overlay-content:before {
    border-radius: 30px 100px;
}

[class*='wash-'][class*='leaf-']{
    padding:0px;
}

[class*='wash-'][class*='leaf-'] .overlay-content {
    padding: 10px;
}

[class*='wash-'][class*='leaf-'] .overlay-content p {
    padding: 1% 2%;
}


.desaturate-color-hover img, .desaturate-color-hover .item-headshot {
    filter: grayscale(60%);
    transition: all var(--transition-time-slow) ease-in-out;
}

.gray-color-hover img, .gray-color-hover .item-headshot {
    filter: grayscale(100%);
    transition: all var(--transition-time-slow) ease-in-out;
}


    .desaturate-color-hover img:hover, .desaturate-color-hover .directory-item:hover .item-headshot, .desaturate-color-hover .directory-item:focus-within .item-headshot,
    .gray-color-hover img:hover, .gray-color-hover .directory-item:hover .item-headshot, .gray-color-hover .directory-item:focus-within .item-headshot,
    .desaturate-color-hover .full-view-item .item-headshot, .gray-color-hover .full-view-item .item-headshot,
    .desaturate-color-hover .full-view-item .item-headshot img, .gray-color-hover .full-view-item .item-headshot img {
        filter: grayscale(0%);
        transition: all var(--transition-time) ease-in-out;
    }


/*---------------------------------------------------
    PADDING STYLES
*/


[class*='grid-'][class*='has-content'].padding-zero,
[class*='grid-'][class*='has-content'].padding-zero .overlay-content,
#PageTopMedia [class*='has-content'].padding-zero .overlay-content,
main p.padding-zero, p.padding-zero img,
[id*="preview-content"] .padding-zero,
[id*="box"].padding-zero {
    padding: 0px;
    padding-left: 0px;
    padding-right: 0px;
    padding-top: 0px;
    padding-bottom: 0px;
}

[class*='grid-'][class*='has-content'].padding-thin,
[class*='grid-'][class*='has-content'].padding-thin .overlay-content,
[id*="preview-content"] .padding-thin {
    padding: var(--padding-width-thin);
}

[class*='grid-'][class*='has-content'].padding-medium,
[class*='grid-'][class*='has-content'].padding-medium .overlay-content,
[id*="preview-content"] .padding-medium {
    padding: var(--padding-width-medium);
}

[class*='grid-'][class*='has-content'].padding-thick,
[class*='grid-'][class*='has-content'].padding-thick .overlay-content,
[id*="preview-content"] .padding-thick,
main p.padding-thick, main li.padding-thick, main a.padding-thick {
    padding: var(--padding-width-thick);
}

[class*='grid-'][class*='has-content'].padding-heavy,
[class*='grid-'][class*='has-content'].padding-heavy .overlay-content,
[id*="preview-content"] .padding-heavy,
main p.padding-heavy, main li.padding-heavy, main a.padding-heavy {
    padding: var(--padding-width-heavy);
}

[class*='grid-'][class*='has-content'].padding-ultra,
[class*='grid-'][class*='has-content'].padding-ultra .overlay-content,
[id*="preview-content"] .padding-ultra,
main p.padding-ultra, main li.padding-ultra, main a.padding-ultra {
    padding: var(--padding-width-ultra);
}

[class*='grid-'][class*='has-content'].padding-top-ultra,
[class*='grid-'][class*='has-content'].padding-top-ultra .overlay-content,
[id*="preview-content"] .padding-top-ultra {
    padding-top: var(--padding-width-ultra);
}

/*---------------------------------------------------
    MARGIN STYLES
*/
.margin-top-zero {
    margin-top: 0px;
    padding-top: 0px !important;
    display: inline-block;
}

.margin-bottom-zero {
    margin-bottom: 0px;
    padding-bottom: 0px !important;
    display: inline-block;
}

.margin-top-bottom-zero {
    margin-top: 0px;
    margin-bottom: 0px;
    padding-top: 0px !important;
    padding-bottom: 0px !important;
    display: inline-block;
}

.margin-zero {
    margin: 0;
}

.margin-thin {
    margin: 1vh;
}

.margin-medium {
    margin: 3vh;
}

.margin-thick {
    margin: 8vh;
}

.margin-heavy {
    margin: 12vh;
}

.margin-ultra {
    margin: 18vh;
}

[id*="box"][class*="margin"] {
    margin: 0px;
}

[id*="box"][class*="margin-zero"] .MaxGutter {
    margin: 0px;
    width: 100%;
}

[id*="box"][class*="margin-thin"] .MaxGutter {
    margin: 1vh;
    width: calc(100% - 2vh);
    max-width: calc(100% - 2vh);
}

[id*="box"][class*="margin-medium"] .MaxGutter {
    margin: 3vh;
    width: calc(100% - 6vh);
    max-width: calc(100% - 6vh);
}

[id*="box"][class*="margin-thick"] .MaxGutter {
    margin: 8vh;
    width: calc(100% - 16vh);
    max-width: calc(100% - 16vh);
}

[id*="box"][class*="margin-heavy"] .MaxGutter {
    margin: 12vh;
    width: calc(100% - 24vh);
    max-width: calc(100% - 24vh);
}

[id*="box"][class*="margin-ultra"] .MaxGutter {
    margin: 18vh;
    width: calc(100% - 36vh);
    max-width: calc(100% - 36vh);
}

.mobile [id*="box"][class*="margin-"] .MaxGutter {
    margin: 1vh;
    width: calc(100% - 2vh);
    max-width: calc(100% - 2vh);
}
/*------------------------------
    CONTENT ZERO : REDUCE SPACE AROUND CONENT WITHIN BOXES
*/

[id*="box"].content-zero,
[id*="box"].content-zero .grid-item {
    padding: 0px;
}

[id*="box"].content-zero {
    padding-top: 2px;
    padding-bottom: 4px;
}

    [id*="box"].content-zero .grid-item p {
        margin: 0px;
        padding: 2px;
    }

        [id*="box"].content-zero .grid-item p a {
            display: grid;
            justify-content: center;
        }

    [id*="box"].content-zero .grid-item img {
        padding: 0px;
        margin: auto;
    }

[id*="box"].content-icons .grid-item img {
    max-height: 50px;
    width: auto;
}

[id*="box"].content-icons-large .grid-item img {
    max-height: 80px;
    width: auto;
}

/*----------------------------------------------------
    STAND OUT ELEMENTS
*/
.standout {
    font-size: var(--main-standout-font-size);
    font-weight: 200;
    line-height: calc(var(--main-standout-font-size) - .5em);
    text-wrap: balanced;
}

.super-title .standout {
    font-size: var(--super-title-font-size);
    line-height: var(--super-title-line-height);
}

.standout-block {
    font-size: var(--main-standout-block-font-size);
    font-weight: 300;
    line-height: calc(var(--main-standout-block-font-size) + .25em);
    padding: var(--notice-padding-clamp);
    background-color: var(--cloud) !important;
    color: var(--cloud-text) !important;
    text-wrap: balanced;
}

[id*="box"][class*="stock"] .overlay-content .standout-block,
[id*="box"][class*="screen"] .overlay-content .standout-block {
    background-color: var(--box-shade-background-more) !important;
    color: var(--my-white) !important;
}

[id*='box'].background-1 *.standout-block,
.background-1 *.standout-block, .gradient-1 *.standout-block,
.card-1 *.standout-block {
    background-color: var(--primary-hover) !important;
    color: var(--primary-hover-text) !important;
}

[id*='box'].background-2 *.standout-block,
.background-2 *.standout-block, .gradient-2 *.standout-block,
.card-2 *.standout-block {
    background-color: var(--secondary-hover) !important;
    color: var(--secondary-hover-text) !important;
}

[id*='box'].background-3 *.standout-block,
.background-3 *.standout-block, .gradient-3 *.standout-block,
.card-3 *.standout-block {
    background-color: var(--neutral-hover) !important;
    color: var(--neutral-hover-text) !important;
}

[id*='box'].background-4 *.standout-block,
.background-4 *.standout-block, .gradient-4 *.standout-block,
.card-4 *.standout-block {
    background-color: var(--dark-hover) !important;
    color: var(--dark-hover-text) !important;
}

[id*='box'].background-5 *.standout-block,
.background-5 *.standout-block, .gradient-5 *.standout-block,
.card-5 *.standout-block {
    background-color: var(--accent-1-hover) !important;
    color: var(--accent-1-hover-text) !important;
}

[id*='box'].background-6 *.standout-block,
.background-6 *.standout-block, .gradient-6 *.standout-block,
.card-6 *.standout-block {
    background-color: var(--accent-2-hover) !important;
    color: var(--accent-2-hover-text) !important;
}

[id*='box'].background-black *.standout-block,
.background-black *.standout-block, .gradient-black *.standout-block,
.card-black *.standout-block {
    background-color: var(--my-black-hover) !important;
    color: var(--my-black-hover-text) !important;
}

[id*='box'].background-gray *.standout-block,
.background-gray *.standout-block, .gradient-gray *.standout-block,
.card-gray *.standout-block {
    background-color: var(--my-gray-hover) !important;
    color: var(--my-gray-hover-text) !important;
}

[id*='box'].background-white *.standout-block,
.background-white *.standout-block, .gradient-white *.standout-block,
.card-white *.standout-block {
    background-color: var(--my-white-hover) !important;
    color: var(--my-white-hover-text) !important;
}

/*---------------------------------
    TEXT CROPPING
*/

.text-crop [class*='-text'] {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.text-full [class*='-text'] {
    display: grid !important;
    -webkit-line-clamp: unset !important;
    -webkit-box-orient: unset !important;
    overflow: unset !important;
}

/*------------------------------------------------
    BUTTONS
*/

main [class *='button']:not(.tabbed-content-buttons-section):not([class*='motion-button']) {
    display: inline-flex;
    text-align: center;
    justify-content: center;
    align-items: center;
    text-wrap: balance;
}

main [class*='center'] [class*="button"] {
    justify-content: center;
}

main [class*='left']:not(.left-side):not(.left-nav):not(.border-bottom-left):not(.border-top-left):not(.border-left) [class*="button"],
main [class*="button"][class*="left"] {
    justify-content: flex-start;
    text-align: left !important;
}

main [class*='right']:not(.right-side):not(.motion-move-right) [class*="button"] {
    justify-content: flex-end;
}

main [class*='center-offset'] [class*="button"] {
    justify-content: space-around;
}

main [class*='center-full'] [class*="button"] {
    justify-content: space-between;
}

main [class*='center-even'] [class*="button"] {
    justify-content: space-evenly;
}

main [class*='tab-width-full'] .tabbed-content-buttons-section button {
    width: -webkit-fill-available;
}

main [class *='button'] i {
    font-size: .7em;
    padding: 0px;
    background-color: inherit !important;
    color: inherit !important;
    display: grid;
    align-items: center;
}

main [class *='button-clear'] {
    backdrop-filter: blur(3px);
    display: inline-grid;
}

main .overlay-content [class *='button-clear']:hover,
main .overlay-content [class *='button-clear']:focus {
    backdrop-filter: blur(12px);
    background-color: rgba(var(--primary-rgb), .7);
    z-index: 2;
}

main .overlay-content [class *='button-clear-secondary']:hover,
main .overlay-content [class *='button-clear-secondary']:focus {
    backdrop-filter: blur(12px);
    background-color: rgba(var(--secondary-rgb), .7);
    z-index: 2;
}


main [class *='button-fade'] {
    position: relative;
    backdrop-filter: blur(3px);
}

    main [class *='button-fade']:after {
        content: " ";
        position: absolute;
        z-index: -1;
        background-color: var(--black);
        opacity: 0.70;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
    }

    main [class *='button-fade']:hover:after,
    main [class *='button-fade']:focus:after,
    main [class *='button-clear']:hover:after,
    main [class *='button-clear']:focus:after {
        content: " ";
        position: absolute;
        z-index: -1;
        background-color: var(--primary);
        opacity: 0.45;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
    }

main [class *='button-fade-secondary']:hover:after,
main [class *='button-fade-secondary']:focus:after,
main [class *='button-clear-secondary']:hover:after,
main [class *='button-clear-secondary']:focus:after {
    background-color: var(--secondary);
}

main [class*='button'][class*='button-width-'],
main [class *='button'][class*='button-width-']:not(.tabbed-content-buttons-section):not([class*='motion-button']) {
    text-align: center;
    /*justify-content:space-around;
    display: inline-block;*/
}

main [class*='button'][class*='button-width-20'] {
    min-width: 20% !important;
}

main [class*='button'][class*='button-width-30'] {
    min-width: 30% !important;
}

main [class*='button'][class*='button-width-40'] {
    min-width: 40% !important;
}

main [class*='button'][class*='button-width-50'] {
    min-width: 50% !important;
}

main [class*='button'][class*='button-width-60'] {
    min-width: 60% !important;
}

main [class*='button'][class*='button-width-70'] {
    min-width: 70% !important;
}

main [class*='button'][class*='button-width-80'] {
    min-width: 80% !important;
}

main [class*='button'][class*='button-width-90'] {
    min-width: 90% !important;
}

main [class*='button'][class*='button-width-100'] {
    min-width: 100% !important;
}

.mobile [class*='button']:not([class*='button-width']),
.small-content [class*='button']:not([class*='button-width']) {
    width: 100%;
}

.button-thin {
    min-height: 34px;
    padding: 2px !important;
    line-height: unset;
}

.button-medium {
    min-height: 60px;
    align-items:center;
}

.button-thick {
    min-height: 80px;
    align-items: center;
}

.button-heavy {
    min-height: 100px;
    align-items: center;
}

.button-ultra {
    min-height: 125px;
    align-items: center;
}

.service-button .overlay-content {
    height: 100%;
    width: 100%;
}

    .service-button .overlay-content p {
        height: 100%;
    }

.service-button [class*='button-'], [class*='button-'].service-button {
    height: 100%;
    width: 100%;
    text-align: center;
    font-weight: bold;
    align-items: center;
    align-content:center;
}

/*-------------------------------------------------------------
   TOP MEDIA / IMAGE FULL
*/

.image-full .overlay-content,
.image-full .overlay-content p {
    margin: 0px;
    width: 100%;
    max-width: unset;
    padding: 0px !important;
    line-height: 0px;
}

    .image-full .overlay-content img {
        width: 100%;
        object-fit: cover;
        height: auto;
        padding: 0px;
    }

#div-top-media {
    background-size: inherit;
}

/*-------------------------------------------------------------
    OVERLAY CONTENT / WASHES
*/
[class *='screen-'] .overlay-content, [class *='wash-'] .overlay-content, [class *='darken'] .overlay-content {
    /*   background-color: rgba(0,0,0,0.45);*/
    padding: 1.25rem;
    z-index: 2;
}

    [class *='screen-'] .overlay-content *:not(button),
    [class *='wash-'] .overlay-content *:not(button),
    [class *='darken'] .overlay-content *:not(button) {
        /*   background-color: rgba(0,0,0,0.45);
        color: var(--cloud);*/
        /*text-shadow: 0px 0px 1px rgba(0,0,0,0.85);*/
        font-weight: bold;
    }

[class *='wash-'] .overlay-content {
    width: fit-content;
    margin: auto;
}

[class *='darken'] .overlay-content:before {
    background-color: var(--box-shade-background);
    content: " ";
    position: absolute;
    top: 0px;
    left: 0px;
    right: 0px;
    bottom: 0px;
}

[id*="box"][class*='stock-'] div[id*='div']:not([class*='background']) .overlay-content *:not(.visually-hidden):not(.standout-block):not([class*='button-']):not([class*='card-']):not([class*='feature-']),
[id*="box"][class*='stock-'] div[class*='EditInfo'],
[id*="box"][class*='screen'] div[id*='div']:not([class*='background']) .overlay-content > *:not(.visually-hidden):not(.standout-block):not([class*='button-']):not([class*='card-']):not([class*='feature-']),
[id*="box"][class*='screen'] div[class*='EditInfo'],
[id*="div-"].section-stock .overlay-content,
[id*="div-"].section-stock .overlay-content *:not(.visually-hidden):not(.standout-block):not([class*='button-']):not([class*='card-']):not([class*='feature-']),
[id*="grid-item"].section-stock .overlay-content *:not([class*='button-']):not([class*='card-']):not([class*='feature-']):not([class*='directory-']),
[id*="grid-item"].section-stock .overlay-content [csspath*='/ou/'] *,
[id*="div"][css*="stock"] .overlay-content *:not([class*='button-']):not([class*='card-']):not([class*='feature-']):not([class*='directory-']),
[id*="div"][desktop*="."] .overlay-content *,
[id*="div"][mobile*="."] .overlay-content * {
    color: var(--my-white);
    background-color: var(--background-overlay);
    text-shadow: var(--text-shadow-image-bg);
}

[id*="box"][class*='stock-'] div[id*='div'] .overlay-content [class*='notice'], [id*="box"][class*='stock-'] div[id*='div'] .overlay-content [class*='notice'] *,
[id*="box"][class*='screen-'] div[id*='div'] .overlay-content [class*='notice'], [id*="box"][class*='screen-'] div[id*='div'] .overlay-content [class*='notice'] * {
    text-shadow: none !important;
    font-weight: 400;
    color: var(--default-text) !important;
}

    [id*="box"][class*='stock-'] div[id*='div'] .overlay-content [class*='notice'] strong,
    [id*="box"][class*='screen-'] div[id*='div'] .overlay-content [class*='notice'] strong {
        font-weight: bold;
    }

[id*="box"][class*='stock-'] div[id*='div'] .overlay-content [class*='notice-alert'] strong,
[id*="box"][class*='screen-'] div[id*='div'] .overlay-content [class*='notice-alert'] strong {
    font-weight: bold;
    color: var(--alert-red-icon) !important;
}

[id*="box"][class*='stock-'] .overlay-content a,
[id*="box"][class*='screen'] .overlay-content a,
[id*="grid-item"].section-stock .overlay-content a {
    text-decoration-color: var(--secondary-hover);
    text-underline-offset: var(--text-underline-offset-more);
}

    [id*="box"][class*='stock-'] .overlay-content a:hover, [id*="box"][class*='stock-'] .overlay-content a:focus,
    [id*="box"][class*='screen'] .overlay-content a:hover, [id*="box"][class*='screen'] .overlay-content a:focus,
    [id*="grid-item"].section-stock .overlay-content a:hover, [id*="grid-item"].section-stock .overlay-content a:focus {
        text-decoration-color: var(--orange-hover);
    }

[id*="div"][css*="stock"] .overlay-content p {
    font-weight: 400;
}

[id*="box"][class *='stock-'] div:not([class*='background']) .overlay-content a:not([class*='button']),
[id*="box"][class *='screen-'] div:not([class*='background']) .overlay-content a:not([class*='button']) {
    color: var(--my-white);
}

[id*="box"][class*='stock-'] [id*="div"][class*="background-"] .overlay-content *,
[id*="div"][class*="background-"] .overlay-content * {
    text-shadow: none;
}

.wash-dark .overlay-content {
    background-color: var(--box-shade-background) !important;
}

.wash-darker .overlay-content {
    background-color: var(--box-shade-background-more) !important;
}

.wash-darkest .overlay-content {
    background-color: var(--box-shade-background-most) !important;
}

.wash-light .overlay-content {
    background-color: var(--background-shade-light) !important;
}

.wash-lighter .overlay-content {
    background-color: var(--background-shade-lighter) !important;
}

.wash-lightest .overlay-content {
    background-color: var(--background-shade-lightest) !important;
}

[class*='wash-light'] .overlay-content * {
    color: var(--my-black) !important;
    text-shadow: none !important;
}

/*-- SPECIAL CASES STOCK NO DARKEN / LIGHTEN AND PRIMARY FOR COLOR --*/

.stock-graphic-6 .overlay-content *:not(a, .button, .feature, .card, .snapshot),
.stock-graphic-7 .overlay-content *:not(a, .button, .feature, .card, .snapshot),
.stock-graphic-8 .overlay-content *:not(a, .button, .feature, .card, .snapshot),
.stock-graphic-9 .overlay-content *:not(a, .button, .feature, .card, .snapshot),
.stock-graphic-10 .overlay-content *:not(a, .button, .feature, .card, .snapshot),
.stock-graphic-11 .overlay-content *:not(a, .button, .feature, .card, .snapshot),
.stock-graphic-12 .overlay-content *:not(a, .button, .feature, .card, .snapshot),
.stock-graphic-13 .overlay-content *:not(a, .button, .feature, .card, .snapshot),
.stock-graphic-14 .overlay-content *:not(a, .button, .feature, .card, .snapshot) {
    color: var(--primary) !important;
    text-shadow: none !important;
    background-color: rgba(255,255,255, .01) !important;
    /*text-shadow: 2px 2px 2px rgba(0,0,0,.15) !important*/
}


.stock-graphic-17 .overlay-content *:not(h1, h2, h3, h4, .feature, .card, .snapshot) {
    font-weight: bold;
}

/*---------------------------------------------------
    DARKEN / LIGHTEN AREAS
*/
.breakout-shade-dark:after,
.breakout-shade-darker:after,
.breakout-shade-darkest:after,
.breakout-shade-light:after,
.breakout-shade-lighter:after,
.breakout-shade-lightest:after,
.shade-dark .overlay-content:before,
.shade-darker .overlay-content:before,
.shade-darkest .overlay-content:before,
.shade-light .overlay-content:before,
.shade-lighter .overlay-content:before,
.shade-lightest .overlay-content:before {
    content: " ";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: -1;
    /*  mix-blend-mode: color;
    isolation: isolate;*/
}

[id*='box'].shade-dark:before {
    background-color: var(--background-shade-dark) !important;
}

.shade-dark > .overlay-content:before,
[class*='grid-row'] .grid-background.breakout-shade-dark:after {
    background-color: var(--background-shade-dark);
}

[id*='box'].shade-darker:before {
    background-color: var(--background-shade-darker) !important;
}

.shade-darker > .overlay-content:before,
.breakout-shade-darker:after {
    background-color: var(--background-shade-darker);
}

[id*='box'].shade-darkest:before {
    background-color: var(--background-shade-darkest) !important;
}

.shade-darkest > .overlay-content:before,
.breakout-shade-darkest:after {
    background-color: var(--background-shade-darkest);
}

[id*='box'].shade-light:before {
    background-color: var(--background-shade-light) !important;
}

.shade-light > .overlay-content:before,
.breakout-shade-light:after {
    background-color: var(--background-shade-light);
}

[id*='box'].shade-lighter:before {
    background-color: var(--background-shade-lighter) !important;
}

.shade-lighter > .overlay-content:before,
.breakout-shade-lighter:after {
    background-color: var(--background-shade-lighter);
}

[id*='box'].shade-lightest:before {
    background-color: var(--background-shade-lightest) !important;
}

.shade-lightest > .overlay-content:before,
.breakout-shade-lightest:after {
    background-color: var(--background-shade-lightest);
}

.shade-light, .shade-lighter, .shade-lightest,
.breakout-shade-light, .breakout-shade-lighter, .breakout-shade-lightest {
    backdrop-filter: blur(2px);
}

[id*='box'][class*='shade-light'] .overlay-content *,
[id*='div'][class*='shade-light'] .overlay-content *,
[id*='box'][class*='shade-light'] .overlay-content *:not(.visually-hidden),
[id*='div'][class*='shade-light'] .overlay-content *:not(.visually-hidden) {
    color: var(--black);
    text-shadow: none;
}

/*-----------------------------------------------------------
    BREAKOUT BOX OVERLAY FIXES
--------------------------------------------------------------*/

.breakout-box .grid-row .grid-item[class*='stock'],
.breakout-box .grid-row .grid-item[class*='stock']:after {
    background-image: unset;
    background-color: transparent;
}


/*--------------------------------------------------------------
    BACKGROUND IMAGES AND OVERLAY SETTINGS
------------------------------------------------------------------*/

[id*="box"][class*='stock-'][class*='wash-titan-blue']:before,
[id*="box"][class*='screen'][class*='wash-titan-blue']:before {
    background-color: var(--titan-blue);
}

[id*="box"][class*='stock-'][class*='wash-medium-blue']:before,
[id*="box"][class*='screen'][class*='wash-medium-blue']:before {
    background-color: var(--medium-blue);
}

[id*="box"][class*='stock-'][class*='wash-light-blue']:before,
[id*="box"][class*='screen'][class*='wash-light-blue']:before {
    background-color: var(--light-blue);
}

[id*="box"][class*='stock-'][class*='wash-white']:before,
[id*="box"][class*='screen'][class*='wash-white']:before {
    background-color: var(--my-white);
}

[id*="box"][class*='stock-'][class*='wash-orange']:before,
[id*="box"][class*='screen'][class*='wash-orange']:before {
    background-color: var(--orange);
}

*[id*="box"][class*='stock-'] .overlay-content div[class*='ou-justedit'] *,
*[id*="box"][class*='screen'] .overlay-content div[class*='ou-justedit'] * {
    color: var(--black);
}

/*------------------------------------------------
   PageTopMedia_Max
------------------------------------------------*/
#PageTopMedia .TopMediaMax.container, #PageTopMedia .top-media-max.container {
    max-width: 100% !important;
}

/*------------------------------------------------
    IMAGES MAX SIZE
------------------------------------------------*/
.ImageMax p, .ImageMax div,
.image-max p, .image-max div {
    margin-left: 0px !important;
    margin-right: 0px !important;
    padding-left: 0px !important;
    padding-right: 0px !important;
    text-align: center;
}

.ImageMax img,
.image-max img {
    max-width: 100% !important;
    min-width: 100%;
    box-sizing: border-box;
    height: auto;
    margin: 0px;
    padding: 0px;
    border: 0px;
}


/*-------------------------------------------------------
    CONTENT BLOCK THAT HAS CONTENT
--------------------------------------------------------*/
/*#centercontent .hascontent, .hascontent */
[class*="T4_"][class*="hascontent"] {
    margin-bottom: 10px;
}

.TopMedia .hascontent {
    margin-bottom: 0px !important;
}

/*-------------------------------------------------------
   EXTRA SPACE AROUND CONTENT
--------------------------------------------------------*/

.extra_padding, .extra-padding {
    padding: 3% !important;
}



/*----------BORDER MODIFIERS---------------------------------------------------*/

.NoBorders, .NoBorder, .no-border, .no-borders {
    border: 0px !important;
}

.NoLeftBorder, .no-left-border {
    border-left: 0px !important;
}

.NoTopBorder, .no-top-border {
    border-top: 0px !important;
}

.NoRightBorder, .no-right-border {
    border-right: 0px !important;
}

.NoBottomBorder, .no-bottom-border {
    border-bottom: 0px !important;
}

/*----------PADDING MODIFIERS------------------------------------------------*/

.NoPadding, .no-padding {
    padding: 0px !important;
}

.NoLeftPadding, .no-left-padding {
    padding-left: 0px !important;
}

.NoTopPadding, .no-top-padding {
    padding-top: 0px !important;
}

.NoRightPadding, .no-right-padding {
    padding-right: 0px !important;
}

.NoBottomPadding, .no-bottom-padding {
    padding-bottom: 0px !important;
}

/*----------MARGIN MODIFIERS------------------------------------------------*/

.NoMargin, .NoMargin *, #centercontent .hascontent.NoMargin,
.no-margin, .no-margin *, #centercontent .hascontent.no-margin {
    margin: 0px !important;
    margin-left: 0px !important;
    margin-top: 0px !important;
    margin-right: 0px !important;
    margin-bottom: 0px !important;
}

.NoLeftMargin, .no-left-margin {
    margin-left: 0px !important;
}

.NoTopMargin, .no-top-margin {
    margin-top: 0px !important;
}

.NoRightMargin, .no-right-margin {
    margin-right: 0px !important;
}

.NoBottomMargin, .no-bottom-margin {
    margin-bottom: 0px !important;
}


/*---------------------------------------------
    BLUR EFFECT
-------------------------------------------------*/

.blur {
    -webkit-filter: blur(5px);
    -moz-filter: blur(5px);
    -o-filter: blur(5px);
    -ms-filter: blur(5px);
    filter: blur(5px);
}


.no-blur {
    -webkit-filter: blur(0px);
    -moz-filter: blur(0px);
    -o-filter: blur(0px);
    -ms-filter: blur(0px);
    filter: blur(0px);
}

/*-------------------------------------------------------
    SHADOWS
--------------------------------------------------------*/

.shadow {
    box-shadow: var(--box-shadow);
}

.shadow-lite {
    box-shadow: var(--box-shadow-less);
}

.shadow-push {
    box-shadow: var(--box-shadow-more);
}

.shadow-center {
    box-shadow: rgba(0, 0, 0, 0.05) 0px 6px 24px 0px, rgba(0, 0, 0, 0.08) 0px 0px 0px 1px;
}

.shadow-center-lite {
    box-shadow: rgba(99, 99, 99, 0.2) 0px 2px 8px 0px;
}

.shadow-center-push {
    box-shadow: rgba(0, 0, 0, 0.2) 0px 12px 28px 0px, rgba(0, 0, 0, 0.1) 0px 2px 4px 0px, rgba(255, 255, 255, 0.05) 0px 0px 0px 1px inset
}

.shadow-down-lite {
    box-shadow: rgba(0, 0, 0, 0.10) 0px 2px 4px;
}

.shadow-down {
    box-shadow: rgba(0, 0, 0, 0.25) 0px 4px 6px -1px, rgba(0, 0, 0, 0.16) 0px 2px 4px -1px;
}

.shadow-down-push {
    box-shadow: rgba(0, 0, 0, 0.4) 0px 2px 4px, rgba(0, 0, 0, 0.3) 0px 7px 13px -3px, rgba(0, 0, 0, 0.2) 0px -3px 0px inset;
}

.inset-shadow-lite {
    box-shadow: 0px 0px 4px 2px rgba(0,0,0,.1) inset;
}

.inset-shadow {
    box-shadow: 0px 0px 4px 2px rgba(0,0,0,.2) inset;
}

.inset-shadow-push {
    box-shadow: 0px 0px 6px 2px rgba(0,0,0,.3) inset;
}

.shadow-1 {
    box-shadow: rgba(var(--primary-rgb), 0.25) 0px 7px 16px -1px, rgba(var(--primary-rgb), 0.3) 0px 4px 3px -1px;
}

.shadow-2 {
    box-shadow: rgba(var(--secondary-rgb), 0.25) 0px 7px 16px -1px, rgba(var(--secondary-rgb), 0.3) 0px 4px 3px -1px;
}

.shadow-3 {
    box-shadow: rgba(var(--neutral-rgb), 0.25) 0px 7px 16px -1px, rgba(var(--neutral-rgb), 0.3) 0px 4px 3px -1px;
}

.shadow-4 {
    box-shadow: rgba(var(--dark-rgb), 0.25) 0px 7px 16px -1px, rgba(var(--dark-rgb), 0.3) 0px 4px 3px -1px;
}

.shadow-5 {
    box-shadow: rgba(var(--accent-1-rgb), 0.25) 0px 7px 16px -1px, rgba(var(--accent-1-rgb), 0.3) 0px 4px 3px -1px;
}

.shadow-6 {
    box-shadow: rgba(var(--accent-2-rgb), 0.25) 0px 7px 16px -1px, rgba(var(--accent-2-rgb), 0.3) 0px 4px 3px -1px;
}

.shadow-pride {
    box-shadow: rgb(85, 91, 255) 0px 0px 0px 3px, rgb(31, 193, 27) 0px 0px 0px 6px, rgb(255, 217, 19) 0px 0px 0px 9px, rgb(255, 156, 85) 0px 0px 0px 12px, rgb(255, 85, 85) 0px 0px 0px 15px, rgb(139,69,19) 0px 0px 0px 18px, rgb(0, 0, 0) 0px 0px 0px 21px, rgba(0, 0, 0, .2) 0px 0px 20px 24px;
}

/*----------------------------------------------------------------------
    ADDITIONAL TEXT EDITOR STYLES
------------------------------------------------------------------*/
.textRed {
    color: #ad0000;
}

/*--------------------------------------------------------------------
ALERT MESSAGE 
----------------------------------------------------------------------*/
#AlertMSG {
    margin: 1%;
    margin-top: 2%;
    padding: .5%;
    border-left: solid 1px #2366AD;
    border-top: solid 1px #2366AD;
    border-right: solid 3px #225588;
    border-bottom: solid 3px #225588;
    background-color: #EFEEE7;
    color: #595959;
    font-weight: bold;
    box-shadow: 3px 5px 3px rgba(0,0,0,.4);
}

    #AlertMSG h1 {
        color: #225588;
    }


/*------------------------------------------------------------------------------
title style, used for p tags which are not mean to be headers
---------------------------------------------------------------------------------*/
.title {
    /* font-weight: bold;
    font-size: .875em;
    text-transform: uppercase;
    color: var(--gray);
    background-color: inherit;
    margin-bottom: 1em;*/
}

/*----------------------------------------------------------------------------
    INFO FACTS
*/
.grid-item[class*='fact-plates'] {
    /* display: block;*/
}

    .grid-item[class*='fact-plates'] .overlay-content {
        height: 100%;
    }

[class*='fact-plates'] ul {
    border-radius: 50%;
    border: solid 8px var(--border-gray);
    width: auto;
    height: auto;
    aspect-ratio: 1 / 1;
    list-style: none;
    margin: auto;
    padding: 8%;
    position: relative;
    display: grid;
    justify-content: space-evenly;
    text-align: center;
    align-content: center;
    z-index: 5;
}

[class*='fact-plates-ring-thin'] ul {
    border-width: 1px;
    width: max-content;
}

[class*='fact-plates-small'] ul {
    width: max-content;
    padding: 30px;
}

.tablet-small .small-content[class*='fact-plates'] ul, .tablet [class*='fact-plates'] ul, .mobile [class*='fact-plates'] ul {
    border-radius: var(--border-radius-chamfer);
    transition: all var(--transition-time);
    width: 100%;
    height: 100%;
    min-height: 5vw;
    min-width: 15vw;
    padding: 3vh;
}

[class*='fact-plates'] ul:before {
    content: "";
    position: absolute;
    top: 0px;
    bottom: 0px;
    left: 0px;
    right: 0px;
    border: solid 4px #fff;
    border-radius: 50%;
    z-index: 6;
}

[class*='fact-plates-ring-thin'] ul:before {
    border-width: 0px;
}

.tablet-small .small-content[class*='fact-plates'] ul:before,
.tablet [class*='fact-plates'] ul:before,
.mobile [class*='fact-plates'] ul:before {
    border-radius: var(--border-radius-chamfer);
    transition: all var(--transition-time-fase);
    top: -2px;
    bottom: -2px;
    left: -2px;
    right: -2px;
}


/* four column layout gets too large to use*/
[class*='grid-layout-4-'] [class*='fact-plates'] ul {
    border-radius: var(--border-radius-chamfer);
    height: unset;
}

    /* four column layout gets too large to use*/
    [class*='grid-layout-4-'] [class*='fact-plates'] ul:before {
        border-radius: var(--border-radius-chamfer);
    }

[class*='fact-plates'] ul li {
    z-index: 7;
    font-size: var(--font-size-reduced);
}

    [class*='fact-plates'] ul li:first-child, [class*='fact-plates'] ul li:first-child * {
        font-size: 2.5rem;
        margin: 0;
        margin-top: auto;
        padding: 0;
        text-align: center;
        line-height: unset;
    }

    [class*='fact-plates'] ul li:first-child {
        border-bottom: dotted 4px;
        display: grid;
        place-content: center;
        padding-bottom: 20px;
    }

        [class*='fact-plates'] ul li:first-child.medium {
            font-size: 2.75rem;
        }

        [class*='fact-plates'] ul li:first-child.large {
            font-size: 3rem;
        }

        [class*='fact-plates'] ul li:first-child.larger {
            font-size: 4rem;
        }

    [class*='fact-plates'] ul li:nth-child(2) {
        display: grid;
        place-content: center;
        padding-top: 8px;
    }

[class*='fact-plates'] ul li {
    margin: 0px;
    align-content: center;
}

.fact-plates-1 ul {
    background-color: var(--primary) !important;
    color: var(--primary-text) !important;
    border-color: var(--primary-border-alt);
}

.fact-plates-1 li,
[id*='box'][class*='stock'] .grid-item.fact-plates-1 li {
    color: var(--primary-text) !important;
}

.fact-plates-2 ul {
    background-color: var(--secondary) !important;
    color: var(--secondary-text) !important;
    border-color: var(--secondary-border-alt);
}

.fact-plates-2 li,
[id*='box'][class*='stock'] .grid-item.fact-plates-2 li {
    color: var(--secondary-text) !important;
}

.fact-plates-3 ul {
    background-color: var(--neutral) !important;
    color: var(--neutral-text) !important;
    border-color: var(--neutral-border-alt);
}

    .fact-plates-3 ul:before {
        border-color: var(--cloud);
    }

.fact-plates-3 li,
[id*='box'][class*='stock'] .grid-item.fact-plates-3 li {
    color: var(--neutral-text) !important;
    text-shadow: var(--text-shadow-none) !important;
}

.fact-plates-4 ul {
    background-color: var(--dark) !important;
    color: var(--dark-text) !important;
    border-color: var(--dark-border-alt);
}

.fact-plates-4 li,
[id*='box'][class*='stock'] .grid-item.fact-plates-4 li {
    color: var(--dark-text) !important;
}

.fact-plates-5 ul {
    background-color: var(--accent-1) !important;
    color: var(--accent-1-text) !important;
    border-color: var(--accent-1-border-alt);
}

.fact-plates-5 li,
[id*='box'][class*='stock'] .grid-item.fact-plates-5 li {
    color: var(--accent-1-text) !important;
    text-shadow: var(--text-shadow-none) !important;
}

.fact-plates-6 ul {
    background-color: var(--accent-2) !important;
    color: var(--accent-2-text) !important;
    border-color: var(--accent-2-border-alt);
}

.fact-plates-6 li,
[id*='box'][class*='stock'] .grid-item.fact-plates-6 li {
    color: var(--accent-2-text) !important;
    text-shadow: var(--text-shadow-none) !important;
}

.fact-plates-black ul {
    background-color: var(--my-black) !important;
    color: var(--my-black-text) !important;
    border-color: var(--my-black-border-alt);
}

.fact-plates-black li,
[id*='box'][class*='stock'] .grid-item.fact-plates-black li {
    color: var(--my-black-text) !important;
}

.fact-plates-gray ul {
    background-color: var(--my-gray) !important;
    color: var(--my-gray-text) !important;
    border-color: var(--my-gray-border-alt);
}

.fact-plates-gray li,
[id*='box'][class*='stock'] .grid-item.fact-plates-gray li {
    color: var(--my-gray-text) !important;
    text-shadow: var(--text-shadow-none) !important;
}

.fact-plates-white ul{
    background-color: var(--my-white) !important;
    color: var(--my-white-text) !important;
    border-color: var(--my-white-border-alt);
}

.fact-plates-white li,
[id*='box'][class*='stock'] .grid-item.fact-plates-white li {
    color: var(--my-white-text) !important;
    text-shadow: var(--text-shadow-none) !important;
}


[class*="fact-block"] ul {
    display: grid;
    grid-template-areas: "factoid content";
    grid-template-columns: 1fr 2fr;
    margin: 0;
    padding: 0;
    min-height: 6vh;
    border: solid 5px var(--my-gray-hover);
    background-color: var(--my-white) !important;
    color: var(--my-white-text) !important;
    list-style: none;
    border-radius: var(--border-radius);
    box-shadow: rgba(0, 0, 0, 0.25) 0px 4px 6px -1px, rgba(0, 0, 0, 0.16) 0px 2px 4px -1px;
}

[class*='fact-block'][class*='fact-reverse'] ul,
[class*='fact-block'][class*='fact-zigzag'] ul.even {
    grid-template-areas: "content factoid";
    grid-template-columns: 2fr 1fr;
}


[class*="fact-block"] li {
    display: grid;
    grid-template-columns: 1fr;
    place-content: center;
    padding: 8px;
    padding-left: 45px;
    margin: 0;
    background-color: var(--my-white);
    color: var(--my-white-text);
    border-radius: 26px;
}

.mobile [class*="fact-block"] li,
[class*="fact-block"].small-content li {
    font-size: var(--font-size);
}

[class*='fact-block'][class*='fact-reverse'] ul li,
[class*='fact-block'][class*='fact-zigzag'] ul.even li {
    padding: 8px;
    padding-left: 10px;
    padding-right: 35px;
}

[class*="fact-block"] li:first-child {
    grid-area: factoid;
    display: grid;
    place-content: space-evenly;
    text-align: center;
    margin: 0;
    padding: 0;
    background-color: var(--my-gray);
    color: var(--my-gray-text);
    position: relative;
    border-radius: 30px 14% 14% 30px / 30px 100% 100% 30px;
    border-top-left-radius: 26px;
    border-bottom-left-radius: 26px;
    z-index: 5;
    width: 100%;
    font-size: var(--font-size-extra-large);
}

.mobile [class*="fact-block"] li:first-child,
[class*="fact-block"].small-content li:first-child {
    font-size: var(--font-size-large);
}

[class*='fact-block'][class*='fact-reverse'] ul li:first-child,
[class*='fact-block'][class*='fact-zigzag'] ul.even li:first-child {
    border-radius: 10% 30px 30px 10% / 94% 30px 30px 95%;
}

    [class*='fact-block'][class*='fact-reverse'] ul li:first-child:after,
    [class*='fact-block'][class*='fact-zigzag'] ul.even li:first-child:after {
        left: unset;
        right: 112%;
    }

[class*="fact-block-1"] ul {
    border-color: var(--primary-border-alt);
}

[class*="fact-block-1"] li:first-child {
    background-color: var(--primary);
    color: var(--primary-text);
}

[class*="fact-block-2"] ul {
    border-color: var(--secondary-border-alt);
}

[class*="fact-block-2"] li:first-child {
    background-color: var(--secondary);
    color: var(--secondary-text);
}

[class*="fact-block-3"] ul {
    border-color: var(--neutral-border-alt);
}

[class*="fact-block-3"] li:first-child {
    background-color: var(--neutral);
    color: var(--neutral-text);
}

[class*="fact-block-4"] ul {
    border-color: var(--dark-border-alt);
}

[class*="fact-block-4"] li:first-child {
    background-color: var(--dark);
    color: var(--dark-text);
}

[class*="fact-block-5"] ul {
    border-color: var(--accent-1-border-alt);
}

[class*="fact-block-5"] li:first-child {
    background-color: var(--accent-1);
    color: var(--accent-1-text);
}

[class*="fact-block-6"] ul {
    border-color: var(--accent-2-border-alt);
}

[class*="fact-block-6"] li:first-child {
    background-color: var(--accent-2);
    color: var(--accent-2-text);
}

[class*="fact-block-black"] ul {
    border-color: var(--my-black-border-alt);
}

[class*="fact-block-black"] li:first-child {
    background-color: var(--my-black);
    color: var(--my-black-text);
}

[class*="fact-block-gray"] ul {
    border-color: var(--my-gray-border-alt);
}

[class*="fact-block-gray"] li:first-child {
    background-color: var(--my-gray);
    color: var(--my-gray-text);
}

[class*="fact-block-white"] ul {
    border-color: var(--my-white-border-alt);
}

[class*="fact-block-white"] li:first-child {
    background-color: var(--my-white-hover);
    color: var(--my-white-hover-text);
}

[class*="fact-large"] ul {
    display: grid;
    grid-template-areas: "factoid content";
    grid-template-columns: 1fr 2fr;
    margin: 0;
    padding: 0;
    min-height: 6vh;
    border: none;
    list-style: none;
}

[class*="fact-large-top"] ul {
    display: grid;
    grid-template-areas: "factoid"
        " content";
    grid-template-columns: 1fr;
}



[class*="fact-large-right"] ul {
    display: grid;
    grid-template-areas: "content factoid";
    grid-template-columns: 1fr 1fr;
}

[class*='fact-large'][class*='fact-reverse'] ul,
[class*='fact-large'][class*='fact-zigzag'] ul.even {
    grid-template-areas: "content factoid";
    grid-template-columns: 1fr 1fr;
}


[class*="fact-large"] li {
    display: grid;
    grid-template-columns: 1fr;
    place-content: center;
    padding: 4px;
    margin: 0;
}

.mobile [class*="fact-large"] li,
[class*="fact-large"].small-content li {
    font-size: var(--font-size);
}

[class*='fact-large'][class*='fact-reverse'] ul li,
[class*='fact-large'][class*='fact-zigzag'] ul.even li {
    padding: 8px;
    padding-left: 10px;
    padding-right: 35px;
}

[class*="fact-large"] li:first-child {
    grid-area: factoid;
    display: grid;
    place-content: space-evenly;
    text-align: center;
    margin: 0;
    padding: 0px 10px;
    position: relative;
    z-index: 5;
    width: max-content;
    font-size: var(--font-size-large-fact);
    font-weight: 900;
    color: var(--secondary) !important;
}

.dark-mode [class*="fact-large"] li:first-child {
    color: var(--secondary-text) !important;
}

[class*="fact-large-top"] li:first-child {
    width: 100%;
}

[class*="fact-large"] li.larger:first-child {
    font-size: var(--font-size-large-fact-larger);
}

.mobile [class*="fact-large"] li:first-child {
    font-size: var(--font-size-extra-large);
}

.mobile [class*="fact-large"] ul {
    grid-template-areas: unset;
    grid-template-columns: 1fr;
}

.mobile [class*="fact-large"] li {
    grid-area: unset;
    width: 100%;
    padding: 8px;
}

.background-3 [class*="fact-large"] li:first-child, .background-3 [class*="fact-large"] li:first-child *,
.background-gray [class*="fact-large"] li:first-child, .background-gray [class*="fact-large"] li:first-child *,
.background-white [class*="fact-large"] li:first-child, .background-white [class*="fact-large"] li:first-child * {
    color: var(--secondary) !important;
}

[class*="fact-large-1"] ul {
    border-color: var(--primary-hover);
}

[class*="fact-large-1"] li:first-child {
    background-color: var(--primary);
    color: var(--primary-text);
}

    [class*="fact-large-1"] li:first-child:after {
        background-color: var(--primary-hover);
    }

[class*='fact-leaf'] ul {
    border-radius: var(--border-radius-big-pill);
    border-left-color: var(--light-gray);
    border-top-color: var(--light-gray);
    border-right-color: var(--border-gray);
    border-bottom-color: var(--border-gray);
    border-width: 3px;
    border-style: solid;
    position: relative;
    list-style: none;
    padding: 1vh;
    padding-left: 10vw;
    box-shadow: rgb(0 0 0 / 40%) 0px 2px 4px, rgb(0 0 0 / 30%) 0px 7px 13px -3px, rgb(0 0 0 / 20%) 0px -3px 0px inset;
    background: linear-gradient(calc(.3*90deg), #e6e6e6, #ececec) padding-box, linear-gradient(to right bottom, #fff, #c8c8c8) border-box;
}

.tablet [class*='fact-leaf'] ul,
.mobile [class*='fact-leaf'] ul,
[class*='fact-leaf'].small-content ul {
    padding-left: 135px;
    margin-bottom: 3vh;
}

[class*='fact-leaf'][class*='fact-reverse'] ul, [class*='fact-leaf'][class*='fact-zigzag'] ul.even {
    padding-left: 25px;
    padding-right: 110px;
}

[class*='fact-leaf'] ul li {
    margin: 0px;
    padding: 4px;
    display: grid;
    grid-template-columns: 1fr;
    align-content: center;
    text-align: center;
    color: var(--my-black) !important;
    font-weight: bold;
    text-shadow: none !important;
}

    [class*='fact-leaf'] ul li:first-child {
        position: absolute;
        left: 20px;
        top: -20px;
        height: calc(100% + 40px);
        width: auto;
        min-width: 8vw;
        border-radius: 50% 0% 50% 0 / 50% 5% 50% 5%;
        -moz-border-radius: 50% 0% 50% 0 / 50% 5% 50% 5%;
        -webkit-border-radius: 50% 0% 50% 0 / 50% 5% 50% 5%;
        border: solid 4px var(--border-gray);
        border-left-color: var(--border-gray);
        border-top-color: var(--border-gray);
        border-right-color: var(--light-gray);
        border-bottom-color: var(--light-gray);
        background: var(--light-gray);
        background: linear-gradient(45deg, var(--border-gray), var(--light-gray));
        color: var(--light-gray-text) !important;
        box-shadow: var(--box-shadow);
        box-shadow: -7px 6px 15px 2px rgb(0 0 0 / 50%);
        display: grid;
        place-content: center;
        font-size: var(--font-size-extra-large);
        text-shadow: var(--text-shadow);
        text-align: center;
    }

[class*='fact-leaf'].small-content ul li:first-child,
.mobile [class*='fact-leaf'] ul li:first-child {
    font-size: var(--font-size-large);
    width: 100px;
}

[class*='fact-leaf'].small-content ul li,
.mobile [class*='fact-leaf'] ul li {
    font-size: var(--font-size);
}

[class*='fact-leaf'][class*='fact-reverse'] ul li:first-child,
[class*='fact-leaf'][class*='fact-zigzag'] ul.even li:first-child {
    left: unset;
    right: 20px;
}

[class*='fact-leaf-1'] ul {
    border-left-color: var(--primary-border);
    border-top-color: var(--primary-border);
    border-right-color: var(--primary-border);
    border-bottom-color: var(--primary-border);
}

    [class*='fact-leaf-1'] ul li:first-child {
        background-color: var(--primary);
        background: linear-gradient(45deg, var(--primary-hover), var(--primary));
        color: var(--primary-text) !important;
        border-left-color: var(--primary-border);
        border-top-color: var(--primary-border);
        border-right-color: var(--primary-border);
        border-bottom-color: var(--primary-border);
    }


[class*='fact-leaf-2'] ul {
    border-left-color: var(--secondary-border);
    border-top-color: var(--secondary-border);
    border-right-color: var(--secondary-border);
    border-bottom-color: var(--secondary-border);
}

    [class*='fact-leaf-2'] ul li:first-child {
        background-color: var(--secondary);
        background: linear-gradient(45deg, var(--secondary-hover), var(--secondary));
        color: var(--secondary-text) !important;
        border-left-color: var(--secondary-border-alt);
        border-top-color: var(--secondary-border-alt);
        border-right-color: var(--secondary-border);
        border-bottom-color: var(--secondary-border);
    }


[class*='fact-leaf-3'] ul {
    border-left-color: var(--neutral);
    border-top-color: var(--neutral);
    border-right-color: var(--neutral);
    border-bottom-color: var(--neutral);
}

    [class*='fact-leaf-3'] ul li:first-child {
        background-color: var(--neutral);
        background: linear-gradient(45deg, var(--neutral-hover), var(--neutral));
        color: var(--neutral-text) !important;
        border-left-color: var(--neutral-hover);
        border-top-color: var(--neutral-hover);
        border-right-color: var(--neutral);
        border-bottom-color: var(--neutral);
    }


[class*='fact-leaf-4'] ul {
    border-left-color: var(--dark);
    border-top-color: var(--dark);
    border-right-color: var(--dark);
    border-bottom-color: var(--dark);
}

    [class*='fact-leaf-4'] ul li:first-child {
        background-color: var(--dark);
        background: linear-gradient(45deg, var(--dark-hover), var(--dark));
        color: var(--dark-text) !important;
        border-left-color: var(--dark-hover);
        border-top-color: var(--dark-hover);
        border-right-color: var(--dark);
        border-bottom-color: var(--dark);
    }


[class*='fact-leaf-5'] ul {
    border-left-color: var(--accent-1-border);
    border-top-color: var(--accent-1-border);
    border-right-color: var(--accent-1-border);
    border-bottom-color: var(--accent-1-border);
}

    [class*='fact-leaf-5'] ul li:first-child {
        background-color: var(--accent-1);
        background: linear-gradient(45deg, var(--accent-1-hover), var(--accent-1));
        color: var(--accent-1-text) !important;
        border-left-color: var(--accent-1-hover);
        border-top-color: var(--accent-1-hover);
        border-right-color: var(--accent-1);
        border-bottom-color: var(--accent-1);
    }


[class*='fact-leaf-6'] ul {
    border-left-color: var(--accent-2);
    border-top-color: var(--accent-2);
    border-right-color: var(--accent-2);
    border-bottom-color: var(--accent-2);
}

    [class*='fact-leaf-6'] ul li:first-child {
        background-color: var(--accent-2);
        background: linear-gradient(45deg, var(--accent-2-hover), var(--accent-2));
        color: var(--accent-2-text) !important;
        border-left-color: var(--accent-2-hover);
        border-top-color: var(--accent-2-hover);
        border-right-color: var(--accent-2);
        border-bottom-color: var(--accent-2);
    }


[class*='fact-leaf-black'] ul {
    border-left-color: var(--my-black);
    border-top-color: var(--my-black);
    border-right-color: var(--my-black);
    border-bottom-color: var(--my-black);
}

    [class*='fact-leaf-black'] ul li:first-child {
        background-color: var(--my-black);
        background: linear-gradient(45deg, var(--my-black-hover), var(--my-black));
        color: var(--my-black-text) !important;
        border-left-color: var(--my-black-hover);
        border-top-color: var(--my-black-hover);
        border-right-color: var(--my-black);
        border-bottom-color: var(--my-black);
    }


[class*='fact-leaf-gray'] ul {
    border-left-color: var(--my-gray);
    border-top-color: var(--my-gray);
    border-right-color: var(--my-gray);
    border-bottom-color: var(--my-gray);
}

    [class*='fact-leaf-gray'] ul li:first-child {
        background-color: var(--my-gray);
        background: linear-gradient(45deg, var(--my-gray-hover), var(--my-gray));
        color: var(--my-gray-text) !important;
        border-left-color: var(--my-gray-hover);
        border-top-color: var(--my-gray-hover);
        border-right-color: var(--my-gray);
        border-bottom-color: var(--my-gray);
    }


[class*='fact-leaf-white'] ul {
    border-left-color: var(--my-white);
    border-top-color: var(--my-white);
    border-right-color: var(--my-white);
    border-bottom-color: var(--my-white);
}

    [class*='fact-leaf-white'] ul li:first-child {
        background-color: var(--my-white);
        background: linear-gradient(45deg, var(--my-white-hover), var(--my-white));
        color: var(--my-white-text) !important;
        border-left-color: var(--my-white-hover);
        border-top-color: var(--my-white-hover);
        border-right-color: var(--my-white);
        border-bottom-color: var(--my-white);
    }


[class*='fact-pie'] ul {
    margin: 8px;
    font-size: 2em;
    font-weight: bold;
    font-family: sans-serif;
    position: relative;
    list-style: none;
}

[class*='fact-pie'] li:first-child {
    --w: 14vh;
    height: var(--w);
    width: var(--w);
    border-radius: 50%;
    position: relative;
}

    [class*='fact-pie'] li:first-child::before {
        content: attr(pievalue) '%';
        aspect-ratio: 1;
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        display: grid;
        align-content: space-around;
        padding: 20px;
        border: solid 1px #c0c0c0;
        border-radius: 50%;
        color: #433E32;
        background-color: #ECECEB;
        box-shadow: var(--box-shadow), inset 0px 0px 4px rgba(0,0,0,.3), inset 0px -2px 11px rgba(39,53,97,.24);
        font-size: var(--font-size-large);
        font-weight: 400;
    }

[class*='fact-pie'].active li:first-child {
    animation-name: pie-chart;
    animation-duration: var(--animation-time);
    animation-delay: var(--animation-delay);
    animation-fill-mode: forwards;
}


@keyframes pie-chart {
    0% {
        opacity: 0;
        clip-path: circle(1%);
        transform: rotate(-40deg);
    }

    100% {
        opacity: 1;
        clip-path: circle(100%);
        transform: rotate(0deg);
    }
}


[class*="fact-bar"] ul {
    list-style: none;
    display: grid;
    grid-template-columns: 1fr;
    width: 100%;
    gap: 10px;
    margin: 0;
    padding: 0;
}


[class*="fact-bar"] li:first-child {
    font-weight: bold;
    text-align: center;
    text-transform: capitalize;
    padding: 15px;
}

[class*='fact-bar'] li:nth-child(n+2) {
    /* padding-top: 30px;*/
    position: relative;
    font-weight: bold;
}

[class*='fact-bar'] li .chart-bar {
    /* position: absolute;
    top: 0px;
    left: 0px;*/
    box-shadow: var(--box-shadow);
    padding: 8px;
    height: 25px;
    font-size: var(--font-size-reduced);
    display: grid;
    align-content: space-around;
    margin-bottom: 4px;
}

[class*='fact-bar'] li .bar-data {
    font-size: var(--font-size-reduced);
    background-color: inherit;
    color: inherit;
    padding-bottom: 3px;
    font-weight: 400;
}


[class*='fact-bar'].bar-vertical li:nth-child(n+2) {
    padding-top: 100px;
    margin-top: 60px;
    position: relative;
    text-align: center;
}

[class*='fact-bar'].bar-vertical li .bar-data {
    font-size: var(--font-size-reduced);
    border-radius: 30px;
    padding: 3px 6px;
    margin-top: 6px;
    width: 100%;
    text-align: center;
    position: absolute;
    bottom: 25px;
}

[class*='fact-bar'].bar-vertical li .chart-bar {
    position: absolute;
    top: unset;
    bottom: 60px;
    left: 4px;
    right: 4px;
    box-shadow: var(--box-shadow);
    padding: 8px;
    font-size: var(--font-size-reduced);
    display: grid;
    align-content: space-around;
}

[class*='fact-bar'].active:not(.bar-vertical) li .chart-bar {
    animation: bar-chart;
    animation-duration: var(--animation-time-slow);
    animation-delay: var(--animation-delay);
    animation-fill-mode: forwards;
}

[class*='fact-bar'].active.bar-vertical li .chart-bar {
    animation: bar-chart-vertical;
    animation-duration: var(--animation-time-slow);
    animation-delay: var(--animation-delay);
    animation-fill-mode: forwards;
}

[class*="fact-bar-1"] li:first-child {
    border-bottom: solid 2px var(--primary-border-alt);
}

[class*='fact-bar-1'] li .bar-data, [class*='fact-bar-1'] li .chart-bar {
    background-color: var(--primary);
    color: var(--primary-text);
    border: solid 1px var(--primary-hover);
}

[class*="grid-item"][class*='fact-bar-1'] li .chart-bar {
    background-color: var(--primary) !important;
    color: var(--primary-text) !important;
    border: solid 1px var(--primary-hover) !important;
}

[class*="fact-bar-2"] li:first-child {
    border-bottom: solid 2px var(--secondary-hover);
}

[class*='fact-bar-2'] li .bar-data, [class*='fact-bar-2'] li .chart-bar {
    background-color: var(--secondary);
    color: var(--secondary-text);
    border: solid 1px var(--secondary-hover);
}

[class*="grid-item"][class*='fact-bar-2'] li .chart-bar {
    background-color: var(--secondary) !important;
    color: var(--secondary-text) !important;
    border: solid 1px var(--secondary-hover) !important;
}

[class*="fact-bar-3"] li:first-child {
    border-bottom: solid 2px var(--neutral-hover);
}

[class*='fact-bar-3'] li .bar-data, [class*='fact-bar-3'] li .chart-bar {
    background-color: var(--neutral);
    color: var(--neutral-text);
    border: solid 1px var(--neutral-hover);
}

[class*="grid-item"][class*='fact-bar-3'] li .chart-bar {
    background-color: var(--neutral) !important;
    color: var(--neutral-text) !important;
    border: solid 1px var(--neutral-hover) !important;
}

[class*="fact-bar-4"] li:first-child {
    border-bottom: solid 2px var(--dark-hover);
}

[class*='fact-bar-4'] li .bar-data, [class*='fact-bar-4'] li .chart-bar {
    background-color: var(--dark);
    color: var(--dark-text);
    border: solid 1px var(--dark-hover);
}

[class*="grid-item"][class*='fact-bar-4'] li .chart-bar {
    background-color: var(--dark) !important;
    color: var(--dark-text) !important;
    border: solid 1px var(--dark-hover) !important;
}

[class*="fact-bar-5"] li:first-child {
    border-bottom: solid 2px var(--accent-1-hover);
}

[class*='fact-bar-5'] li .bar-data, [class*='fact-bar-5'] li .chart-bar {
    background-color: var(--accent-1);
    color: var(--accent-1-text);
    border: solid 1px var(--accent-1-hover);
}

[class*="grid-item"][class*='fact-bar-5'] li .chart-bar {
    background-color: var(--accent-1) !important;
    color: var(--accent-1-text) !important;
    border: solid 1px var(--accent-1-hover) !important;
}

[class*="fact-bar-6"] li:first-child {
    border-bottom: solid 2px var(--accent-2-hover);
}

[class*='fact-bar-6'] li .bar-data, [class*='fact-bar-6'] li .chart-bar {
    background-color: var(--accent-2);
    color: var(--accent-2-text);
    border: solid 1px var(--accent-2-hover);
}

[class*="grid-item"][class*='fact-bar-6'] li .chart-bar {
    background-color: var(--accent-2) !important;
    color: var(--accent-2-text) !important;
    border: solid 1px var(--accent-2-hover) !important;
}

[class*="fact-bar-black"] li:first-child {
    border-bottom: solid 2px var(--my-black-hover);
}

[class*='fact-bar-black'] li .bar-data, [class*='fact-bar-black'] li .chart-bar {
    background-color: var(--my-black);
    color: var(--my-black-text);
    border: solid 1px var(--my-black-hover);
}

[class*="grid-item"][class*='fact-bar-black'] li .chart-bar {
    background-color: var(--my-black) !important;
    color: var(--my-black-text) !important;
    border: solid 1px var(--my-black-hover) !important;
}

[class*="fact-bar-gray"] li:first-child {
    border-bottom: solid 2px var(--my-gray-hover);
}

[class*='fact-bar-gray'] li .bar-data, [class*='fact-bar-gray'] li .chart-bar {
    background-color: var(--my-gray);
    color: var(--my-gray-text);
    border: solid 1px var(--my-gray-hover);
}

[class*="grid-item"][class*='fact-bar-gray'] li .chart-bar {
    background-color: var(--my-gray) !important;
    color: var(--my-gray-text) !important;
    border: solid 1px var(--my-gray-hover) !important;
}

[class*="fact-bar-white"] li:first-child {
    border-bottom: solid 2px var(--my-white-hover);
}

[class*='fact-bar-white'] li .bar-data, [class*='fact-bar-white'] li .chart-bar {
    background-color: var(--my-white);
    color: var(--my-white-text);
    border: solid 1px var(--my-white-hover);
}

[class*="grid-item"][class*='fact-bar-white'] li .chart-bar {
    background-color: var(--my-white) !important;
    color: var(--my-white-text) !important;
    border: solid 1px var(--my-white-hover) !important;
}

[class*='fact-bar-']:not(.bar-vertical) li .bar-data {
    background-color: inherit;
    color: inherit;
    width: auto;
    border: 0px;
}



@keyframes bar-chart {
    0% {
        transform: scale(0);
        transform-origin: left center;
        border-top-right-radius: 0px;
        border-bottom-right-radius: 0px;
    }

    100% {
        transform: scale(1.0);
        transform-origin: left center;
        border-top-right-radius: 8px;
        border-bottom-right-radius: 8px;
    }
}

@keyframes bar-chart-vertical {
    0% {
        transform: scaleY(0);
        transform-origin: bottom center;
        border-top-left-radius: 0px;
        border-top-right-radius: 0px;
    }

    100% {
        transform: scaleY(1.0);
        transform-origin: bottom center;
        border-top-left-radius: 8px;
        border-top-right-radius: 8px;
    }
}

[class*='fact-topline'] ul {
    margin: 0px;
    padding: 5px;
    padding-top: 10px;
    list-style: none;
    position: relative;
}

[class*='fact-topline'] li {
    font-size: var(--font-size-reduced);
    font-weight: 400;
    /*text-transform: uppercase;*/
}

    [class*='fact-topline'] li:first-child {
        font-weight: 800;
        font-size: var(--font-size-extra-large);
        text-transform: capitalize;
        padding: 10px 0px;
        margin-bottom: 4px;
    }

[class*='fact-topline'] ul:before {
    content: " ";
    position: absolute;
    top: -3px;
    left: 0px;
    width: 0px;
    height: 5px;
    background-color: var(--border-gray);
}

[class*='fact-topline-1'] ul:before {
    background-color: var(--primary-border);
}

[class*='fact-topline-2'] ul:before {
    background-color: var(--secondary-border);
}

[class*='fact-topline-3'] ul:before {
    background-color: var(--neutral-border);
}

[class*='fact-topline-4'] ul:before {
    background-color: var(--dark-border);
}

[class*='fact-topline-5'] ul:before {
    background-color: var(--accent-1-border);
}

[class*='fact-topline-6'] ul:before {
    background-color: var(--accent-2-border);
}

[class*='fact-topline-black'] ul:before {
    background-color: var(--my-black-border);
}

[class*='fact-topline-gray'] ul:before {
    background-color: var(--my-gray-border);
}

[class*='fact-topline-white'] ul:before {
    background-color: var(--my-white-border);
}

[class*='fact-topline'].active ul:before {
    animation: fact-topline;
    animation-duration: var(--animation-time-slow);
    animation-delay: var(--animation-delay);
    animation-fill-mode: forwards;
}

@keyframes fact-topline {
    0% {
        width: 0px;
    }

    100% {
        width: 25%;
    }
}

[class*='fact-bottom'] ul {
    margin: 0;
    padding: 8px;
    list-style: none;
}

[class*='fact-bottom'] li:not(:first-child) {
    transform: rotateX(90deg);
    transform-origin: top center;
    margin: 0;
    padding: 2px;
    padding-left: 10px;
    font-size: var(--font-size-reduced);
    line-height: calc(var(--font-size-reduced) + 8px);
    text-transform: capitalize;
}

[class*='fact-bottom'].active li:not(:first-child) {
    animation: fact-bottom-li;
    animation-delay: var(--animation-delay-slow);
    animation-duration: var(--animation-time);
    animation-fill-mode: forwards;
}


[class*='fact-bottom'] li:first-child {
    font-weight: 700;
    font-size: var(--font-size-extra-large);
    padding-bottom: 10px;
    margin-bottom: 5px;
    position: relative;
    transform: none;
}

    [class*='fact-bottom'] li:first-child:after {
        content: " ";
        position: absolute;
        bottom: 0;
        left: 0;
        height: 0;
        width: 0;
        z-index: -1;
    }

[class*='fact-bottom'].active li:first-child:after {
    animation: fact-bottom-li-after;
    animation-duration: var(--animation-time-fast);
    animation-fill-mode: forwards;
}

[class*='fact-bottom'] li:first-child:after {
    border-color: var(--border-gray);
}

[class*='fact-bottom-1'] li:first-child {
    border-color: var(--primary-hover);
}

    [class*='fact-bottom-1'] li:first-child:after {
        background-color: var(--primary-hover);
    }


[class*='fact-bottom-2'] li:first-child {
    border-color: var(--secondary-hover);
}

    [class*='fact-bottom-2'] li:first-child:after {
        background-color: var(--secondary-hover);
    }

[class*='fact-bottom-3'] li:first-child {
    border-color: var(--neutral-hover);
}

    [class*='fact-bottom-3'] li:first-child:after {
        background-color: var(--neutral-hover);
    }

[class*='fact-bottom-4'] li:first-child {
    border-color: var(--dark-hover);
}

    [class*='fact-bottom-4'] li:first-child:after {
        background-color: var(--dark-hover);
    }

[class*='fact-bottom-5'] li:first-child {
    border-color: var(--accent-1-hover);
}

    [class*='fact-bottom-5'] li:first-child:after {
        background-color: var(--accent-1-hover);
    }

[class*='fact-bottom-6'] li:first-child {
    border-color: var(--accent-2-hover);
}

    [class*='fact-bottom-6'] li:first-child:after {
        background-color: var(--accent-2-hover);
    }

[class*='fact-bottom-black'] li:first-child {
    border-color: var(--my-black-hover);
}

    [class*='fact-bottom-black'] li:first-child:after {
        background-color: var(--my-black-hover);
    }

[class*='fact-bottom-gray'] li:first-child {
    border-color: var(--my-gray-hover);
}

    [class*='fact-bottom-gray'] li:first-child:after {
        background-color: var(--my-gray-hover);
    }

[class*='fact-bottom-white'] li:first-child {
    border-color: var(--my-white-hover);
}

    [class*='fact-bottom-white'] li:first-child:after {
        background-color: var(--my-white-hover);
    }


@keyframes fact-bottom-li-after {
    0% {
        height: 0;
        width: 0;
    }

    30% {
        height: 2px;
        width: 4px;
        bottom: 0px;
    }

    100% {
        height: 3px;
        width: 75%;
        bottom: 0px;
    }
}

@keyframes fact-bottom-li {
    0% {
        transform: rotateX(90deg);
    }

    100% {
        transform: rotateX(0deg);
    }
}


[class*='fact-fall'] ul {
    margin: 0;
    padding: 0;
    list-style: none;
}

[class*='fact-fall'] li {
    padding-left: 40px;
    display: block;
    font-size: var(--font-size);
    position: relative;
}

    [class*='fact-fall'] li:not(:first-child):before {
        content: "";
        position: absolute;
        left: 10px;
        top: 20%;
        height: 60%;
        width: 0px;
        background-color: var(--gray);
    }

[class*='fact-fall'].active li:not(:first-child):before {
    animation: fact-fall-li-before;
    animation-duration: var(--animation-time-fast);
    animation-delay: var(--animation-delay);
    animation-fill-mode: forwards;
}

[class*='fact-fall'] li:first-child {
    font-size: var(--font-size-extra-large);
    font-weight: 400;
    color: var(--my-black-hover);
    border-left: solid 8px var(--border-gray);
    border-bottom: solid 1px var(--border-gray);
    width: 100%;
    padding: 8px;
    border-top-right-radius: 8px;
    box-shadow: var(--box-shadow);
}

[class*='fact-fall-1'] li:first-child {
    background: linear-gradient(12deg, var(--primary) 0, var(--primary-hover) 100%) !important;
    color: var(--primary-text) !important;
    border-color: var(--primary-hover);
}

[class*='fact-fall-1'] li:not(:first-child):before {
    background-color: var(--primary-hover);
}

[class*='fact-fall-2'] li:first-child {
    background: linear-gradient(12deg, var(--secondary) 0, var(--secondary-hover) 100%) !important;
    color: var(--secondary-text) !important;
    border-color: var(--secondary-hover);
}

[class*='fact-fall-2'] li:not(:first-child):before {
    background-color: var(--secondary-hover);
}

[class*='fact-fall-3'] li:first-child {
    background: linear-gradient(12deg, var(--neutral) 0, var(--neutral-hover) 100%) !important;
    color: var(--neutral-text) !important;
    border-color: var(--neutral-hover);
}

[class*='fact-fall-3'] li:not(:first-child):before {
    background-color: var(--neutral-hover);
}

[class*='fact-fall-4'] li:first-child {
    background: linear-gradient(12deg, var(--dark) 0, var(--dark-hover) 100%) !important;
    color: var(--dark-text) !important;
    border-color: var(--dark-hover);
}

[class*='fact-fall-4'] li:not(:first-child):before {
    background-color: var(--dark-hover);
}

[class*='fact-fall-5'] li:first-child {
    background: linear-gradient(12deg, var(--accent-1) 0, var(--accent-1-hover) 100%) !important;
    color: var(--accent-1-text) !important;
    border-color: var(--accent-1-hover);
}

[class*='fact-fall-5'] li:not(:first-child):before {
    background-color: var(--accent-1-hover);
}

[class*='fact-fall-6'] li:first-child {
    background: linear-gradient(12deg, var(--accent-2) 0, var(--accent-2-hover) 100%) !important;
    color: var(--accent-2-text) !important;
    border-color: var(--accent-2-hover);
}

[class*='fact-fall-6'] li:not(:first-child):before {
    background-color: var(--accent-2-hover);
}

[class*='fact-fall-black'] li:first-child {
    background: linear-gradient(12deg, var(--my-black) 0, var(--my-black-hover) 100%) !important;
    color: var(--my-black-text) !important;
    border-color: var(--my-black-hover);
}

[class*='fact-fall-black'] li:not(:first-child):before {
    background-color: var(--my-black-hover);
}

[class*='fact-fall-gray'] li:first-child {
    background: linear-gradient(12deg, var(--my-gray) 0, var(--my-gray-hover) 100%) !important;
    color: var(--my-gray-text) !important;
    border-color: var(--my-gray-hover);
}

[class*='fact-fall-gray'] li:not(:first-child):before {
    background-color: var(--my-gray-hover);
}

[class*='fact-fall-white'] li:first-child {
    background: linear-gradient(12deg, var(--my-white) 0, var(--my-white-hover) 100%) !important;
    color: var(--my-white-text) !important;
    border-color: var(--my-white-hover);
}

[class*='fact-fall-white'] li:not(:first-child):before {
    background-color: var(--my-white-hover);
}

[class*='fact-fall'] .word {
    display: inline-block;
    opacity: 0;
}

[class*='fact-fall'].active .word {
    animation: fact-fall;
    animation-duration: var(--animation-time-fast);
    animation-fill-mode: forwards
}


@keyframes fact-fall {
    from {
        opacity: 0;
        transform: perspective(50vw) translate3d(-35px, -40px, -150px) rotate3d(1, -1, 0, 35deg);
    }

    to {
        opacity: 1;
        transform: perspective(50vw) translate3d(0, 0, 0);
    }
}

@keyframes fact-fall-li-before {
    0% {
        width: 0px;
    }

    100% {
        width: 10px;
    }
}

/*--------------------------------------------
    ASIDE ANIMATIONS
*/

.aside-fade-in aside {
    opacity: 0;
}

.aside-fade-in.active aside {
    animation: aside-fade-in;
    animation-duration: var(--animation-time);
    animation-fill-mode: forwards
}


@keyframes aside-fade-in {
    0% {
        opacity: 0;
    }

    100% {
        opacity: 1;
    }
}


.aside-fold-out aside {
    overflow: hidden;
    min-width: unset;
    height: 0%;
    width: 0%;
}

.aside-fold-out.active aside {
    animation: aside-fold-out;
    animation-duration: var(--animation-time);
    animation-delay: var(--animation-delay);
    animation-fill-mode: forwards
}

@keyframes aside-fold-out {
    0% {
        height: 0%;
        width: 0%;
        overflow: hidden;
    }

    50% {
        height: 30%;
        width: 100%;
        overflow: hidden;
    }

    100% {
        height: 100%;
        width: 100%;
        overflow: unset;
        min-width: 200px;
    }
}


.aside-drop-in aside {
    opacity: 0;
    transform: translateY(-50px);
}

.aside-drop-in.active aside {
    animation: aside-drop-in;
    animation-duration: var(--animation-time);
    animation-delay: var(--animation-delay);
    animation-fill-mode: forwards
}

@keyframes aside-drop-in {
    0% {
        opacity: 0;
        transform: translateY(-50px);
    }

    100% {
        opacity: 1;
        transform: translateY(0px);
    }
}


[class*='aside-reveal-'] aside {
    position: relative;
    z-index: 5;
}

    [class*='aside-reveal-'] aside * {
        visibility: hidden;
    }

    [class*='aside-reveal-'] aside:before {
        content: " ";
        position: absolute;
        top: 0;
        left: 0;
        bottom: 0;
        opacity: 1;
        background-color: var(--primary);
        z-index: 10;
    }

[class*='aside-reveal-'].active aside * {
    animation: aside-reveal-items;
    animation-duration: var(--animation-time);
    animation-delay: var(--animation-delay);
    animation-fill-mode: forwards
}


@keyframes aside-reveal-items {
    0% {
        visibility: hidden;
    }

    90% {
        visibility: hidden;
    }

    100% {
        visibility: visible;
    }
}

.aside-reveal-left.active aside:before {
    right: 100%;
    animation: aside-reveal-left-before;
    animation-duration: var(--animation-time-slow);
    animation-delay: var(--animation-delay);
    animation-fill-mode: forwards;
}

@keyframes aside-reveal-left-before {
    0% {
        right: 100%;
        left: 0;
    }

    10% {
        right: 100%;
        left: 0;
    }

    30% {
        right: 0;
        left: 0;
    }

    80% {
        right: 0;
        left: 100%;
    }

    100% {
        right: 0;
        left: 100%;
    }
}

.aside-reveal-right.active aside:before {
    left: 100%;
    right: 0;
    animation: aside-reveal-right-before;
    animation-duration: var(--animation-time-slow);
    animation-delay: var(--animation-delay);
    animation-fill-mode: forwards;
}

@keyframes aside-reveal-right-before {
    0% {
        left: 100%;
        right: 0;
    }

    10% {
        left: 100%;
        right: 0;
    }

    30% {
        left: 0;
        right: 0;
    }

    80% {
        left: 0;
        right: 100%;
    }

    100% {
        left: 0;
        right: 100%;
    }
}

.aside-reveal-down.active aside:before {
    left: 0;
    right: 0;
    top: 0;
    bottom: 100%;
    animation: aside-reveal-down-before;
    animation-duration: var(--animation-time-slow);
    animation-delay: var(--animation-delay);
    animation-fill-mode: forwards;
}

@keyframes aside-reveal-down-before {
    0% {
        top: 0;
        bottom: 100%;
    }

    10% {
        top: 0;
        bottom: 100%;
    }

    30% {
        top: 0;
        bottom: 0;
    }

    80% {
        top: 100%;
        bottom: 0;
    }

    100% {
        top: 100%;
        bottom: 0;
    }
}

.aside-reveal-up.active aside:before {
    left: 0;
    right: 0;
    top: 100%;
    bottom: 0;
    animation: aside-reveal-up-before;
    animation-duration: var(--animation-time-slow);
    animation-delay: var(--animation-delay);
    animation-fill-mode: forwards;
}

@keyframes aside-reveal-up-before {
    0% {
        top: 100%;
        bottom: 0;
    }

    10% {
        top: 100%;
        bottom: 0;
    }

    30% {
        top: 0;
        bottom: 0;
    }

    80% {
        top: 0;
        bottom: 100%;
    }

    100% {
        top: 0;
        bottom: 100%;
    }
}


/*---------------------------------------
    ICONS
*/

[class*='icon-']:not(.grid-item):not(.tox-icon):not([class*='ou-icon']):not(svg[class*='icon-']):not([class*='tox-']), [class*='icon-header-'] h3, [class*='icon-header-'] h4, [class*='icon-header-'] h5, [class*='icon-header-'] h6 {
    padding-left: 45px;
    position: relative;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(25px, auto));
    min-width: fit-content;
}

[class*='icon-'][class*='button-'] {
    grid-template-columns: 1fr !important;
    min-width: fit-content !important;
}

[class*='icon-header-'] h2 {
    padding-left: 50px;
    position: relative;
}

[class*='icon-header-'] h1 {
    padding-left: 60px;
    position: relative;
}

    *[class*="icon-"]:not([class='ou-icon-pencil']):not([aria-label*='Open Just Edit']):before, [class*='icon-header-'] h1:before, [class*='icon-header-'] h2:before, [class*='icon-header-'] h3:before,
    [class*='icon-header-'] h4:before, [class*='icon-header-'] h5:before, [class*='icon-header-'] h6:before {
        font-family: var(--font-awesome-family);
        position: absolute;
        left: 8px;
        width: 35px;
        top: 0;
        bottom: 0;
        display: grid;
        align-items: center;
        text-align: center;
    }

*.icon-lock:before, .icon-header-lock h1:before, .icon-header-lock h2:before, .icon-header-lock h3:before, .icon-header-lock h4:before, .icon-header-lock h5:before, .icon-header-lock h6:before {
    content: "\f023";
}

*.icon-lock-open:before, .icon-header-lock-open h1:before, .icon-header-lock-open h2:before, .icon-header-lock-open h3:before, .icon-header-lock-open h4:before, .icon-header-lock-open h5:before, .icon-header-lock-open h6:before {
    content: "\f3c1";
}

*.icon-calendar:before, .icon-header-calendar h1:before, .icon-header-calendar h2:before, .icon-header-calendar h3:before, .icon-header-calendar h4:before, .icon-header-calendar h5:before, .icon-header-calendar h6:before {
    content: "\f133";
}

*.icon-calendar-plus:before, .icon-header-calendar-plus h1:before, .icon-header-calendar-plus h2:before, .icon-header-calendar-plus h3:before, .icon-header-calendar-plus h4:before, .icon-header-calendar-plus h5:before, .icon-header-calendar-plus h6:before {
    content: "\f271";
}

*.icon-calendar-heart:before, .icon-header-calendar-heart h1:before, .icon-header-calendar-heart h2:before, .icon-header-calendar-heart h3:before, .icon-header-calendar-heart h4:before, .icon-header-calendar-heart h5:before, .icon-header-calendar-heart h6:before {
    content: "\e0d3";
}

*.icon-calendar-exclamation:before, .icon-header-calendar-exclamation h1:before, .icon-header-calendar-exclamation h2:before, .icon-header-calendar-exclamation h3:before, .icon-header-calendar-exclamation h4:before, .icon-header-calendar-exclamation h5:before, .icon-header-calendar-exclamation h6:before {
    content: "\f334";
}

*.icon-calendar-check:before, .icon-header-calendar-check h1:before, .icon-header-calendar-check h2:before, .icon-header-calendar-check h3:before, .icon-header-calendar-check h4:before, .icon-header-calendar-check h5:before, .icon-header-calendar-check h6:before {
    content: "\f274";
}

*.icon-flask:before, .icon-header-flask h1:before, .icon-header-flask h2:before, .icon-header-flask h3:before, .icon-header-flask h4:before, .icon-header-flask h5:before, .icon-header-flask h6:before {
    content: "\f0c3";
}

*.icon-atom:before, .icon-header-atom h1:before, .icon-header-atom h2:before, .icon-header-atom h3:before, .icon-header-atom h4:before, .icon-header-atom h5:before, .icon-header-atom h6:before {
    content: "\e32e";
}

*.icon-microscope:before, .icon-header-microscope h1:before, .icon-header-microscope h2:before, .icon-header-microscope h3:before, .icon-header-microscope h4:before, .icon-header-microscope h5:before, .icon-header-microscope h6:before {
    content: "\f610";
}

*.icon-flame:before, .icon-header-flame h1:before, .icon-header-flame h2:before, .icon-header-flame h3:before, .icon-header-flame h4:before, .icon-header-flame h5:before, .icon-header-flame h6:before {
    content: "\f5d2";
}

*.icon-gift:before, .icon-header-gift h1:before, .icon-header-gift h2:before, .icon-header-gift h3:before, .icon-header-gift h4:before, .icon-header-gift h5:before, .icon-header-gift h6:before {
    content: "\f06b";
}

*.icon-ticket:before, .icon-header-ticket h1:before, .icon-header-ticket h2:before, .icon-header-ticket h3:before, .icon-header-ticket h4:before, .icon-header-ticket h5:before, .icon-header-ticket h6:before {
    content: "\f145";
}

*.icon-arrow-up:before, .icon-header-arrow-up h1:before, .icon-header-arrow-up h2:before, .icon-header-arrow-up h3:before, .icon-header-arrow-up h4:before, .icon-header-arrow-up h5:before, .icon-header-arrow-up h6:before {
    content: "\f062";
}

*.icon-arrow-right:before, .icon-header-arrow-right h1:before, .icon-header-arrow-right h2:before, .icon-header-arrow-right h3:before, .icon-header-arrow-right h4:before, .icon-header-arrow-right h5:before, .icon-header-arrow-right h6:before {
    content: "\f061";
}

*.icon-arrow-down:before, .icon-header-arrow-down h1:before, .icon-header-arrow-down h2:before, .icon-header-arrow-down h3:before, .icon-header-arrow-down h4:before, .icon-header-arrow-down h5:before, .icon-header-arrow-down h6:before {
    content: "\f063";
}

*.icon-arrow-left:before, .icon-header-arrow-left h1:before, .icon-header-arrow-left h2:before, .icon-header-arrow-left h3:before, .icon-header-arrow-left h4:before, .icon-header-arrow-left h5:before, .icon-header-arrow-left h6:before {
    content: "\f060";
}

*.icon-mail:before, .icon-header-mail h1:before, .icon-header-mail h2:before, .icon-header-mail h3:before, .icon-header-mail h4:before, .icon-header-mail h5:before, .icon-header-mail h6:before {
    content: "\f0e0";
}

*.icon-pen:before, .icon-header-pen h1:before, .icon-header-pen h2:before, .icon-header-pen h3:before, .icon-header-pen h4:before, .icon-header-pen h5:before, .icon-header-pen h6:before {
    content: "\f304";
}

*.icon-book:before, .icon-header-book h1:before, .icon-header-book h2:before, .icon-header-book h3:before, .icon-header-book h4:before, .icon-header-book h5:before, .icon-header-book h6:before {
    content: "\f02d";
}

*.icon-print:before, .icon-header-print h1:before, .icon-header-print h2:before, .icon-header-print h3:before, .icon-header-print h4:before, .icon-header-print h5:before, .icon-header-print h6:before {
    content: "\f02f";
}

*.icon-web-cam:before, .icon-header-web-cam h1:before, .icon-header-web-cam h2:before, .icon-header-web-cam h3:before, .icon-header-web-cam h4:before, .icon-header-web-cam h5:before, .icon-header-web-cam h6:before {
    content: "\f832";
}

*.icon-shield-check:before, .icon-header-shield-check h1:before, .icon-header-shield-check h2:before, .icon-header-shield-check h3:before, .icon-header-shield-check h4:before, .icon-header-shield-check h5:before, .icon-header-shield-check h6:before {
    content: "\f2f7";
}

*.icon-user:before, .icon-header-user h1:before, .icon-header-user h2:before, .icon-header-user h3:before, .icon-header-user h4:before, .icon-header-user h5:before, .icon-header-user h6:before {
    content: "\f007";
}

*.icon-user-secret:before, .icon-header-user-secret h1:before, .icon-header-user-secret h2:before, .icon-header-user-secret h3:before, .icon-header-user-secret h4:before, .icon-header-user-secret h5:before, .icon-header-user-secret h6:before {
    content: "\f21b";
}

*.icon-thought:before, .icon-header-thought h1:before, .icon-header-thought h2:before, .icon-header-thought h3:before, .icon-header-thought h4:before, .icon-header-thought h5:before, .icon-header-thought h6:before {
    content: "\e32e";
}

*.icon-comment:before, .icon-header-comment h1:before, .icon-header-comment h2:before, .icon-header-comment h3:before, .icon-header-comment h4:before, .icon-header-comment h5:before, .icon-header-comment h6:before {
    content: "\f075";
}

*.icon-music:before, .icon-header-music h1:before, .icon-header-music h2:before, .icon-header-music h3:before, .icon-header-music h4:before, .icon-header-music h5:before, .icon-header-music h6:before {
    content: "\f001";
}

*.icon-theatre:before, .icon-header-theatre h1:before, .icon-header-theatre h2:before, .icon-header-theatre h3:before, .icon-header-theatre h4:before, .icon-header-theatre h5:before, .icon-header-theatre h6:before,
*.icon-theater:before, .icon-header-theater h1:before, .icon-header-theater h2:before, .icon-header-theater h3:before, .icon-header-theater h4:before, .icon-header-theater h5:before, .icon-header-theater h6:before {
    content: "\f630";
}

*.icon-image:before, .icon-header-image h1:before, .icon-header-image h2:before, .icon-header-image h3:before, .icon-header-image h4:before, .icon-header-image h5:before, .icon-header-image h6:before {
    content: "\f03e";
}

*.icon-youtube:before, .icon-header-youtube h1:before, .icon-header-youtube h2:before, .icon-header-youtube h3:before, .icon-header-youtube h4:before, .icon-header-youtube h5:before, .icon-header-youtube h6:before {
    content: "\f167";
    font-family: var(--font-awesome-brand-family) !important;
}

*.icon-film:before, .icon-header-film h1:before, .icon-header-film h2:before, .icon-header-film h3:before, .icon-header-film h4:before, .icon-header-film h5:before, .icon-header-film h6:before {
    content: "\f008";
}

*.icon-user-graduate:before, .icon-header-user-graduate h1:before, .icon-header-user-graduate h2:before, .icon-header-user-graduate h3:before, .icon-header-user-graduate h4:before, .icon-header-user-graduate h5:before, .icon-header-user-graduate h6:before {
    content: "\f501";
}

*.icon-grad-cap:before, .icon-header-grad-cap h1:before, .icon-header-grad-cap h2:before, .icon-header-grad-cap h3:before, .icon-header-grad-cap h4:before, .icon-header-grad-cap h5:before, .icon-header-grad-cap h6:before {
    content: "\f19d";
}

*.icon-mug:before, .icon-header-mug h1:before, .icon-header-mug h2:before, .icon-header-mug h3:before, .icon-header-mug h4:before, .icon-header-mug h5:before, .icon-header-mug h6:before {
    content: "\f7b6";
}

*.icon-utensils:before, .icon-header-utensils h1:before, .icon-header-utensils h2:before, .icon-header-utensils h3:before, .icon-header-utensils h4:before, .icon-header-utensils h5:before, .icon-header-utensils h6:before {
    content: "\f2e7";
}

*.icon-burger-soda:before, .icon-header-burger-soda h1:before, .icon-header-burger-soda h2:before, .icon-header-burger-soda h3:before, .icon-header-burger-soda h4:before, .icon-header-burger-soda h5:before, .icon-header-burger-soda h6:before {
    content: "\f858";
}

*.icon-carrot:before, .icon-header-carrot h1:before, .icon-header-carrot h2:before, .icon-header-carrot h3:before, .icon-header-carrot h4:before, .icon-header-carrot h5:before, .icon-header-carrot h6:before {
    content: "\f787";
}

*.icon-heart:before, .icon-header-heart h1:before, .icon-header-heart h2:before, .icon-header-heart h3:before, .icon-header-heart h4:before, .icon-header-heart h5:before, .icon-header-heart h6:before {
    content: "\f004";
}

*.icon-eye:before, .icon-header-eye h1:before, .icon-header-eye h2:before, .icon-header-eye h3:before, .icon-header-eye h4:before, .icon-header-eye h5:before, .icon-header-eye h6:before {
    content: "\f06e";
}

*.icon-wheelchair:before, .icon-header-wheelchair h1:before, .icon-header-wheelchair h2:before, .icon-header-wheelchair h3:before, .icon-header-wheelchair h4:before, .icon-header-wheelchair h5:before, .icon-header-wheelchair h6:before {
    content: "\f193";
}

*.icon-medical:before, .icon-header-medical h1:before, .icon-header-medical h2:before, .icon-header-medical h3:before, .icon-header-medical h4:before, .icon-header-medical h5:before, .icon-header-medical h6:before {
    content: "\f0fa";
}

*.icon-face-mask:before, .icon-header-face-mask h1:before, .icon-header-face-mask h2:before, .icon-header-face-mask h3:before, .icon-header-face-mask h4:before, .icon-header-face-mask h5:before, .icon-header-face-mask h6:before {
    content: "\e37f";
}

*.icon-timeline:before, .icon-header-timeline h1:before, .icon-header-timeline h2:before, .icon-header-timeline h3:before, .icon-header-timeline h4:before, .icon-header-timeline h5:before, .icon-header-timeline h6:before {
    content: "\e29c";
}

*.icon-clock:before, .icon-header-clock h1:before, .icon-header-clock h2:before, .icon-header-clock h3:before, .icon-header-clock h4:before, .icon-header-clock h5:before, .icon-header-clock h6:before {
    content: "\f017";
}

*.icon-download:before, .icon-header-download h1:before, .icon-header-download h2:before, .icon-header-download h3:before, .icon-header-download h4:before, .icon-header-download h5:before, .icon-header-download h6:before {
    content: "\f019";
}

*.icon-mobile:before, .icon-header-mobile h1:before, .icon-header-mobile h2:before, .icon-header-mobile h3:before, .icon-header-mobile h4:before, .icon-header-mobile h5:before, .icon-header-mobile h6:before {
    content: "\f3ce";
}

*.icon-laptop:before, .icon-header-laptop h1:before, .icon-header-laptop h2:before, .icon-header-laptop h3:before, .icon-header-laptop h4:before, .icon-header-laptop h5:before, .icon-header-laptop h6:before {
    content: "\f109";
}

*.icon-desktop:before, .icon-header-desktop h1:before, .icon-header-desktop h2:before, .icon-header-desktop h3:before, .icon-header-desktop h4:before, .icon-header-desktop h5:before, .icon-header-desktop h6:before {
    content: "\f390";
}

*.icon-usb-drive:before, .icon-header-usb-drive h1:before, .icon-header-usb-drive h2:before, .icon-header-usb-drive h3:before, .icon-header-usb-drive h4:before, .icon-header-usb-drive h5:before, .icon-header-usb-drive h6:before {
    content: "\f8e9";
}

*.icon-keyboard:before, .icon-header-keyboard h1:before, .icon-header-keyboard h2:before, .icon-header-keyboard h3:before, .icon-header-keyboard h4:before, .icon-header-keyboard h5:before, .icon-header-keyboard h6:before {
    content: "\f11c";
}

*.icon-mouse-scroll:before, .icon-header-mouse-scroll h1:before, .icon-header-mouse-scroll h2:before, .icon-header-mouse-scroll h3:before, .icon-header-mouse-scroll h4:before, .icon-header-mouse-scroll h5:before, .icon-header-mouse-scroll h6:before {
    content: "\f8cd";
}

*.icon-speaker:before, .icon-header-speaker h1:before, .icon-header-speaker h2:before, .icon-header-speaker h3:before, .icon-header-speaker h4:before, .icon-header-speaker h5:before, .icon-header-speaker h6:before {
    content: "\f8df";
}

*.icon-plug:before, .icon-header-plug h1:before, .icon-header-plug h2:before, .icon-header-plug h3:before, .icon-header-plug h4:before, .icon-header-plug h5:before, .icon-header-plug h6:before {
    content: "\f1e6";
}

*.icon-tv:before, .icon-header-tv h1:before, .icon-header-tv h2:before, .icon-header-tv h3:before, .icon-header-tv h4:before, .icon-header-tv h5:before, .icon-header-tv h6:before {
    content: "\f26c";
}

*.icon-wifi:before, .icon-header-wifi h1:before, .icon-header-wifi h2:before, .icon-header-wifi h3:before, .icon-header-wifi h4:before, .icon-header-wifi h5:before, .icon-header-wifi h6:before {
    content: "\f1eb";
}

*.icon-streaming:before, .icon-header-streaming h1:before, .icon-header-streaming h2:before, .icon-header-streaming h3:before, .icon-header-streaming h4:before, .icon-header-streaming h5:before, .icon-header-streaming h6:before {
    content: "\f8dd";
}

*.icon-network:before, .icon-header-network h1:before, .icon-header-network h2:before, .icon-header-network h3:before, .icon-header-network h4:before, .icon-header-network h5:before, .icon-header-network h6:before {
    content: "\f6ff";
}

*.icon-wrench:before, .icon-header-wrench h1:before, .icon-header-wrench h2:before, .icon-header-wrench h3:before, .icon-header-wrench h4:before, .icon-header-wrench h5:before, .icon-header-wrench h6:before {
    content: "\f0ad";
}

*.icon-dollar:before, .icon-header-dollar h1:before, .icon-header-dollar h2:before, .icon-header-dollar h3:before, .icon-header-dollar h4:before, .icon-header-dollar h5:before, .icon-header-dollar h6:before {
    content: "\f2e8";
}

*.icon-swap:before, .icon-header-swap h1:before, .icon-header-swap h2:before, .icon-header-swap h3:before, .icon-header-swap h4:before, .icon-header-swap h5:before, .icon-header-swap h6:before {
    content: "\e609";
}

*.icon-user-remove:before, .icon-header-user-remove h1:before, .icon-header-user-remove h2:before, .icon-header-user-remove h3:before, .icon-header-user-remove h4:before, .icon-header-user-remove h5:before, .icon-header-user-remove h6:before {
    content: "\f235";
}

*.icon-question:before, .icon-header-question h1:before, .icon-header-question h2:before, .icon-header-question h3:before, .icon-header-question h4:before, .icon-header-question h5:before, .icon-header-question h6:before {
    content: "\f059";
}

*.icon-video:before, .icon-header-video h1:before, .icon-header-video h2:before, .icon-header-video h3:before, .icon-header-video h4:before, .icon-header-video h5:before, .icon-header-video h6:before {
    content: "\f03d";
}

/*---------------------------------
    frame-view is meant to show a page in an iframe so it will remove headers, navigation, and footers
*/

.frame-view header, .frame-view footer, .frame-view #left-compartment, .frame-view #right-compartment, .frame-view #mobile-options {
    display: none !important;
}

.frame-view .container {
    width: 100%;
}

/*---------------------------------------------
    GRADIENT STYLES
*/


/*-- SETUP --*/
[id *='box'][class*='gradient'],
[class *='grid-item'][class*='gradient'],
[class *='app-data'][class*='gradient'] {
    position: relative;
    z-index: 1;
}

    [id *='box'][class*='gradient']:before,
    [class *='grid-item'][class*='gradient']:before,
    [class *='app-data'][class*='gradient']:before,
    [id *='box'][class*='gradient']:after,
    [class *='grid-item'][class*='gradient']:after,
    [class *='app-data'][class*='gradient']:after {
        content: "";
        position: absolute;
        z-index: 1;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
    }

    [class *='app-data'][class*='gradient'] .app-title,
    [class *='app-data'][class*='gradient'] .app-title *,
    [class *='app-data'][class*='gradient'] .data-content,
    [class *='app-data'][class*='gradient'] .data-content * {
        z-index: 5;
        position: relative;
        background-color: transparent;
        color: var(--my-white);
        text-shadow: var(--text-shadow);
    }

/*-- DARK TEXT -- */
[class *='app-data'][class*='gradient-orange'] .app-title,
[class *='app-data'][class*='gradient-orange'] .app-title *,
[class *='app-data'][class*='gradient-orange'] .data-content,
[class *='app-data'][class*='gradient-orange'] .data-content * {
    color: var(--my-white-text);
    text-shadow: none;
    z-index: 5;
}

[class *='app-data'][class*='gradient-orange'][class*='stock']:after {
    background-color: var(--box-shade-background-gradient);
    z-index: 3;
}

[class *='app-data'][class*='gradient-orange'][class*='stock'].active .app-title {
    background-color: var(--box-shade-background-less);
}

[class *='app-data'][class*='gradient-orange'][class*='stock'] .app-title,
[class *='app-data'][class*='gradient-orange'][class*='stock'] .data-content,
[class *='app-data'][class*='gradient-orange'][class*='stock'] .app-title *,
[class *='app-data'][class*='gradient-orange'][class*='stock'] .data-content *,
[class*='gradient-orange'] .overlay-content,
[class*='gradient-orange'] .overlay-content * {
    color: var(--my-white);
    text-shadow: var(--text-shadow);
}

/*-- LIGHT TEXT --*/
[class *='app-data'][class*='gradient-blue'] .app-title,
[class *='app-data'][class*='gradient-blue'] .app-title *,
[class *='app-data'][class*='gradient-blue'] .data-content,
[class *='app-data'][class*='gradient-blue'] .data-content *,
[class*='gradient-blue'] .overlay-content,
[class*='gradient-blue'] .overlay-content * {
    color: var(--my-white);
    text-shadow: none;
    z-index: 5;
}

/*-- BOX OVERLAY GRADIENT MODES--*/
div[id*="box"][css*="stock"].box-gradient-mix-thin:before,
div[id*="box"][desktop*="."].box-gradient-mix-thin:before,
div[id*="box"][mobile*="."].box-gradient-mix-thin:before {
    opacity: 20%;
}

div[id*="box"][css*="stock"].box-gradient-mix-medium:before,
div[id*="box"][desktop*="."].box-gradient-mix-medium:before,
div[id*="box"][mobile*="."].box-gradient-mix-medium:before {
    opacity: 30%;
}

div[id*="box"][css*="stock"].box-gradient-mix-thick:before,
div[id*="box"][desktop*="."].box-gradient-mix-thick:before,
div[id*="box"][mobile*="."].box-gradient-mix-thick:before {
    opacity: 60%;
}

div[id*="box"][css*="stock"].box-gradient-mix-heavy:before,
div[id*="box"][desktop*="."].box-gradient-mix-heavy:before,
div[id*="box"][mobile*="."].box-gradient-mix-heavy:before {
    opacity: 80%;
}

div[id*="box"][css*="stock"].box-gradient-mix-ultra:before,
div[id*="box"][desktop*="."].box-gradient-mix-ultra:before,
div[id*="box"][mobile*="."].box-gradient-mix-ultra:before {
    opacity: 120%;
}

/*-- BOX GRADIENT OVERLAY COLORS --*/
div[id*="box"][css*="stock"].box-gradient-overlay-1:before,
div[id*="box"][desktop*="."].box-gradient-overlay-1:before,
div[id*="box"][mobile*="."].box-gradient-overlay-1:before {
    background: linear-gradient(var(--gradient-degree), var(--primary) var(--start-at),var(--primary-hover));
}

div[id*="box"][css*="stock"].box-gradient-overlay-2:before,
div[id*="box"][desktop*="."].box-gradient-overlay-2:before,
div[id*="box"][mobile*="."].box-gradient-overlay-2:before {
    background: linear-gradient(var(--gradient-degree), var(--secondary) var(--start-at),var(--secondary-hover));
}

div[id*="box"][css*="stock"].box-gradient-overlay-3:before,
div[id*="box"][desktop*="."].box-gradient-overlay-3:before,
div[id*="box"][mobile*="."].box-gradient-overlay-3:before {
    background: linear-gradient(var(--gradient-degree), var(--neutral) var(--start-at),var(--neutral-hover));
}

div[id*="box"][css*="stock"].box-gradient-overlay-4:before,
div[id*="box"][desktop*="."].box-gradient-overlay-4:before,
div[id*="box"][mobile*="."].box-gradient-overlay-4:before {
    background: linear-gradient(var(--gradient-degree), var(--dark) var(--start-at),var(--dark-hover));
}

div[id*="box"][css*="stock"].box-gradient-overlay-5:before,
div[id*="box"][desktop*="."].box-gradient-overlay-5:before,
div[id*="box"][mobile*="."].box-gradient-overlay-5:before {
    background: linear-gradient(var(--gradient-degree), var(--accent-1) var(--start-at),var(--accent-2-hover));
}

div[id*="box"][css*="stock"].box-gradient-overlay-6:before,
div[id*="box"][desktop*="."].box-gradient-overlay-6:before,
div[id*="box"][mobile*="."].box-gradient-overlay-6:before {
    background: linear-gradient(var(--gradient-degree), var(--accent-2) var(--start-at),var(--accent-2-hover));
}

div[id*="box"][css*="stock"].box-gradient-overlay-black:before,
div[id*="box"][desktop*="."].box-gradient-overlay-black:before,
div[id*="box"][mobile*="."].box-gradient-overlay-black:before {
    background: linear-gradient(var(--gradient-degree), var(--my-black) var(--start-at),var(--my-black-hover));
}

div[id*="box"][css*="stock"].box-gradient-overlay-gray:before,
div[id*="box"][desktop*="."].box-gradient-overlay-gray:before,
div[id*="box"][mobile*="."].box-gradient-overlay-gray:before {
    background: linear-gradient(var(--gradient-degree), var(--my-gray) var(--start-at),var(--my-gray-hover));
}

div[id*="box"][css*="stock"].box-gradient-overlay-white:before,
div[id*="box"][desktop*="."].box-gradient-overlay-white:before,
div[id*="box"][mobile*="."].box-gradient-overlay-white:before {
    background: linear-gradient(var(--gradient-degree), var(--my-white) var(--start-at),var(--my-white-hover));
}



/*-- BLEND MODES --*/
.blend-multiply:before {
    mix-blend-mode: multiply;
}

.blend-overlay:before {
    mix-blend-mode: overlay;
}

.blend-soft:before {
    mix-blend-mode: soft-light;
}

.blend-hard:before {
    mix-blend-mode: hard-light;
}

.blend-dodge:before {
    mix-blend-mode: color-dodge;
}

.blend-burn:before {
    mix-blend-mode: color-burn;
}

.blend-screen:before {
    mix-blend-mode: screen;
}

/*-- BLEND OPACITY --*/
.blend-strength-light:before {
    opacity: 0.45
}

.blend-strength-medium:before {
    opacity: 0.65
}

.blend-strength-heavy:before {
    opacity: 0.85
}
/*-- GRADIENT DEGREES --*/
.grad-0 {
    --gradient-degree: 0deg;
}

.grad-15 {
    --gradient-degree: 15deg;
}

.grad-30 {
    --gradient-degree: 30deg;
}

.grad-45 {
    --gradient-degree: 45deg;
}

.grad-60 {
    --gradient-degree: 60deg;
}

.grad-75 {
    --gradient-degree: 75deg;
}

.grad-90 {
    --gradient-degree: 90deg;
}

.grad-105 {
    --gradient-degree: 105deg;
}

.grad-120 {
    --gradient-degree: 120deg;
}

.grad-135 {
    --gradient-degree: 135deg;
}

.grad-150 {
    --gradient-degree: 150deg;
}

.grad-165 {
    --gradient-degree: 165deg;
}

.grad-180 {
    --gradient-degree: 180deg;
}

.grad-195 {
    --gradient-degree: 195deg;
}

.grad-210 {
    --gradient-degree: 210deg;
}

.grad-225 {
    --gradient-degree: 225deg;
}

.grad-240 {
    --gradient-degree: 240deg;
}

.grad-255 {
    --gradient-degree: 255deg;
}

.grad-270 {
    --gradient-degree: 270deg;
}

.grad-285 {
    --gradient-degree: 285deg;
}

.grad-300 {
    --gradient-degree: 300deg;
}

.grad-315 {
    --gradient-degree: 315deg;
}

.grad-330 {
    --gradient-degree: 330deg;
}

.grad-345 {
    --gradient-degree: 345deg;
}

/*---------------------------
    GRADIENT COLORS 
 ---------------------------------------------------------------*/
/*-- primary --*/
.gradient-1 {
    background: linear-gradient(var(--gradient-degree), var(--primary), var(--primary-hover) 100%);
    color: var(--primary-text);
}

.button-gradient-1, [class*='stock-'] .button-gradient-1, [class*='background-'] .button-gradient-1, [class*='card-'] .button-gradient-1, [class*='feature-'] .button-gradient-1 {
    background: linear-gradient(var(--gradient-degree), var(--primary), var(--primary-hover) 100%) !important;
    color: var(--primary-text) !important;
}

    .button-gradient-1 * {
        color: var(--primary-text) !important;
    }

    .button-gradient-1:hover, .button-gradient-1:focus {
        background: linear-gradient(var(--gradient-degree), var(--primary-hover), var(--primary-hover) 100%) !important;
        color: var(--secondary-hover-text) !important;
    }

.gradient-1 *:not([class*='button-']):not([class*='card-']):not([class*='feature-']),
.transparent-gradient-1 *:not([class*='button-']):not([class*='card-']):not([class*='feature-']) {
    color: var(--primary-text);
}

/*-- secondary --*/
.gradient-2 {
    background: linear-gradient(var(--gradient-degree), var(--secondary), var(--secondary-hover) 100%);
    color: var(--secondary-text);
}

.button-gradient-2, [class*='stock-'] .button-gradient-2, [class*='background-'] .button-gradient-2, [class*='card-'] .button-gradient-2, [class*='feature-'] .button-gradient-2 {
    background: linear-gradient(var(--gradient-degree), var(--secondary), var(--secondary-hover) 100%) !important;
    color: var(--secondary-text) !important;
}

    .button-gradient-2 * {
        color: var(--secondary-text) !important;
    }

    .button-gradient-2:hover, .button-gradient-2:focus {
        background: linear-gradient(var(--gradient-degree), var(--secondary-hover), var(--secondary-hover) 100%) !important;
        color: var(--secondary-hover-text) !important;
    }

.gradient-2 *:not([class*='button-']):not([class*='card-']):not([class*='feature-']),
.transparent-gradient-2 *:not([class*='button-']):not([class*='card-']):not([class*='feature-']) {
    color: var(--secondary-text);
}

/*-- neutral --*/
.gradient-3 {
    background: linear-gradient(var(--gradient-degree), var(--neutral), var(--neutral-hover) 100%);
    color: var(--neutral-text);
}

.button-gradient-3, [class*='background-'] .button-gradient-3, [class*='card-'] .button-gradient-3, [class*='feature-'] .button-gradient-3 {
    background: linear-gradient(var(--gradient-degree), var(--neutral), var(--neutral-hover) 100%) !important;
    color: var(--neutral-text) !important;
}

    .button-gradient-3 * {
        color: var(--neutral-text) !important;
    }

    .button-gradient-3:hover, .button-gradient-3:focus {
        background: linear-gradient(var(--gradient-degree), var(--neutral-hover), var(--neutral-hover) 100%) !important;
        color: var(--neutral-hover-text) !important;
    }

.gradient-3 *:not([class*='button-']):not([class*='card-']):not([class*='feature-']),
.transparent-gradient-3 *:not([class*='button-']):not([class*='card-']):not([class*='feature-']) {
    color: var(--neutral-text) !important;
}

/*-- dark --*/
.gradient-4 {
    background: linear-gradient(var(--gradient-degree), var(--dark), var(--dark-hover) 100%);
    color: var(--dark-text);
}

.button-gradient-4, [class*='background-'] .button-gradient-4, [class*='card-'] .button-gradient-4, [class*='feature-'] .button-gradient-4 {
    background: linear-gradient(var(--gradient-degree), var(--dark), var(--dark-hover) 100%) !important;
    color: var(--dark-text) !important;
}

    .button-gradient-4 * {
        color: var(--dark-text) !important;
    }

    .button-gradient-4:hover, .button-gradient-4:focus {
        background: linear-gradient(var(--gradient-degree), var(--dark-hover), var(--dark-hover) 100%) !important;
        color: var(--dark-hover-text) !important;
    }

.gradient-4 *:not([class*='button-']):not([class*='card-']):not([class*='feature-']),
.transparent-gradient-4 *:not([class*='button-']):not([class*='card-']):not([class*='feature-']) {
    color: var(--dark-text);
}

/*-- accent-1 --*/
.gradient-5 {
    background: linear-gradient(var(--gradient-degree), var(--accent-1), var(--accent-1-hover) 100%);
    color: var(--accent-1-text);
}

.button-gradient-5, [class*='background-'] .button-gradient-5, [class*='card-'] .button-gradient-5, [class*='feature-'] .button-gradient-5 {
    background: linear-gradient(var(--gradient-degree), var(--accent-1), var(--accent-1-hover) 100%) !important;
    color: var(--accent-1-text) !important;
}

    .button-gradient-5 * {
        color: var(--accent-1-text) !important;
    }

    .button-gradient-5:hover, .button-gradient-5:focus {
        background: linear-gradient(var(--gradient-degree), var(--accent-1-hover), var(--accent-1-hover) 100%) !important;
        color: var(--accent-1-hover-text) !important;
    }

.gradient-5 *:not([class*='button-']):not([class*='card-']):not([class*='feature-']),
.transparent-gradient-5 *:not([class*='button-']):not([class*='card-']):not([class*='feature-']) {
    color: var(--accent-1-text);
}

/*-- accent-2 --*/
.gradient-6 {
    background: linear-gradient(var(--gradient-degree), var(--accent-2), var(--accent-2-hover) 100%);
    color: var(--accent-2-text);
}

.button-gradient-6, [class*='background-'] .button-gradient-6, [class*='card-'] .button-gradient-6, [class*='feature-'] .button-gradient-6 {
    background: linear-gradient(var(--gradient-degree), var(--accent-2), var(--accent-2-hover) 100%) !important;
    color: var(--accent-2-text) !important;
}

    .button-gradient-6 * {
        color: var(--accent-2-text) !important;
    }

    .button-gradient-6:hover, .button-gradient-6:focus {
        background: linear-gradient(var(--gradient-degree), var(--accent-2-hover), var(--accent-2-hover) 100%) !important;
        color: var(--accent-2-hover-text) !important;
    }

.gradient-6 *:not([class*='button-']):not([class*='card-']):not([class*='feature-']),
.transparent-gradient-6 *:not([class*='button-']):not([class*='card-']):not([class*='feature-']) {
    color: var(--accent-2-text);
}

/*-- black --*/
.gradient-black {
    background: linear-gradient(var(--gradient-degree), var(--my-black), var(--my-black-hover) 100%);
    color: var(--my-black-text);
}

.button-gradient-black, [class*='background-'] .button-gradient-black, [class*='card-'] .button-gradient-black, [class*='feature-'] .button-gradient-black {
    background: linear-gradient(var(--gradient-degree), var(--my-black), var(--my-black-hover) 100%) !important;
    color: var(--my-black-text) !important;
}

    .button-gradient-black * {
        color: var(--my-black-text) !important;
    }

    .button-gradient-black:hover, .button-gradient-black:focus {
        background: linear-gradient(var(--gradient-degree), var(--my-black-hover), var(--my-black-hover) 100%) !important;
        color: var(--my-black-hover-text) !important;
    }

.gradient-black *:not([class*='button-']):not([class*='card-']):not([class*='feature-']),
.transparent-gradient-black *:not([class*='button-']):not([class*='card-']):not([class*='feature-']) {
    color: var(--my-black-text);
}

/*-- gray --*/
.gradient-gray {
    background: linear-gradient(var(--gradient-degree), var(--my-gray), var(--my-gray-hover) 100%);
    color: var(--my-gray-text);
}

.button-gradient-gray, [class*='background-'] .button-gradient-gray, [class*='card-'] .button-gradient-gray, [class*='feature-'] .button-gradient-gray {
    background: linear-gradient(var(--gradient-degree), var(--my-gray), var(--my-gray-hover) 100%) !important;
    color: var(--my-gray-text) !important;
}

    .button-gradient-gray * {
        color: var(--my-gray-text) !important;
    }

    .button-gradient-gray:hover, .button-gradient-gray:focus {
        background: linear-gradient(var(--gradient-degree), var(--my-gray-hover), var(--my-gray-hover) 100%) !important;
        color: var(--my-gray-hover-text) !important;
    }

.gradient-gray *:not([class*='button-']):not([class*='card-']):not([class*='feature-']),
.transparent-gradient-gray *:not([class*='button-']):not([class*='card-']):not([class*='feature-']) {
    color: var(--my-gray-text);
}

/*-- white --*/
.gradient-white {
    background: linear-gradient(var(--gradient-degree), var(--my-white), var(--my-white-hover) 100%);
    color: var(--my-white-text) !important;
}

.button-gradient-white, [class*='background-'] .button-gradient-white, [class*='card-'] .button-gradient-white, [class*='feature-'] .button-gradient-white {
    background: linear-gradient(var(--gradient-degree), var(--my-white), var(--my-white-hover) 100%) !important;
    color: var(--my-white-text) !important;
}

    .button-gradient-white * {
        color: var(--my-white-text) !important;
    }

    .button-gradient-white:hover, .button-gradient-white:focus {
        background: linear-gradient(var(--gradient-degree), var(--my-white-hover), var(--my-white-hover) 100%) !important;
        color: var(--my-white-hover-text) !important;
    }

.gradient-white *:not([class*='button-']):not([class*='card-']):not([class*='feature-']),
.transparent-gradient-white *:not([class*='button-']):not([class*='card-']):not([class*='feature-']) {
    color: var(--my-white-text);
}

[class*='gradient-'] .overlay-content, [class*='gradient-'] .overlay-content *:not([class*='button-']):not([class*='card-']):not([class*='feature-']):not([class*='snapshot-']):not([class*='editing-']),
[class*='transparent-gradient-'], [class*='background-'] [class*='transparent-gradient-'],
[class*='background-'] [class*='transparent-gradient-'] .overlay-content,
[class*='background-'] [class*='transparent-gradient-'] .overlay-content *:not([class*='button-']):not([class*='card-']):not([class*='feature-']):not([class*='snapshot-']):not(.editing-content-meta) {
    background: transparent;
    background-color: transparent !important;
}


/*-- BLUE --*/
.gradient-blue-1:before {
    background: rgb(2,0,36);
    background: linear-gradient(0deg, var(--titan-blue-hover) 0%, var(--titan-blue) 100%);
}

.gradient-blue-2:before {
    background: rgb(2,0,36);
    background: linear-gradient(180deg, var(--titan-blue-hover) 0%, var(--titan-blue) 100%);
}

.gradient-blue-3:before {
    background: rgb(2,0,36);
    background: radial-gradient(circle farthest-corner at 14% 14%, var(--titan-blue-hover) 0%, var(--titan-blue) 100%);
}

.gradient-blue-4:before {
    background: rgb(2,0,36);
    background: radial-gradient(circle farthest-corner at 5% 5%, var(--titan-blue-hover) 0%, var(--titan-blue-dark) 100%);
}

.gradient-blue-5:before {
    background: rgb(2,0,36);
    background: linear-gradient(235deg, var(--titan-blue-dark) -25%, var(--titan-blue) 33%, var(--titan-blue-hover) 120%);
}

.gradient-blue-6:before {
    background: rgb(2,0,36);
    background: linear-gradient(180deg, var(--medium-blue) 0%, var(--medium-blue-hover) 100%);
}

.gradient-blue-7:before {
    background: rgb(2,0,36);
    background: radial-gradient(circle farthest-corner at 30% 40%, var(--medium-blue-hover) 0%, var(--medium-blue) 100%);
}

.gradient-blue-8:before {
    background: rgb(2,0,36);
    background: linear-gradient(to right, var(--medium-blue), var(--titan-blue));
}

/*-- ORANGE --*/
.gradient-orange-1:before {
    background: rgb(2,0,36);
    background: linear-gradient(0deg, var(--orange-hover) 0%, var(--orange) 100%);
}

.gradient-orange-2:before {
    background: rgb(2,0,36);
    background: linear-gradient(180deg, var(--orange-hover) 0%, var(--orange) 100%);
}

.gradient-orange-3:before {
    background: rgb(2,0,36);
    background: radial-gradient(circle farthest-corner at 14% 14%, var(--orange-hover) 0%, var(--orange) 100%);
}

.gradient-orange-4:before {
    background: rgb(2,0,36);
    background: radial-gradient(circle farthest-corner at 5% 5%, var(--orange-hover) 0%, var(--orange-dark) 100%);
}

.gradient-orange-5:before {
    background: rgb(2,0,36);
    background: linear-gradient(235deg, var(--orange-dark) -25%, var(--orange) 33%, var(--orange-hover) 120%);
}

.gradient-orange-6:before {
    background: rgb(2,0,36);
    background: linear-gradient(180deg, var(--light-orange) 0%, var(--light-orange-hover) 100%);
}

.gradient-orange-7:before {
    background: rgb(2,0,36);
    background: radial-gradient(circle farthest-corner at 30% 40%, var(--light-orange-hover) 0%, var(--light-orange) 100%);
}

.gradient-orange-8:before {
    background: rgb(2,0,36);
    background: linear-gradient(to right, var(--light-orange), var(--orange));
}


/*-- DARK --*/
.gradient-dark-1:before {
    background: rgb(2,0,36);
    background: linear-gradient(0deg, var(--my-black-hover) 0%, var(--my-black) 100%);
}

.gradient-dark-2:before {
    background: rgb(2,0,36);
    background: linear-gradient(180deg, var(--my-black-hover) 0%, var(--my-black) 100%);
}

.gradient-dark-3:before {
    background: rgb(2,0,36);
    background: radial-gradient(circle farthest-corner at 14% 14%, var(--my-black-hover) 0%, var(--my-black) 100%);
}

.gradient-dark-4:before {
    background: rgb(2,0,36);
    background: radial-gradient(circle farthest-corner at 5% 5%, var(--my-black-hover) 0%, var(--my-black-dark) 100%);
}

.gradient-dark-5:before {
    background: #232526; /* fallback for old browsers */
    background: -webkit-linear-gradient(to left, #414345, #232526); /* Chrome 10-25, Safari 5.1-6 */
    background: linear-gradient(to left, #414345, #232526); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
}

.gradient-dark-6:before {
    background: #000000; /* fallback for old browsers */
    background: -webkit-linear-gradient(to left, #434343, #000000); /* Chrome 10-25, Safari 5.1-6 */
    background: linear-gradient(to left, #434343, #000000); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
}

.gradient-dark-7:before {
    background: #232526; /* fallback for old browsers */
    background: -webkit-linear-gradient(to left, #414345, #232526); /* Chrome 10-25, Safari 5.1-6 */
    background: linear-gradient(to left, #414345, #232526); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
}

.gradient-dark-8:before {
    background: linear-gradient(to bottom, rgba(255,255,255,0.15) 0%, rgba(0,0,0,0.15) 100%), radial-gradient(at top center, rgba(255,255,255,0.40) 0%, rgba(0,0,0,0.40) 120%) #989898;
}

/*-- LIGHT --*/
.gradient-light-1:before {
    background: rgb(2,0,36);
    background: linear-gradient(0deg, var(--my-white-hover) 0%, var(--my-white) 100%);
}

.gradient-light-2:before {
    background: rgb(2,0,36);
    background: linear-gradient(180deg, var(--my-white-hover) 0%, var(--my-white) 100%);
}

.gradient-light-3:before {
    background: rgb(2,0,36);
    background: radial-gradient(circle farthest-corner at 14% 14%, var(--my-white-hover) 0%, var(--my-white) 100%);
}

.gradient-light-4:before {
    background: rgb(2,0,36);
    background: radial-gradient(circle farthest-corner at 5% 5%, var(--my-white-hover) 0%, var(--my-white-dark) 100%);
}

.gradient-light-5:before {
    background-image: linear-gradient(120deg, #fdfbfb 0%, #ebedee 100%);
}

.gradient-light-6:before {
    background: rgb(2,0,36);
    background: linear-gradient(180deg, var(--light-gray) 0%, var(--light-gray-hover) 100%);
}

.gradient-light-7:before {
    background: rgb(2,0,36);
    background: radial-gradient(circle farthest-corner at 30% 40%, var(--light-gray-hover) 0%, var(--light-gray) 100%);
}

.gradient-light-8:before {
    background: rgb(2,0,36);
    background: linear-gradient(to right, var(--light-gray), var(--my-white));
}


/*-- COLOR MIXES --*/
.gradient-mix-1:before {
    background: rgb(2,0,36);
    background-image: linear-gradient(.0turn, var(--orange-dark), 10%, var(--orange) 20%, var(--orange-hover), 40%, var(--titan-blue));
}

.gradient-mix-2:before {
    background: #36D1DC; /* fallback for old browsers */
    background: -webkit-linear-gradient(to bottom, #5B86E5, #36D1DC); /* Chrome 10-25, Safari 5.1-6 */
    background: linear-gradient(to bottom, #5B86E5, #36D1DC); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
}

.gradient-mix-3:before {
    background: #ADA996; /* fallback for old browsers */
    background: linear-gradient(34deg, #EAEAEA, #DBDBDB, #ADA996); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
}

.gradient-mix-4:before {
    background: #373B44; /* fallback for old browsers */
    background: -webkit-linear-gradient(to top, #4286f4, #373B44); /* Chrome 10-25, Safari 5.1-6 */
    background: linear-gradient(to top, #4286f4, #373B44); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
}

.gradient-mix-5:before {
    background: #fe8c00; /* fallback for old browsers */
    background: -webkit-linear-gradient(to left, #f83600, #fe8c00); /* Chrome 10-25, Safari 5.1-6 */
    background: linear-gradient(to left, #f83600, #fe8c00); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
}

.gradient-mix-6:before {
    background: #005C97; /* fallback for old browsers */
    background: -webkit-linear-gradient(to top, #363795, #005C97); /* Chrome 10-25, Safari 5.1-6 */
    background: linear-gradient(to top, #363795, #005C97); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
}

.gradient-mix-7:before {
    background: #abbaab; /* fallback for old browsers */
    background: -webkit-linear-gradient(to right, #ffffff, #abbaab); /* Chrome 10-25, Safari 5.1-6 */
    background: linear-gradient(to right, #ffffff, #abbaab); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
}

.gradient-mix-8:before {
    background-image: linear-gradient( 135deg, #FFCF71 10%, #2376DD 100%);
}
/*-----------------------------------------
    LOADING MESSAGE
*/

.loading {
    position: absolute;
    z-index: 50;
    background-color: var(--my-gray);
    color: var(--my-gray-text);
    padding: 20px;
    margin: 0px;
    visibility: visible;
}

    .loading.active {
        visibility: hidden;
        height: 0px;
        overflow: hidden;
        transition: all var(--transition-time-fast) ease;
        pointer-events: none;
    }

/*+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
+              END OF STANDARD STYLES YOU ARE                                         +
+     USE THE MY STYLE OVERRIDE CSS FILE TO ADJUST STYLES AS NEEDED                   +
+     PLEASE MAINTAIN YOUR SITE NAVIGATION SECTION IN THE MY NAVIGATION CSS FILE      +
+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++*/