:root {
    --clt-brand: #f5a302;
    --clt-brand-hover: #df9400;
    --clt-brand-soft: rgba(236, 94, 47, 0.3);
    --clt-accent-coral: #ec5e2f;
    --clt-accent-coral-strong: #ff561a;
    --clt-accent-soft: #c3a5d3;
    --clt-highlight-lime: #d6f54f;
    --clt-link: #0070e0;
    --clt-video-play: #d11616;
    --clt-quote-bg: rgb(18, 40, 159);
    --clt-border-subtle: #dddddd;
    --clt-border-light: #cccccc;
    --clt-border-ui: #e4e7e9;
    --clt-required: #d73e31;
    --clt-pagination-border: #7b7e7f;
    --clt-accent-orange-glow: #ff5113;

    --clt-text: #121212;
    --clt-text-heading: #505253;
    --clt-text-muted: #3c3c3b;
    --clt-text-inverse: #ffffff;
    --clt-text-black: #000000;
    --clt-text-logo: #1b1b1b;
    --clt-text-strong: #1f1f1f;

    --clt-bg-light: #eeeeee;
    --clt-bg-light-strong: #cbcbcb;
    --clt-bg-light-strong-hover: #b3b3b3;
    --clt-bg-dark: #2c2e36;
    --clt-bg-dark-hover: #5c5e66;
    --clt-surface-dark: #414141;

    --clt-warning: #fbd03e;
    --clt-warning-hover: #ffd750;
    --clt-danger: #d10808;
    --clt-danger-hover: #b80000;

    --clt-border: #212121;

    --clt-radius-sm: 3px;
    --clt-radius-md: 5px;
    --clt-radius-cut: 30px 0;

    --clt-fs-body: clamp(0.98rem, 0.94rem + 0.2vw, 1rem);
    --clt-fs-h1: clamp(2.2rem, 1.8rem + 1.8vw, 3rem);
    --clt-fs-h2: clamp(1.8rem, 1.5rem + 1.2vw, 2.2rem);
    --clt-fs-h3: clamp(1.4rem, 1.2rem + 0.8vw, 1.6rem);
    --clt-fs-h4: clamp(1.25rem, 1.1rem + 0.5vw, 1.4rem);
    --clt-fs-h5: clamp(1.15rem, 1.05rem + 0.3vw, 1.3rem);
    --clt-fs-h6: clamp(1.05rem, 1rem + 0.2vw, 1.2rem);
    --clt-fs-sm: clamp(0.8rem, 0.76rem + 0.2vw, 0.9rem);
    --clt-fs-simple-news-category: clamp(1.1rem, 1rem + 0.6vw, 1.4rem);
    --clt-fs-simple-news-title: clamp(2rem, 1.5rem + 2vw, 3rem);
    --clt-fs-simple-logo-nav: clamp(2.5rem, 1.8rem + 2.8vw, 4rem);
    --clt-fs-comp-xs: clamp(0.78rem, 0.75rem + 0.15vw, 0.8rem);
    --clt-fs-comp-sm: clamp(0.86rem, 0.82rem + 0.2vw, 0.9rem);
    --clt-fs-comp-875: clamp(0.84rem, 0.81rem + 0.18vw, 0.875rem);
    --clt-fs-comp-base: clamp(0.98rem, 0.94rem + 0.2vw, 1rem);
    --clt-fs-comp-md: clamp(1.04rem, 1rem + 0.25vw, 1.1rem);
    --clt-fs-comp-lg: clamp(1.12rem, 1.06rem + 0.35vw, 1.2rem);
    --clt-fs-comp-lg-alt: clamp(1.18rem, 1.1rem + 0.45vw, 1.25rem);
    --clt-fs-comp-xl: clamp(1.2rem, 1.12rem + 0.45vw, 1.3rem);
    --clt-fs-comp-2xl: clamp(1.25rem, 1.12rem + 0.7vw, 1.4rem);
    --clt-fs-comp-3xl: clamp(1.4rem, 1.2rem + 1vw, 1.6rem);
    --clt-fs-comp-hero: clamp(2rem, 1.6rem + 1.8vw, 2.4rem);
    --clt-fs-comp-display: clamp(2.2rem, 1.7rem + 2vw, 3rem);
    --clt-fs-logo-script: clamp(3rem, 2.4rem + 2.8vw, 4.04rem);
    --clt-fs-scale-85: 85%;
    --clt-fs-scale-55: 55%;
    --clt-fs-scale-45: 45%;
    --clt-fs-scale-emphasis: 1.4em;
    --clt-lh-body: 1.6;
    --clt-lh-heading: 1.2;
    --clt-lh-simple-news-title: 1;
    --clt-lh-tight: 1;
    --clt-lh-compact: 1.1;
    --clt-lh-medium: 1.2;
    --clt-lh-relaxed: 1.3;
    --clt-lh-ui: 1.5;
    --clt-lh-list-landing-title: 1.2;
    --clt-overlay-dark-soft: rgba(0, 0, 0, 0.33);
}

body,
.body {
    font-weight: 400;
    text-transform: none;
    font-size: var(--clt-fs-body);
    line-height: var(--clt-lh-body);
    font-family: "Poppins", Arial, Helvetica, sans-serif;
}

.astroid-logo-text,
.astroid-logo-text > a.site-title {
    color: var(--clt-text-logo);
    font-weight: 700;
    text-transform: none;
    font-size: var(--clt-fs-logo-script);
    line-height: var(--clt-lh-tight);
    font-family: "Arizonia", "MS Sans Serif", Geneva, sans-serif;
}

.bottom2 li.nav-stacked-logo,
.footerIcons li.nav-stacked-logo,
.coprightInfo li.nav-stacked-logo {
    display: none !important;
}

/*
TYPOGRAPHY
*/
.astroid-container {
    overflow: hidden;
}

h1,
h2,
h3,
h4,
h5,
h6 {
    color: var(--clt-text-heading);
    line-height: var(--clt-lh-heading);
    font-family: "Raleway", "MS Sans Serif", Geneva, sans-serif;
}

h1 {
    font-size: var(--clt-fs-h1);
    font-weight: 700;
}

h2 {
    color: var(--clt-brand);
    font-size: var(--clt-fs-h2);
    font-weight: 700;
}

h3 {
    font-size: var(--clt-fs-h3);
    font-weight: 500;
}

h4 {
    font-size: var(--clt-fs-h4);
    font-weight: 500;
}

h5,
h6 {
    font-weight: 500;
}

h5 {
    font-size: var(--clt-fs-h5);
}

h6 {
    font-size: var(--clt-fs-h6);
}

p,
ul,
ol,
li {
    font-size: var(--clt-fs-body);
    line-height: var(--clt-lh-body);
}

ul {
    list-style-type: square;
}

ul ul {
    margin: 0 0 0 1.2rem;
}

ul li::marker,
ol li::marker {
    color: var(--clt-brand);
}

mark,
.mark {
    background-color: var(--clt-brand-soft);
}

blockquote {
    border-left: 5px solid var(--clt-brand);
    color: var(--clt-text-black);
    font-size: var(--clt-fs-h3);
    font-style: italic;
    font-weight: 600;
    margin: 0 30px;
    padding-left: 20px;
}

/* ------------------
BUTTONS */
.btn-clt {
    border-radius: var(--clt-radius-sm) !important;
    padding: 0.5rem 1.5rem !important;
    font-size: var(--clt-fs-comp-base) !important;
    font-weight: 600 !important;
    line-height: var(--clt-lh-ui) !important;
    border: 0 !important;
}

.btn-clt-sm {
    border-radius: var(--clt-radius-sm) !important;
    padding: 0.25rem 0.5rem !important;
    font-size: var(--clt-fs-comp-875) !important;
    font-weight: 600 !important;
    line-height: var(--clt-lh-ui) !important;
    border: 0 !important;
}

.btn {
    border: 1px solid var(--clt-text) !important;
    border-radius: var(--clt-radius-sm) !important;
    padding: 0.8rem 1.5rem !important;
    text-shadow: none;
}

.btn-primary {
    background-color: var(--clt-brand) !important;
    color: var(--clt-text) !important;
}

.btn-primary:hover,
.btn-clt-sm.btn-light.active {
    background-color: var(--clt-text) !important;
    border: 1px solid var(--clt-brand) !important;
    color: var(--clt-brand) !important;
}

.btn-secondary {
    background-color: var(--clt-bg-light) !important;
    color: var(--clt-text) !important;
}

.btn-secondary:hover {
    background-color: var(--clt-text) !important;
    color: var(--clt-text-inverse) !important;
}

.btn-light {
    background-color: var(--clt-bg-light-strong) !important;
    color: var(--clt-text-muted) !important;
}

.btn-light:hover,
.btn-light.active {
    background-color: var(--clt-bg-light-strong-hover) !important;
    color: var(--clt-text-inverse) !important;
}

.btn-dark {
    background-color: var(--clt-bg-dark) !important;
}

.btn-dark:hover {
    background-color: var(--clt-bg-dark-hover) !important;
}

.btn-warning {
    background-color: var(--clt-warning) !important;
}

.btn-warning:hover {
    background-color: var(--clt-warning-hover) !important;
}

.astroid-component a {
    border-bottom: 1px dotted var(--clt-link);
    color: var(--clt-link);
}

.astroid-component a:hover {
    border-bottom: 1px dotted transparent;
    color: var(--clt-brand);
}

.astroid-component .leadItems a {
    color: var(--clt-bg-dark);
}

/*
Custom Buttons
*/
a.btn-account {
    background-color: var(--clt-brand);
    color: var(--clt-text-black) !important;
}

a.btn-account:hover {
    background-color: var(--clt-brand-hover);
    color: var(--clt-text-black) !important;
}

a.btn-logout {
    background-color: var(--clt-danger);
}

a.btn-logout:hover {
    background-color: var(--clt-danger-hover);
    color: var(--clt-text-inverse) !important;
}

/*
TOP A - social media
*/
div#socialMediaIcons {
    display: inline-block;
    position: absolute;
    right: 0;
    top: 10px;
}

div#socialMediaIcons a {
    color: var(--clt-text);
    margin-left: 5px;
}

/*
Header
*/
div#headerBlockColumn {
    position: relative;
}

div#mainheaderArea {
    padding: 25px 0 15px;
}

.astroid-header-section header.astroid-header:not(.astroid-header-sticky) {
    padding: 0;
}

.header-right-section {
    margin: 20px 0 0;
}

#astroid-header nav {
    padding: 0 !important;
}

#astroid-header .nav-link {
    border: 1px solid var(--clt-text-black);
    border-radius: var(--clt-radius-md);
    color: var(--clt-text-black);
    font-size: var(--clt-fs-comp-md);
    font-weight: 500;
    margin-left: 15px;
    padding: 0.275rem 1.5rem;
}

#astroid-header .nav-link:hover,
#astroid-header li.nav-item-active .nav-link {
    background-color: var(--clt-brand);
    color: var(--clt-text-black);
}

@media (min-width: 992px) {
    #astroid-header .offcanvasRight {
        display: none !important;
    }

    #mainNavigation nav {
        display: grid !important;
        align-content: center;
        justify-content: center;
    }
}

/* subnav width desktop */
li.navWidthAbout .megamenu-container > .nav-submenu {
    width: 170px !important;
}

li.navWidthResources .megamenu-container > .nav-submenu {
    width: 210px !important;
}

/* MAIN MENU #2 */
.astroid-mobilemenu {
    width: clamp(300px, 65vw, 500px) !important;
}

.astroid-mobilemenu-container .astroid-mobilemenu-inner .dropdown-menus.menu_open {
    left: -20px !important;
}

.moduletable.secondMainMenu,
.moduletable.shopMenuOnly {
    margin: 0;
    padding: 0;
}

.megamenu-container li.nav-item-submenu > a.active:hover {
    color: var(--clt-text-inverse);
}

/*
logo
*/
header .logo-wrapper {
    height: 84px !important;
    width: 186px !important;
}

img.astroid-logo-default {
    height: 84px;
    width: 186px;
    max-width: none !important;
    max-height: none !important;
}

/*
Donate Footprints
*/
.impact-boxes {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    padding: 20px;
}

.impact-box {
    flex: 1 1 calc(33.333% - 20px);
    display: flex;
    flex-direction: column;
}

.impact-image {
    background-image: url('/images/assets/paw-impact-yellow.png');
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    min-height: 200px;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    padding: 20px;
    align-content: center;
    flex-direction: column;
    flex-wrap: nowrap;
    text-align: center;
}

.impact-image p {
    margin: 0 0 25px;
    padding: 0;
    color: var(--clt-text-heading);
    line-height: var(--clt-lh-heading);
    font-weight: 600;
    font-size: var(--clt-fs-comp-lg);
}

.impact-text {
    text-align: center;
    padding: 0 15px;
    font-size: var(--clt-fs-comp-sm);
    line-height: var(--clt-lh-heading);
}

.impact-text p {
    margin: 0;
    padding: 0;
}

@media (max-width: 992px) {
    .impact-box {
        flex: 1 1 calc(50% - 20px);
    }
}

/*
endFooterAnimals
*/
.endFooterAnimals img {
    width: 100%;
}

/*
bottom menus
*/
#bottomMenuArea {
    text-shadow: 0 0 20px var(--clt-text);
    font-size: var(--clt-fs-comp-base);
}

@media (max-width: 991.99px) {
    div#bottomA,
    div#bottomB {
        margin-bottom: 30px;
    }
}

@media (max-width: 575.99px) {
    div#bottomC {
        margin-bottom: 30px;
    }
}

div#bottomA > div {
    padding-left: 0;
}

div#bottomB > div,
div#bottomc > div {
    padding: 0;
}

div#bottomD > div {
    padding-right: 0;
}

#bottomMenuArea li {
    margin: 0 0 0.5rem !important;
}

#bottomMenuArea li.item-229,
#bottomMenuArea li.item-230 {
    margin: 0.5rem 0 0 !important;
}

#bottomMenuArea li.item-500,
#bottomMenuArea li.item-210,
#bottomMenuArea li.item-215 {
    margin: 0 !important;
}

.bottomMenus {
    color: var(--clt-text-inverse);
}

.bottomMenus h4 {
    color: var(--clt-brand);
    line-height: var(--clt-lh-tight);
    margin-bottom: 1rem;
}

.bottomMenus a {
    color: var(--clt-text-inverse);
    line-height: var(--clt-lh-tight);
}

.bottomMenus a.menuYellow {
    color: var(--clt-brand);
    font-size: var(--clt-fs-comp-2xl);
    margin-bottom: 1rem;
    display: inline-block;
    border-bottom: 1px solid transparent;
}

.bottomMenus a.menuMidArea {
    margin-top: 2.4rem; /*1rem*/
}

.bottomMenus a:hover {
    border-bottom: 1px dotted;
    color: var(--clt-text-inverse) !important;
}

.bottomMenus a.btn-bottomMenu {
    background-color: var(--clt-brand);
    border: 1px solid var(--clt-border);
    color: var(--clt-text) !important;
    font-size: var(--clt-fs-comp-lg);
    font-weight: 600;
}

.bottomMenus a.btn-bottomMenu:hover {
    background-color: var(--clt-bg-light);
    border: 1px solid var(--clt-border) !important;
    color: var(--clt-text) !important;
}
/*subnav bottom menus*/
.mod-menu.nav.flex-column ul.mod-menu__sub {
    margin-top: 0.5rem!important;
}
/*
footer section
*/
#footerSection {
    background-repeat: no-repeat;
    background-size: cover;
    background-attachment: scroll;
    background-position: 50%;
}
/*
footer. black bar
*/
#footerBlackBar {
    text-align: center;
    padding: 10px 15px;
    margin-top: 125px;
    font-size: var(--clt-fs-sm);
}

.copyContent {
    line-height: var(--clt-lh-ui);
}

.copyContent span {
    margin-right: 15px;
}

.copyContent a:hover {
    border-bottom: 1px dotted;
}

.copyContent .url1,
.copyContent .url2 {
    margin-right: 15px;
}

.copyContent .dev2 {
    margin-right: 1px;
}

.copyContent .dev1 {
    margin-left: 1px;
}

/*
Alerts
*/
.astroid-message {
    display: flex;
    justify-content: center;
}

/*
error-page
*/
.error-page {
    display: inherit;
    padding: 0;
    text-align: left;
}

.text-center.align-self-center {
    text-align: left !important;
}

#errorPage {
    width: 690px;
    position: absolute;
    top: 4rem;
    left: 20rem;
}

div#errorPage h1 {
    font-weight: 800;
}

div#errorPage h1 span {
    font-size: var(--clt-fs-scale-45);
}

div#errorPage p {
    font-size: var(--clt-fs-comp-2xl);
}

div#errorPage .buttons a {
    margin: 0 0 1rem 0;
}

.error-page .btn-backtohome {
    display: none;
}

@media (max-width: 790.99px) {
    #errorPage {
        width: unset;
        top: 4rem;
        left: 2rem;
        padding: 0 1rem 0 0;
    }
}

@media (max-width: 767.99px) {
    #errorPage {
        width: unset;
        top: 4rem;
        left: 1rem;
        padding: 0 1rem 0 0;
    }
}

