/**
 * Returns the value of the `$key` value of a provided `$map`.
 */
/**
 * Uses `getProperty()` to return a value from the `$colors` map.
 */
/**
 * Uses `getProperty()` to return a value from the `$breakpoints` map.
 */
/*------------------------------------*\
  #TYPOGRAPHY
\*------------------------------------*/
/*------------------------------------*\
  #COLORS
\*------------------------------------*/
/*------------------------------------*\
  #ELEMENT-DEFAULTS
\*------------------------------------*/
/*------------------------------------*\
  #HEADER-DEFAULTS
\*------------------------------------*/
/*------------------------------------*\
  #HORIZONTAL-SPACING
\*------------------------------------*/
/*------------------------------------*\
  #BREAKPOINTS
\*------------------------------------*/
/*------------------------------------*\
  #TRANSITIONS
\*------------------------------------*/
/*------------------------------------*\
  #TYPOGRAPHY
\*------------------------------------*/
/*------------------------------------*\
  #BREAKPOINTS
\*------------------------------------*/
/*------------------------------------*\
  #COLORS
\*------------------------------------*/
/*------------------------------------*\
  #FOOTER-DEFAULTS
\*------------------------------------*/
/*------------------------------------*\
  #ELEMENT-DEFAULTS
\*------------------------------------*/
/*------------------------------------*\
  #GUTTERS
\*------------------------------------*/
/**
 * Responsive Mixin
 * This mixin is designed for a _cleaner_ first approach
 * This means that css isn't overridden but rather replaced for
 * different viewport widths; making it easier to inspect/debug css
 *
 * Usage:
 * @include media-query(exclude-medium)    { ... }
 * @include media-query(medium-up-to-site) 	   { ... }
 * ... etc
 */
/**
 * [Adds styles to allow an element's height scale proportionatelly]
 * @param  {[Number]} $width
 * @param  {[Number]} $height
 */
/**
 * [Calculates the percentage aspect ratio (what % height is compared to the width)]
 * @param  {[Number]} $width
 * @param  {[Number]} $height
 * @return {[Number(%)]}
 */
/**
 * *****REMEMBER TO USE MARGIN OR PADDING AND NOT TOP/BOTTOM******
 * [Calculates the center of an element in relation to a provided width and height.
 * Useful to place an absolute element at the center of another when
 * the positioned element cannot be the target's child ]
 * @param  {[Number]} $width
 * @param  {[Number]} $height
 * @return {[Number(%)]}
 */
/**
 * [In the  awful case you can't use Flexbox to vertically align something]
 * @param  {[type]} $transform:       false         [Use transforms to align instead of the absolute trick]
 * @param  {[type]} $pos:             absolute      [position type]
 * @param  {[type]} $posAdj:          0             [position adjustment. If $transform is true, this value only affects the 'top' property.]
 * @param  {[type]} $alignHorizontal: false         [Includes horizontal alignment]
 */
/**
 * Generate Enumerated Class
 * Iterates from 0 to the specified length and generates classes that set the specified property
 * @param  {[String]} $classname:       required      [Required: Specify the class name]
 * @param  {[String]} $property:        $classname    [Optional: Specify the enumerated property (if it's different from the name of the class)]
 * @param  {[Number]} $length:          10            [Optional: Specify the end of the loop]
 * @param  {[String]} $units:           null          [Optional: specify units to append to the enumerated property]
 */
/**
 * [Strip the pesky units from values]
 * @param  {[Number]} $value
 */
/**
 * [Fluid Type]
 */
#gladly-help-center {
  max-width: none;
  min-height: 37.5rem;
  padding-bottom: 2rem; }

.gladly-title {
  margin-top: 10rem;
  position: absolute;
  width: 100%;
  text-align: center;
  font-family: "freight-display-pro", Times, serif;
  font-weight: 400;
  font-size: 2.625rem;
  color: #FFF;
  z-index: 1; }
  @media (max-width: 47.9375rem) {
    .gladly-title {
      margin-top: 5rem;
      font-size: 1.75rem; } }

.gladlyHC-searchContainer {
  position: relative;
  background-image: url("../images/gladly-support-background.jpeg");
  background-position: center 55%;
  background-size: cover;
  height: 26.5rem;
  padding: 0 1.25rem;
  text-align: center;
  width: 100%; }
  .gladlyHC-searchContainer::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    right: 0;
    width: 100%;
    height: 100%;
    display: block;
    background: #000;
    opacity: 0.3;
    z-index: 0; }
  @media (max-width: 47.9375rem) {
    .gladlyHC-searchContainer {
      height: 16rem; } }

.gladly-container > div:not(.gladlyHC-faq),
.gladly-container > .gladlyHC-faq > div:not(.gladlyHC-searchContainer) {
  max-width: 80rem;
  margin: 0 auto;
  padding: 1rem;
  z-index: 2; }

.gladlyHC-searchInput {
  position: relative;
  top: 53.5%;
  max-width: 43.75rem;
  margin: 0 auto;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  color: #323952;
  height: 3.125rem;
  padding-left: 2.875rem;
  padding-right: 1.25rem;
  width: 100%;
  border: 1px solid #FFF;
  border-radius: 5px;
  background: #FFF url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg'  viewBox='0 0 24 24'%3E%3Cpath fill='%23323952' d='M23.8 22.9l-7.2-7.2c1.5-1.7 2.3-3.8 2.3-6.2 0-5.2-4.2-9.5-9.5-9.5C4.2 0 0 4.2 0 9.5 0 14.7 4.2 19 9.5 19c2.4 0 4.6-.9 6.2-2.3l7.2 7.2c.1.1.3.2.4.2.2 0 .3-.1.4-.2s.2-.3.2-.4c.1-.3 0-.5-.1-.6zM9.5 17.7C5 17.7 1.3 14 1.3 9.5 1.3 5 5 1.3 9.5 1.3c4.5 0 8.2 3.7 8.2 8.2 0 4.5-3.7 8.2-8.2 8.2z' /%3E%3C/svg%3E") no-repeat 1rem 45%;
  background-size: 1.25rem 1.25rem;
  -webkit-appearance: none;
  font-size: 1.25rem;
  letter-spacing: 0.02em; }
  @media (max-width: 47.9375rem) {
    .gladlyHC-searchInput {
      top: 50%;
      height: 2.5rem;
      font-size: 1rem; } }

.gladlyHC-searchMenuContainer {
  position: relative;
  margin: 0 auto;
  top: 50%;
  max-width: 43.75rem;
  z-index: 3; }

.gladlyHC-faqHeading {
  margin-bottom: 2.5rem;
  font-family: "freight-display-pro", Times, serif;
  font-weight: 400;
  font-size: 2rem;
  letter-spacing: 0.02em;
  text-align: center; }
  @media (max-width: 47.9375rem) {
    .gladlyHC-faqHeading {
      font-size: 1.75rem; } }

.gladlyHC-faqSection-header {
  margin-bottom: 0.625rem;
  font-size: 1rem;
  font-weight: 600;
  letter-spacing: 0.02em; }

.gladlyHC-faqSection {
  margin-bottom: 1.5rem; }

.gladlyHC-faqSection-list {
  list-style: disc;
  padding-left: 2rem; }

.gladlyHC-faqSection-listItem {
  margin-bottom: 0.625rem;
  font-size: 0.875rem;
  line-height: 1.25rem;
  letter-spacing: 0.02em; }

.gladlyHC-faqSection-list .gladlyHC-faqSection-listItem-more a,
.gladlyHC-answerDetail-backLink {
  text-decoration: underline; }

.gladlyHC-answersIndex-link a {
  padding: 0 1.5rem;
  display: inline-block;
  height: 2.875rem;
  font-size: 1rem;
  font-weight: 600;
  line-height: 2.75rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  border: 1px solid #323952; }


/*# sourceMappingURL=gladlySupport.css.map*/