@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: #647082;
  --base-accent-color: #647082;
  --base-link-color: #647082;
  --base-hover-color: #647082;
  --base-divider-color: #647082; }

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

2. TYPOGRAPHY

Helper classes to help control text sizes and line width.

https://type-scale.com/?size=18&scale=1.200&text=A%20Visual%20Type%20Scale&font=Poppins&fontweight=400&bodyfont=body_font_default&bodyfontweight=400&lineheight=1.75&backgroundcolor=%23ffffff&fontcolor=%23000000&preview=false

*****************************************/
h1, h2, h3, h4, h5, h6 {
  margin-top:  0;
}

/**** SMALLER BODY FONT ****/
.text-small p, p.text-small {
  font-size: 0.888em; line-height: 1.5; }
  @media (max-width: 767px) {
    .text-small p, p.text-small {
      font-size: 1em; } }
/**** LARGER BODY FONT FOR INTRO TEXT ****/
.text-large p, p.text-large {
  font-size: 1.25em;
  line-height: 1.8; }
  @media (max-width: 767px) {
    .text-large p, p.text-large {
      font-size: 1em; } }
/**** NARROW TEXT – DECREASES LINE WIDTH FOR BETTER READABILITY ****/
.text-narrow {
  max-width: 800px; }

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

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

3. ANIMATION

Default animation properties

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

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

4. LINKS

This could include any type of special links or link overrides
Default links are styled in Elementor's Global Site Styles

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

5. BUTTONS

Used to override Elementor's button styles
Perfect for changing button styles using Elementor's built-in button types
Comment code out to remove changes

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

.elementor-kit-212 .elementor-button-info .elementor-button {
  background-color: var(--e-global-color-accent); 
  text-shadow: none;
}
.elementor-kit-212 .elementor-button-info .elementor-button:hover {

     }

.elementor-kit-212 .elementor-button-success .elementor-button {
  background-color: transparent;
  color: var(--e-global-color-accent);
  border: none;
  font-weight: bold;
  font-size: 1.2em;
  padding: 8px 0;
  text-transform: none;
  letter-spacing: 0;
  text-shadow: none;
  position: relative;
}
.elementor-kit-212 .elementor-button-success .elementor-button:hover {
    color: var(--base-button-color);
    background: transparent; }
    .elementor-kit-212 .elementor-button-success .elementor-button:hover:after {
      right: -28px; }
  .elementor-kit-212 .elementor-button-success .elementor-button:after {
    content: "\f061";
    font-family: "Font Awesome 5 Free";
    font-size: 0.7em;
    font-weight: 900;
    position: absolute;
    right: -24px;
    top: 50%;
    -webkit-transform: translatey(-50%);
    -ms-transform: translatey(-50%);
    transform: translatey(-50%); 
    transition: right .25s ease;
  }


.elementor-kit-212 .elementor-button-warning .elementor-button, a.uael-infobox-cta-link  {
  background-color: transparent;
  color: var(--secondary-link-color);
  border: none;
  font-size: 1em;
  font-weight: 700;
  padding: 8px 0;
  text-transform: none;
  letter-spacing: 0;
  text-shadow: none;
  position: relative; 
}
  .elementor-kit-212 .elementor-button-warning .elementor-button:hover, a.uael-infobox-cta-link:hover {
    color: var(--base-button-color);
    background: transparent; }
    .elementor-kit-212 .elementor-button-warning .elementor-button:hover:after, a.uael-infobox-cta-link:hover:after {
      right: -24px; }
   .elementor-kit-212 .elementor-button-warning .elementor-button:after, a.uael-infobox-cta-link:after {
    content: "\f061";
    font-family: "Font Awesome 5 Free";
    font-size: 0.9em;
    font-weight: 900;
    position: absolute;
    right: -20px;
    top: 52%;
    -webkit-transform: translatey(-50%);
    -ms-transform: translatey(-50%);
    transform: translatey(-50%); 
    transition: right .25s ease;
  }
  a.uael-infobox-cta-link:after {
    top: auto;
    bottom: -10px;
  }


.elementor-kit-212 .elementor-button-danger .elementor-button {
  background-color: var(--base-link-color); 
  text-shadow: none;
 }
.elementor-kit-212 .elementor-button-danger .elementor-button:hover {
  background-color: var(--base-hover-color);
  color:  rgba(255,255,255,0.9);
 }

 .elementor-kit-212 .elementor-button.elementor-size-xs {
  padding:  8px 16px;
  font-size: 0.7em;
 }
 .elementor-kit-212 .elementor-button.elementor-size-md {
  padding:  20px 32px;
 }
 .elementor-kit-212 .elementor-button.elementor-size-lg {
  padding:  24px 40px;
 }
.elementor-kit-212 .elementor-button.elementor-size-xl {
  padding:  32px 40px;
  font-size:  1.2em;
 }

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

6. DIVIDERS
Used to override bulit-in HR and Elementor divider styles

*****************************************/
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); }


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

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); }

/********************* 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, p.text-small {
  font-size: 0.888em;
  line-height: 1.8; }
  @media (max-width: 767px) {
    .text-small p, p.text-small {
      font-size: 1em; } }
/**** LARGER BODY FONT FOR INTRO TEXT ****/
.text-large p, p.text-large {
  font-size: 1.25em;
  line-height: 1.8; }
  @media (max-width: 767px) {
    .text-large p, p.text-large {
      font-size: 1em; } }
/**** NARROW TEXT – DECREASES LINE WIDTH FOR BETTER READABILITY ****/
.text-narrow {
  max-width: 800px; }

/**** NARROW TEXT CENTERED – CENTER THE NARROW 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: 1024px) {
  .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: 1024px) {
    :root {
      --column-padding-large:32px;
      --column-padding-xl: 32px; } }
  @media (max-width: 767px) {
    :root {
      --column-padding-large:24px 0;
      --column-padding-xl: 24px 0; } }
.elementor-column-gap-default.elementor-container > .padding-large.elementor-column > .elementor-element-populated {
  padding: var(--column-padding-large); }

.elementor-column-gap-default.elementor-container > .padding-xl.elementor-column > .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: 1024px) {
    .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: 1024px) {
    .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; } }
/****************************************

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 {
  flex-wrap: wrap; }

.one-col {
  -webkit-flex: 0 0 100%;
  -ms-flex: 0 0 100%;
  flex: 0 0 100%; }
  @media (max-width: 1024px) {
    .one-col {
      -webkit-flex: 0 0 100%;
      -ms-flex: 0 0 100%;
      flex: 0 0 100%; } }
/**** Two column cards – 50% width ****/
.two-col {
  -webkit-flex: 0 1 50%;
  -ms-flex: 0 1 50%;
  flex: 0 1 50%; }
  @media (max-width: 1024px) {
    .two-col {
      -webkit-flex: 0 1 50%;
      -ms-flex: 0 1 50%;
      flex: 0 1 50%; } }
  @media (max-width: 767px) {
    .two-col {
      -webkit-flex: 0 0 100%;
      -ms-flex: 0 0 100%;
      flex: 0 0 100%; } }
/**** Three column cards – 33.333% width ****/
.three-col {
  -webkit-flex: 0 1 33.333%;
  -ms-flex: 0 1 33.333%;
  flex: 0 1 33.333%; }
  @media (max-width: 1024px) {
    .three-col {
      -webkit-flex: 0 1 33.333%;
      -ms-flex: 0 1 33.333%;
      flex: 0 1 33.333%; } }
  @media (max-width: 767px) {
    .three-col {
      -webkit-flex: 0 0 100%;
      -ms-flex: 0 0 100%;
      flex: 0 0 100%; } }
/**** Three column cards – 25% width ****/
.four-col {
  -webkit-flex: 0 1 25%;
  -ms-flex: 0 1 25%;
  flex: 0 1 25%; }
  @media (max-width: 1024px) {
    .four-col {
      -webkit-flex: 0 1 25%;
      -ms-flex: 0 1 25%;
      flex: 0 1 25%; } }
  @media (max-width: 767px) {
    .four-col {
      -webkit-flex: 0 0 100%;
      -ms-flex: 0 0 100%;
      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

Used to override Elementor's icon list widget styles
Uncomment to effect all default icon lists
The styles below add horizontal dividers, extra padding, and a vertical divider after the icon

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

li.elementor-icon-list-item {
}
li.elementor-icon-list-item:first-child {
}
li.elementor-icon-list-item a {
}
li.elementor-icon-list-item a:hover {
}
li.elementor-icon-list-item i {

}
li.elementor-icon-list-item .elementor-icon-list-icon {
  margin-top: 8px;
}
.elementor-widget .elementor-icon-list-icon+.elementor-icon-list-text {

}
body .elementor-widget .elementor-icon-list-item, body .elementor-widget .elementor-icon-list-item a {
    -webkit-box-align: start;
    -ms-flex-align: start;
    align-items: start;
}
.ahs-long-link-list b {

}

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

2. TOGGLES & ACCORDION ELEMENTS

Used to override Elementor's toggle and accordion widgets
Add code to each element to make changes

*****************************************/
.elementor-toggle .elementor-tab-title {
  padding: inherit;
  border-bottom: inherit; }
  .elementor-toggle .elementor-tab-title a {
    color: inherit; }

.elementor-toggle .elementor-active a, .elementor-toggle .elementor-toggle-icon-opened {
  color: inherit; }

.elementor-accordion .elementor-accordion-item {
  border-color: var(--base-divider-color); }
  .elementor-accordion .elementor-accordion-item .elementor-tab-title {
    padding: inherit; }
    .elementor-accordion .elementor-accordion-item .elementor-tab-title a {
      color: inherit; }
    .elementor-accordion .elementor-accordion-item .elementor-tab-title .elementor-accordion-icon {
      color: inherit; }
  .elementor-accordion .elementor-accordion-item .elementor-active a, .elementor-accordion .elementor-accordion-item .elementor-accordion-icon-opened {
    color: inherit; }
  .elementor-toggle .elementor-tab-title {
    font-weight: 700;
    line-height: 1;
    margin: 0;
    padding: 15px;
    border-bottom: 1px solid #d4d4d4;
    cursor: pointer;
    outline: none;
}
.elementor-toggle .elementor-tab-title .elementor-toggle-icon.elementor-toggle-icon-left {
    margin-bottom: 12px;
}

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

CUSTOM CSS

Custom CSS for any additoinal global site attributes.

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

/************* UTILITY CLASSES *************/

.text-white {
  color: #fff!important;
}
.text-blue-gray {

}
.text-narrow {
  max-width: 620px;
}
.text-narrow-centered {
  max-width: 620px;
  margin: 0 auto;
}
.accent-orange:before {
  display: block;
  content: "";
  background: url('images/angled-accent-1.svg') no-repeat top left;
  width: 100%;
  height: 18px;
    background-size: 50px 18px;
  margin-bottom: 10px;
}
.accent-blue:before {
  display: block;
  content: "";
  background: url('images/angled-accent-2.svg') no-repeat top left;
  width: 100%;
  height: 18px;
    background-size: 50px 18px;
  margin-bottom: 10px;
}
.accent-right.accent-orange:before {
    background: url(images/angled-accent-right-1.svg) no-repeat top right;
    width: 100%;
    background-size: 50px 18px;
}
.accent-right.accent-blue:before {
    background: url(images/angled-accent-right-2.svg) no-repeat top right;
    width: 100%;
    background-size: 50px 18px;
}
.inline-block-container {
  display: inline-block;
}
.flex-container {
    display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
}
.flex-row-equal {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-line-pack: stretch;
      align-content: stretch;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
}
.x-container.flex-row-equal:before {
  content: normal;
}
.bkd-orange {
  background: #f1602c!important;
}
.bkd-gray {
  background: #60615f!important;
}
.bkd-blue-gray {
  background: #2d5865!important;
}
.bkd-taupe {
  background: #d2d0ba!important;
}
.gradient-taupe {
/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#f4f3ee+0,d2d0ba+100 */
background: #ffffff; /* Old browsers */
background: -moz-linear-gradient(top, #f4f3ee 0%, #d2d0ba 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(top, #f4f3ee 0%,#d2d0ba 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to bottom, #f4f3ee 0%,#d2d0ba 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f4f3ee', endColorstr='#d2d0ba',GradientType=0 ); /* IE6-9 */
}
.hero-quote {
  position: relative;
}
.hero-quote:before {
  content: "\201C";
  position: absolute;
  margin-left: -5%;

}
.hero-quote:after {
  content: "\002e\201D";
  position: absolute;
  right: -6%;
}
.hero-quote-attribute {
  font-size: 2.074rem;
  display: block;
  margin-top: .75rem;
}

/************* GRAVITY FORMS *************/

body .gform_wrapper span.ginput_product_price {
    color: #60615f;
}
select, textarea, input[type="text"], input[type="password"], input[type="datetime"], input[type="datetime-local"], input[type="date"], input[type="month"], input[type="time"], input[type="week"], input[type="number"], input[type="email"], input[type="url"], input[type="search"], input[type="tel"], input[type="color"], .uneditable-input {
    height: 2.65em;
    font-size: 13px;
    line-height: normal;
    color: #555;
    background-color: #fff;
}
textarea:focus, input[type="text"]:focus, input[type="password"]:focus, input[type="datetime"]:focus, input[type="datetime-local"]:focus, input[type="date"]:focus, input[type="month"]:focus, input[type="time"]:focus, input[type="week"]:focus, input[type="number"]:focus, input[type="email"]:focus, input[type="url"]:focus, input[type="search"]:focus, input[type="tel"]:focus, input[type="color"]:focus, .uneditable-input:focus {
    background: #fff;
}
.ginput_container_select select,  {
    font-weight: 600;
}
body .gform_wrapper .gform_body ul.gform_fields li.gfield select, body .gform_wrapper .gform_body ul.gform_fields li.gfield textarea, body .gform_wrapper .gform_body ul.gform_fields li.gfield input:not([type='radio']):not([type='checkbox']):not([type='submit']):not([type='button']):not([type='image']):not([type='file']) {
    font-weight: 600;
}
body .gform_wrapper span.ginput_total {
    color: #2d5865;
}
body .covid-shield-form {
  max-width: 600px;
  margin: 0 auto;
}
body .gform_wrapper {
    font-family: "proxima-nova",sans-serif;
  font-style: normal;
  font-weight: 600;
}
.shield-product-top, .shield-product-bottom, .shield-product-box {
    background-color: #f4f3ee;
}
body .gform_wrapper ul.gform_fields li.gfield.shield-product-box {
  border-radius: 10px;
    padding: 20px;
}
body .gform_wrapper ul.gform_fields li.gfield.shield-product-top {
  border-radius: 10px 10px 0 0;
    padding: 20px 20px 5px 20px;
    margin-bottom: 0;
}
body .gform_wrapper ul.gform_fields li.gfield.shield-product-bottom {
  border-radius: 0 0 10px 10px;
    padding: 10px 20px 20px 20px;
    margin-top: 0;
}
body .gform_wrapper .gform_body ul.gform_fields li.gfield.gfield.shield-product-top+li.gfield.gfield.shield-product-bottom {
    margin-top: 0;
}
body .gform_wrapper ul.gform_fields.top_label .gfield_label.shield-product-top, body .gform_wrapper ul.gform_fields:not(.top_label) .gfield_label.shield-product-top {
  margin: 0!important;
}
body .gform_wrapper ul.gform_fields li.gfield.shield-total-box {
  border-radius: 10px;
  background-color: #f4f3ee;
    padding: 20px;
}
body .gform_wrapper .description_above .gfield_description.gfield_consent_description {
    background: #fff;
    padding: 15px;
}
label.gfield_consent_label {
    display: inline-block;
    margin-left: 8px;
}
.ginput_container_consent input {
  height: 20px;
  line-height: 20px;
}
body .gform_wrapper .field_sublabel_below .ginput_complex.ginput_container label, body .gform_wrapper .field_sublabel_below div[class*="gfield_date_"].ginput_container label, body .gform_wrapper .field_sublabel_below div[class*="gfield_time_"].ginput_container label {
    margin: 4px 0 8px 0;
}
body .gform_wrapper .covid-shield-request-form .gform_body ul.gform_fields li.gfield+li.gfield {
    margin-top: 8px;
}
@media only screen and (min-width: 641px) {
  .gform_wrapper .covid-shield-request-form ul.gform_fields li.gfield {
      padding-right: 0;
  }
  .gform_wrapper .covid-shield-request-form .gform_footer input.button, .gform_wrapper .covid-shield-request-form .gform_footer input[type=image], .gform_wrapper .covid-shield-request-form .gform_footer input[type=submit] {
      display: block;
      width: 100%;
  }
}


 @media(max-width: 767px) {
  .elementor-kit-212 .elementor-button-warning .elementor-button:after, a.uael-infobox-cta-link:after {
      right: -16px;
  }
  a.uael-infobox-cta-link:after {
    bottom: -8px;
  }
  .elementor-kit-212 .elementor-button-warning .elementor-button:hover:after, a.uael-infobox-cta-link:hover:after {
       right: -20px; 
    } 
  .accent-orange:before, .accent-right.accent-orange:before {
    background: url(images/angled-accent-1.svg) no-repeat top left;
    width: 100%;
    height: 18px;
    background-size:32px 12px;   
    margin-bottom: 2px;
    left: 0;
  }
}