@charset "UTF-8";
/* 
Theme Name: Design Rangers - Hello Elementor Child Theme
Theme URI: https://github.com/elementor/hello-theme/
Description: Hello Elementor Child is a child theme of Hello Elementor, created by Elementor team
Author: Elementor Team
Author URI: https://elementor.com/
Template: hello-elementor
Version: 1.0.1
Text Domain: hello-elementor-child
License: GNU General Public License v3 or later.
License URI: https://www.gnu.org/licenses/gpl-3.0.html
Tags: flexible-header, custom-colors, custom-menu, custom-logo, editor-style, featured-images, rtl-language-support, threaded-comments, translation-ready
*/
/********************* Atoms – Variables, Typography, Buttons, Body Copy Etc. *********************/
/****************************************

ATOMS

Atoms are the smallest core component of any design and are combined to make most elements in the site.

Table of Contents

1. VARIABLES
2. TYPOGRAPHY
3. ANIMATION
4. LINKS
5. BUTTONS
6. DIVIDERS

*****************************************/
/*********************

1. VARIABLES

*********************/
:root {
  --base-font-size: 18px;
  --base-line-height: 1.8em;
}

:root {
  --base-text-color: #3A3935;
  --base-accent-color: #C35828;
  --base-link-color: #B15533;
  --base-link2-color: #DA723C;
  --base-hover-color: #D69A2D;
  --base-divider-color: #d0d6dcad;
}

/*********************

2. TYPOGRAPHY

Baseline typography in Elementor is based on a 1.25 type scale:
https://www.modularscale.com/?16&px&1.25

*********************/
.elementor-widget-heading h1 {
  margin-bottom: 8px;
}
@media (max-width: 767px) {
  .elementor-widget-heading h1 {
    margin-bottom: 4px;
  }
}
.elementor-widget-heading h2 {
  margin-bottom: 8px;
}
@media (max-width: 767px) {
  .elementor-widget-heading h2 {
    margin-bottom: 4px;
  }
}
.elementor-widget-heading h3 {
  margin-bottom: 0;
}
.elementor-widget-heading h4 {
  margin-bottom: 0;
}
.elementor-widget-heading h5 {
  margin-bottom: 0;
}

.elementor-widget-text-editor ul, .elementor-widget-text-editor ol {
  margin-bottom: 32px;
}

/*********************

3. ANIMATION

Default animation properties.

*********************/
.elementor-widget-button .elementor-button, .elementor-button-c-info .elementor-button, .elementor-button-c-warning .elementor-button:after, li.elementor-icon-list-item, li.elementor-icon-list-item .elementor-icon-list-icon {
  -webkit-transition: all .5s ease;
  transition: all .5s ease;
}

/*********************

4. LINKS

This could include any type of special links or link overrides.

*********************/
/*********************

5. BUTTONS

*********************/
.elementor-widget-button .elementor-button, .elementor-button-c-info .elementor-button {
  color: #3A3935;
  background: transparent;
  font-size: 22px;
  line-height: 24px;
  letter-spacing: 1.06px;
  text-transform: uppercase;
  border-radius: 0;
}
@media only screen and (min-width: 0px){
	.elementor-widget-button .elementor-button, .elementor-button-c-info .elementor-button {
	  font-size: 18px;
	  line-height: 20px;
	}
}

.elementor-widget-button .elementor-button {
  font-weight: bold;
  border: 1px solid transparent;
  border-bottom-color: #707070;
}
.elementor-widget-button .elementor-button:hover {
  border-color: #707070;
}
.elementor-widget-button .elementor-button#white {
  color: #fff;
  border-bottom-color: #fff;
}
.elementor-widget-button .elementor-button#white:hover {
  border-color: #fff;
}

.elementor-button-c-info .elementor-button {
  background: transparent;
  border-bottom: 1px solid transparent;
  border-bottom-color: var(--base-link2-color);
  color: var(--base-link-color);
}
.elementor-button-c-info .elementor-button:hover {
  background: transparent;
  color: var(--e-global-color-5f4cee72);
  border-color: var(--base-link2-color);
}

.elementor-button-c-success .elementor-button {
  font-weight: bold;
  fill: var(--base-link-color);
  color: var(--base-link-color);
  background-color: transparent;
  border-style: dotted;
  border-width: 0 0 2px;
  border-color: transparent;
  padding: 8px 0;
  position: relative;
}
.elementor-button-c-success .elementor-button:hover {
  background: transparent;
  border-color: var(--base-link-color);
}

.elementor-button-c-warning .elementor-button {
  fill: var(--base-link-color);
  color: var(--base-link-color);
  background-color: transparent;
  border-style: dotted;
  border: none;
  padding: 8px 0;
  position: relative;
}
.elementor-button-c-warning .elementor-button:hover {
  color: var(--base-link-color);
  background: transparent;
}
.elementor-button-c-warning .elementor-button:hover:after {
  right: -24px;
}
.elementor-button-c-warning .elementor-button:after {
  content: "\f101";
  font-family: "Font Awesome 5 Free";
  font-weight: 900;
  position: absolute;
  right: -20px;
  top: 50%;
  -webkit-transform: translatey(-50%);
  transform: translatey(-50%);
}

.elementor-button-c-danger .elementor-button {
  border: 1px solid var(--base-link-color);
  border-radius: 4px;
  background-color: transparent;
  color: var(--base-link-color);
  padding: 4px 8px;
  font-size: 0.8em;
  font-weight: normal;
  letter-spacing: 0.2;
  text-transform: uppercase;
}
.elementor-button-c-danger .elementor-button:hover {
  background: var(--base-link-color);
  color: #fff;
}
@media only screen and (min-width: 768px) and (max-width: 950px) {
	.toggle-one .elementor-toggle-title, .toggle-two .elementor-toggle-title {
		width: 550px;
	}
}
@media only screen and (max-width: 767px) {
	.toggle-one .elementor-toggle-title, .toggle-two .elementor-toggle-title {
		width: 170px;
	}
}
/****************************************

6. DIVIDERS

*****************************************/
hr {
  color: var(--base-divider-color);
  padding-top: 8px;
  padding-bottom: 8px;
}

.elementor-widget-divider:not(.elementor-widget-divider--view-line_text):not(.elementor-widget-divider--view-line_icon) .elementor-divider-separator {
  border-top: var(--divider-border-width) var(--divider-border-style) var(--base-divider-color);
}
@media only screen and (max-width: 767px){
	.pet-picture{
		height:200px;
	}
}


/********************* Design Rangers Elementor Spacing *********************/
/****************************************

SECTION PADDING – DEFAULTS
Default padding for sections.

*****************************************/
:root {
  --section-padding-side: 24px;
  --section-padding-default: 96px;
  --section-padding-small: 48px;
  --section-padding-medium: 160px;
  --section-padding-large: 200px;
  --section-padding-xl: 280px;
  --section-padding-xxl: calc(280px + 5%);
}
@media (max-width: 1023px) {
  :root {
    --section-padding-default: 80px;
    --section-padding-small: 45px;
    --section-padding-medium: 95px;
    --section-padding-large: 100px;
    --section-padding-xl: 100px;
    --section-padding-xxl: calc(180px + 5%);
  }
}
@media (max-width: 767px) {
  :root {
    --section-padding-default: 32px;
    --section-padding-small: 24px;
    --section-padding-medium: 32px;
    --section-padding-large: 60px;
    --section-padding-xl: 60px;
    --section-padding-xxl: calc(60px + 5%);
  }
}

.section-ptn, .section-pts, .section-ptm, .section-ptl, .section-ptxl, .section-ptxxl, .section-pbn, .section-pbs, .section-pbm, .section-pbl, .section-pbxl, .section-pbxxl {
  padding-left: var(--section-padding-side);
  padding-right: var(--section-padding-side);
}

.section-default-pad {
  padding: var(--section-padding-default) 24px;
}

/****************************************

SECTION PADDING – TOP
Used to change default spacing on sections.
Applied by using custom dropdown elements added to Elementor sections.

*****************************************/
.section-ptn {
  padding-top: 0px !important;
}

.section-pts {
  padding-top: var(--section-padding-small);
}

.section-ptm {
  padding-top: var(--section-padding-medium);
}

.section-ptl {
  padding-top: var(--section-padding-large);
}

.section-ptxl {
  padding-top: var(--section-padding-xl);
}

.section-ptxxl {
  padding-top: var(--section-padding-xxl);
}

.elementor-section.elementor-inner-section {
  padding-left: 0;
  padding-right: 0;
}

/****************************************

SECTION PADDING – BOTTOM
Used to change default spacing on sections.
Applied by using custom dropdown elements added to Elementor sections.

*****************************************/
.section-pbn {
  padding-bottom: 0px !important;
}

.section-pbs {
  padding-bottom: var(--section-padding-small);
}

.section-pbm {
  padding-bottom: var(--section-padding-medium);
}

.section-pbl {
  padding-bottom: var(--section-padding-large);
}

.section-pbxl {
  padding-bottom: var(--section-padding-xl);
}

.section-pbxxl {
  padding-bottom: var(--section-padding-xxl);
}

/****************************************

ELEMENTOR COLUMN GAPS

*****************************************/
:root {
  --column-gap-default: 24px;
  --column-gap-narrow: 16px;
  --column-gap-extended: 32px;
  --column-gap-wide: 64px;
  --column-gap-wider: 128px;
}
@media (max-width: 1023px) {
  :root {
    --column-gap-default:16px;
  }
}
@media (max-width: 767px) {
  :root {
    --column-gap-default:24px 0;
    --column-gap-narrow: 24px 0;
    --column-gap-extended: 24px 0;
    --column-gap-wide: 24px 0;
    --column-gap-wider: 24px 0;
  }
}

.elementor-column-gap-default > .elementor-column > .elementor-element-populated {
  padding: var(--column-gap-default);
}

.elementor-column-gap-narrow.elementor-container > .elementor-column > .elementor-element-populated {
  padding: var(--column-gap-narrrow);
}

.elementor-column-gap-extended.elementor-container > .elementor-column > .elementor-element-populated {
  padding: var(--column-gap-extended);
}

.elementor-column-gap-wide.elementor-container > .elementor-column > .elementor-element-populated {
  padding: var(--column-gap-wide);
}

.elementor-column-gap-wider.elementor-container > .elementor-column > .elementor-element-populated {
  padding: var(--column-gap-wider);
}

/********************* Helper Classes *********************/
/****************************************

HELPER CLASSES

Helper classes are common, global classes that can be applied to elements to change their behavior.
These are typically items that we would apply multiple times throughout a project.

Table of Contents

1. TYPOGRAPHY
2. MARGINS
3. COLUMN PADDING
4. COLUMN CARDS
5. CARD WRAP

*****************************************/
/****************************************

1. TYPOGRAPHY

Helper classes to help control text sizes and line width.

*****************************************/
/**** SMALLER BODY FONT ****/
.text-small p {
  font-size: 0.888em;
  line-height: 1.8;
}
@media (max-width: 767px) {
  .text-small p {
    font-size: 1em;
  }
}

/**** LARGER BODY FONT FOR INTRO TEXT ****/
.text-large p {
  font-size: 1.25em;
  line-height: 1.8;
}
@media (max-width: 767px) {
  .text-large p {
    font-size: 1em;
  }
}

/**** NARROW TEXT – DECREASE LINE WIDTH FOR BETTER READABILITY ****/
.text-narrow {
  max-width: 800px;
}

/**** NARROW TEXT CENTERED – CENTER THE TEXT WIDGET ****/
.text-narrow-centered {
  max-width: 800px;
  margin: 0 auto;
}

/****************************************

2. MARGINS

Classes to add or remove margin below headlines and text globally.

m = margin
t = top
r = right
b = bottom
l = left

Example: mbn = Margin Bottom None

*****************************************/
.mbn, .mbn.elementor-widget, .mbn.elementor-widget:not(:last-child), .mbn h1, .mbn h2, .mbn h3, .mbn h4, .mbn h5, .mbn h6, .mbn p {
  margin-bottom: 0 !important;
}

.mbs, .mbs.elementor-widget, .mbs h1, .mbs h2, .mbs h3, .mbs h4, .mbs h5, .mbs h6, .mbs p {
  margin-bottom: 8px;
}

.mbm, .mbm.elementor-widget, .mbm h1, .mbm h2, .mbm h3, .mbm h4, .mbm h5, .mbm h6, .mbm p {
  margin-bottom: 16px;
}

.mbl, .mbl.elementor-widget {
  margin-bottom: 24px;
}

.mbxl, .mbxl.elementor-widget {
  margin-bottom: 48px;
}

@media (max-width: 1023px) {
  .mbl, .mbl.elementor-widget {
    margin-bottom: 16px;
  }

  .mbxl, .mbxl.elementor-widget {
    margin-bottom: 24px;
  }
}
/****************************************

3. COLUMN PADDING

Adds extra padding on all sides of a column globally.
Perfect for text that sits next to an image or columns that just need extra breathing room.

*****************************************/
:root {
  --column-padding-large: 64px;
  --column-padding-xl: 96px;
}
@media (max-width: 1023px) {
  :root {
    --column-padding-large:32px;
    --column-padding-xl: 32px;
  }
}
@media (max-width: 767px) {
  :root {
    --column-padding-large:24px 0;
    --column-padding-xl: 24px 0;
  }
}

.padding-large .elementor-widget-wrap.elementor-element-populated {
  padding: var(--column-padding-large);
}

.padding-xl .elementor-widget-wrap.elementor-element-populated {
  padding: var(--column-padding-xl);
}

/****************************************

4. COLUMN CARDS

Helper classes applied to Elementor columns to make them appear as cards.

*****************************************/
.elementor-container > .elementor-column.card > .elementor-element-populated {
  background: #fff;
  border: 1px solid #D2D1CC;
  border-radius: 10px;
}

.elementor-column-gap-default.elementor-container > .elementor-column.card > .elementor-element-populated {
  margin: 24px;
  padding: 48px;
}
@media (max-width: 1023px) {
  .elementor-column-gap-default.elementor-container > .elementor-column.card > .elementor-element-populated {
    margin: 16px;
    padding: 24px;
  }
}
@media (max-width: 767px) {
  .elementor-column-gap-default.elementor-container > .elementor-column.card > .elementor-element-populated {
    margin: 24px 0;
    padding: 32px;
  }
}

.elementor-column-gap-narrow.elementor-container > .elementor-column.card > .elementor-element-populated {
  margin: 8px;
  padding: 32px;
}
@media (max-width: 1023px) {
  .elementor-column-gap-narrow.elementor-container > .elementor-column.card > .elementor-element-populated {
    margin: 8px;
    padding: 24px;
  }
}
@media (max-width: 767px) {
  .elementor-column-gap-narrow.elementor-container > .elementor-column.card > .elementor-element-populated {
    margin: 8px 0;
    padding: 24px;
  }
}

.elementor-column-gap-default.elementor-container > .elementor-column.card > .elementor-element-populated .elementor-widget-image, .elementor-column-gap-narrow > .elementor-container > .elementor-column.card > .elementor-element-populated .elementor-widget-image {
  margin: -16px -16px 24px -16px;
  width: calc(100% + 32px);
}

/****************************************

5. CARD WRAP

Allow new columns set as cards to wrap to the next row instead of adding additional columns to the same row using Flexbox.
.section-card-wrap is applied to the container and column width (ex. .two-col) can be applied to each column.

*****************************************/
.section-card-wrap .elementor-container {
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
}

.one-col {
  -ms-flex: 0 0 100%;
  -webkit-box-flex: 0;
          flex: 0 0 100%;
}
@media (max-width: 1023px) {
  .one-col {
    -ms-flex: 0 0 100%;
    -webkit-box-flex: 0;
            flex: 0 0 100%;
  }
}

/**** Two column cards – 50% width ****/
.two-col {
  -ms-flex: 0 1 50%;
  -webkit-box-flex: 0;
          flex: 0 1 50%;
}
@media (max-width: 1023px) {
  .two-col {
    -ms-flex: 0 1 50%;
    -webkit-box-flex: 0;
            flex: 0 1 50%;
  }
}
@media (max-width: 767px) {
  .two-col {
    -ms-flex: 0 0 100%;
    -webkit-box-flex: 0;
            flex: 0 0 100%;
  }
}

/**** Three column cards – 33.333% width ****/
.three-col {
  -ms-flex: 0 1 33.333%;
  -webkit-box-flex: 0;
          flex: 0 1 33.333%;
}
@media (max-width: 1023px) {
  .three-col {
    -ms-flex: 0 1 33.333%;
    -webkit-box-flex: 0;
            flex: 0 1 33.333%;
  }
}
@media (max-width: 767px) {
  .three-col {
    -ms-flex: 0 0 100%;
    -webkit-box-flex: 0;
            flex: 0 0 100%;
  }
}

/**** Three column cards – 25% width ****/
.four-col {
  -ms-flex: 0 1 25%;
  -webkit-box-flex: 0;
          flex: 0 1 25%;
}
@media (max-width: 1023px) {
  .four-col {
    -ms-flex: 0 1 25%;
    -webkit-box-flex: 0;
            flex: 0 1 25%;
  }
}
@media (max-width: 767px) {
  .four-col {
    -ms-flex: 0 0 100%;
    -webkit-box-flex: 0;
            flex: 0 0 100%;
  }
}

/********************* Elementor Widgets *********************/
/****************************************

ELEMENTOR WIDGETS

Global settings to override default Elementor widget styles.

Table of Contents

1. ICON LISTS
2. TOGGLES AND ACCORDIONS

*****************************************/
/****************************************

1. ICON LISTS

*****************************************/
.elementor-icon-list-items:not(.elementor-inline-items) .elementor-icon-list-item:not(:last-child) {
  padding-bottom: 0;
}

.elementor-icon-list-items:not(.elementor-inline-items) .elementor-icon-list-item:not(:first-child) {
  margin-top: 0;
}

li.elementor-icon-list-item {
  padding: 24px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  border-top: 0.5px solid var(--base-divider-color);
}
li.elementor-icon-list-item:first-child {
  border-top: none;
}
li.elementor-icon-list-item a {
  color: var(--base-link-color);
}
li.elementor-icon-list-item a:hover {
  color: var(--base-hover-color);
}
li.elementor-icon-list-item i {
  color: var(--base-accent-color);
}
li.elementor-icon-list-item .elementor-icon-list-icon {
  padding: 16px;
  height: 100%;
  display: inline-block;
  text-align: center;
  -ms-flex-item-align: center;
      align-self: center;
}
@media (max-width: 1023px) {
  li.elementor-icon-list-item .elementor-icon-list-icon {
    margin: -8px 0;
  }
}
@media (max-width: 767px) {
  li.elementor-icon-list-item .elementor-icon-list-icon {
    margin: 0px;
    padding: 16px;
  }
}
li.elementor-icon-list-item .elementor-icon-list-text {
  padding-left: 16px !important;
  padding-top: 16px;
  padding-bottom: 16px;
  border-left: 0.5px solid var(--base-divider-color);
  -webkit-transition: ease all .5s;
  transition: ease all .5s;
}
li.elementor-icon-list-item:hover {
  -webkit-transition: scale(1.1);
  transition: scale(1.1);
}

/****************************************

2. TOGGLES & ACCORDION ELEMENTS

*****************************************/
.elementor-toggle .elementor-tab-title {
  padding: 16px;
  border-bottom: 1px solid var(--base-divider-color);
}
.elementor-toggle .elementor-tab-title a {
  color: var(--base-text-color);
}
.elementor-toggle .elementor-active a, .elementor-toggle .elementor-toggle-icon-opened {
  color: var(--base-link-color);
}

.elementor-accordion .elementor-accordion-item {
  border-color: var(--base-divider-color);
}
.elementor-accordion .elementor-accordion-item .elementor-tab-title {
  padding: 16px;
}
.elementor-accordion .elementor-accordion-item .elementor-tab-title a {
  color: var(--base-text-color);
}
.elementor-accordion .elementor-accordion-item .elementor-tab-title .elementor-accordion-icon {
  color: var(--base-text-color);
}
.elementor-accordion .elementor-accordion-item .elementor-active a, .elementor-accordion .elementor-accordion-item .elementor-accordion-icon-opened {
  color: var(--base-link-color);
}

/********************* Theme Specific Custom Styling *********************/
/****************************************

CUSTOM CSS

Custom CSS for any additoinal global site attributes.

*****************************************/
@media (min-width: 767px) {
  .column-card.home .elementor-icon-box-description {
    padding: 0 60px;
  }
}
.intro p {
  font-size: 24px;
  line-height: 32px;
}

.white-link a {
  color: #fff;
  text-decoration: underline;
}
.white-link a:hover {
  color: #D8723C;
}

.page-header-bg:before {
  content: "";
  position: absolute;
  width: 200%;
  height: 200%;
  top: -50%;
  left: -50%;
  z-index: -1;
  background: url(https://hspprannualorgf94e1.zapwp.com/q:u/r:0/wp:0/w:1/u:https://hspprar2020.wpengine.com/wp-content/uploads/2021/03/Group-1192.svg) 0 0 repeat;
  -webkit-transform: rotate(30deg);
          transform: rotate(30deg);
}

.page-menu ul li {
  border: 1px solid #fff;
  border-bottom-color: #DA723C;
  margin-right: 30px;
}
.page-menu ul li:last-child {
  margin-right: 0;
}
.page-menu ul li:hover {
  border-color: #DA723C;
}
.page-menu ul li:hover a {
  color: var(--e-global-color-5f4cee72) !important;
}

.title-svg:before {
  content: "";
  position: absolute;
  width: 62px;
  height: 52px;
  background-image: url(././images/title.svg);
  background-repeat: no-repeat;
  background-size: contain;
  left: -40px;
  top: -25px;
}

.align-left .elementor-counter .elementor-counter-number-wrapper {
  display: block;
}
.align-left .elementor-counter .elementor-counter-title {
  text-align: left;
}

.list-item ul li.elementor-icon-list-item {
  border: none;
}
.list-item ul li.elementor-icon-list-item span.elementor-icon-list-text {
  border: none;
  padding: 3px 0 !important;
}

.toggle-one .elementor-toggle-item .elementor-tab-title {
  padding: 0;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  height: 90px;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  position: relative;
}
.toggle-one .elementor-toggle-item .elementor-tab-title span.elementor-toggle-icon.elementor-toggle-icon-left {
  background-color: #C35828;
  text-align: center;
  -ms-flex-preferred-size: 97px;
      flex-basis: 97px;
  height: 90px;
  margin-right: 30px;
  position: relative;
}
.toggle-one .elementor-toggle-item .elementor-tab-title span.elementor-toggle-icon.elementor-toggle-icon-left span.elementor-toggle-icon-closed,
.toggle-one .elementor-toggle-item .elementor-tab-title span.elementor-toggle-icon.elementor-toggle-icon-left span.elementor-toggle-icon-opened {
  top: 50%;
  position: absolute;
  -webkit-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
  left: 50%;
}
.toggle-one .elementor-tab-content {
  border: 1px solid #d8723c !important;
}

.toggle-two .elementor-toggle-item .elementor-tab-title {
  padding: 0;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  height: 90px;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  position: relative;
}
.toggle-two .elementor-toggle-item .elementor-tab-title span.elementor-toggle-icon.elementor-toggle-icon-left {
  background-color: #337881;
  text-align: center;
  -ms-flex-preferred-size: 97px;
      flex-basis: 97px;
  height: 90px;
  margin-right: 30px;
  position: relative;
}
.toggle-two .elementor-toggle-item .elementor-tab-title span.elementor-toggle-icon.elementor-toggle-icon-left span.elementor-toggle-icon-closed,
.toggle-two .elementor-toggle-item .elementor-tab-title span.elementor-toggle-icon.elementor-toggle-icon-left span.elementor-toggle-icon-opened {
  top: 50%;
  position: absolute;
  -webkit-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
  left: 50%;
}

.icon-box {
  max-width: 312px;
}

@media (max-width: 767px) {
  .footer-social .elementor-social-icons-wrapper.elementor-grid {
    -webkit-box-pack: center !important;
        -ms-flex-pack: center !important;
            justify-content: center !important;
  }

  .page-menu ul li {
    border: none !important;
    margin: 0;
  }
}
.donor-list ul li {
  list-style: none;
}