/*


*/

/* -------------------------------------*/
/* FONTS */

/* Fonts: Montserrat */

@font-face {
  font-family: 'montserrat';
  src: url("/site-assets/fonts/montserrat/Montserrat-Regular.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
}

@font-face {
  font-family: 'montserrat';
  src: url("/site-assets/fonts/montserrat/Montserrat-Italic.woff2") format("woff2");
  font-weight: 400;
  font-style: italic;
}

@font-face {
  font-family: 'montserrat';
  src: url("/site-assets/fonts/montserrat/Montserrat-Medium.woff2") format("woff2");
  font-weight: 500;
  font-style: normal;
}

@font-face {
  font-family: 'montserrat';
  src: url("/site-assets/fonts/montserrat/Montserrat-SemiBold.woff2") format("woff2");
  font-weight: 600;
  font-style: normal;
}

@font-face {
  font-family: 'montserrat';
  src: url("/site-assets/fonts/montserrat/Montserrat-ExtraBold.woff2") format("woff2");
  font-weight: 800;
  font-style: normal;
}

@font-face {
  font-family: 'montserrat';
  src: url("/site-assets/fonts/montserrat/Montserrat-Black.woff2") format("woff2");
  font-weight: 900;
  font-style: normal;
}

@font-face {
  font-family: 'montserrat';
  src: url("/site-assets/fonts/montserrat/Montserrat-BlackItalic.woff2") format("woff2");
  font-weight: 900;
  font-style: italic;
}


/* -------------------------------------*/
/* VARIABLES */

:root {
  --black:              #000;
  --black-coal:         #0B352A;
  --black-carbon:       #1E1E1E;
  --black-crow:         #232323;
  --white:              #FFF;

  --yellow-pale:        #F8F4ED;
  --yellow-pale-alt:    #F4F2EF; 
  --orange-sandstone:   #F4995E;
  --orange-marigold:    #FF7F32;
  --yellow-marigold:    #F3C427;
  --green-leaf:         #009E54;
  --green-leaf-dark:    #02723D;
  --blue-azure:         #00A6CF;
  --blue-sky:           #B1DEED;
  --purple:             #6E58A1;
  --lavender:           #CEC0E0;
  --red:                #E9463F;
  --red-coral:          #F18B7E;
  --peach:              #F8BEB8;
  --pink-fuchsia:       #E6427B;

  
  --color-font:         var(--yellow-pale);
  --color-focus:        #ddd;

  --btn-border-radius: 38px;

  --font-size-base:     15px; /*30*/
  --font-size-sm:       13px; /*  ????? */
  --font-size-xs:       10px; /*20  REMOVE????? */
  --font-size-xxs:      16px; /* REMOVE????? */
  --font-size-xxxs:     12px; /**/
  --font-size-lg:       17px;
  --font-size-xl-sm:    20px; /*100*/
  --font-size-xl:       25px; /*50*/
  --font-size-xxl-sm:   40px; /*135*/
  --font-size-xxl:      44px; /*100*/
  --font-size-xxxl-sm:  36px; /*200*/
  --font-size-xxxl:     67px; /*135*/
  --font-size-xxxxl:     100px; /*200*/
  --font-size-xxxxl-sm:     50px; /*200*/

  --font-family-1: "montserrat", sans-serif;
  --line-height-base: 1.4;

  --h1:     50px;
  --h1-sm:  46px;
  --h2:     40px;
  --h2-sm:  36px; 
  --h3:     36px;
  --h3-sm:  30px;
  --h4:     30px;
  --h4-sm:  26px;
  --h5:     25px;
  --h5-sm:  20px;
  --h6:     20px;
  --h6-sm:  20px;

  --header-height: 82px;
  --header-height-lg: 100px;

  --media-lg: 1500px;
  --media-mid: 1200px;
  --media-sm:  960px;
  --media-xs:  660px;

  --grid-gutter: 10px;
  --grid-gutter-lg: calc(var(--grid-gutter) * 2);
  --grid-gutter-xl: calc(var(--grid-gutter) * 3);

  --spacing: 10px;
  --spacing-2: calc(var(--spacing) * 2);
  --spacing-3: calc(var(--spacing) * 3);
/*  --spacing-4: calc(var(--spacing) * 4);
  --spacing-5: calc(var(--spacing) * 5);
  --spacing-6: calc(var(--spacing) * 6);
  --spacing-7: calc(var(--spacing) * 7);
  --spacing-half: calc(var(--spacing) / 2);*/

  --z-index-menu: 1000;

  --transition-linear: all 0.2s linear;
}


/* -------------------------------------*/
/* RESET.CSS */

/* http://meyerweb.com/eric/tools/css/reset/ 
   v2.0 | 20110126
   License: none (public domain)
*/

html, body, div, span, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, q, s, samp,
small, strike, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li, hr, 
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details,
figure, figcaption, footer, header, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
  margin: 0;
  padding: 0;
  border: 0;
  font-size: 100%;
  font: inherit;
  vertical-align: baseline;
}


/* -------------------------------------*/
/* BASE */

*, *:before, *:after {
  box-sizing: border-box;
}

html, body {
  width: 100%;
  height: 100%;
}

html {
  scroll-behavior: smooth;
}

body {
  color: var(--color-font);
  font-family: var(--font-family-1);
  font-size: var(--font-size-base);
  font-weight: 400;
  line-height: var(--line-height-base);
  /*overflow-x: hidden;*/
}

body, .header {
  background-image: url("/site-assets/images/bg.png");
  background-repeat: repeat;
  background-size: 25%;
  background-color: var(--yellow-pale);
}


/* -------------------------------------*/
/* COLORS */

.white {
  color: var(--white);
}

.white-bg {
  color: var(--white-bg);
}

.black {
  color: var(--black);
}

.black-bg {
  background-color: var(--black);
}

.black-carbon {
  color: var(--black-carbon);
}

.black-coal-bg {
  background-color: var(--black-coal);
}

.green-leaf {
  color: var(--green-leaf);
}

.green-leaf-bg {
  background-color: var(--green-leaf);
}

.orange-marigold {
  color: var(--orange-marigold);
}

.orange-marigold-bg {
  background-color: var(--orange-marigold);
}

.yellow-marigold {
  color: var(--yellow-marigold);
}

.purple-bg {
  background-color: var(--purple);
}

.blue-azure-bg {
  background-color: var(--blue-azure);
}

.red-bg {
  background-color: var(--red);
}

.pink-fuchsia-bg {
  background-color: var(--pink-fuchsia);
}

.pink-fuchsia-border {
  border-color: var(--pink-fuchsia);
}

.blue-azure-border {
  border-color: var(--blue-azure);
}

.orange-marigold-border {
  border-color: var(--orange-marigold);
}


/* ------------------------------------- */
/* TYPE */

/* Type: Styles */

.font-regular {
  font-weight: 400;
}

.font-medium {
  font-weight: 500;
}

.font-semi-bold {
  font-weight: 600;
}

strong, b, .font-bold {
  font-weight: 800;
}

.font-extra-bold {
  font-weight: 800;
}

.font-black {
  font-weight: 900;
}

em, i, .font-italic {
  font-style: italic;
}

.text-uppercase {
  text-transform: uppercase;
}

/* Type: Font Families */

.font-family-1 {
  font-family: var(--font-family-1);
}


/* Type: Headings */

h1, .h1, h2, .h2, h3, .h3, h4, .h4, h5, .h5, h6, .h6 {
}

h1, .h1 {
  font-size: var(--h1-sm);
  line-height: 1.1;
}

h2, .h2 {
  font-size: var(--h2-sm);
  line-height: 1.2;
}

h3, .h3 {
  font-size: var(--h3-sm);
  line-height: 1.3;
}

h4, .h4 {
  font-size: var(--h4);
  line-height: 1.3;
}

h5, .h5 {
  font-size: var(--h5);
  line-height: 1.3;
}

h6, .h6 {
  font-size: var(--h6);
}

@media(min-width: 960px) {
  h1, .h1 {
    font-size: var(--h1);
  }

  h2, .h2 {
    font-size: var(--h2);
  }

  h3, .h3 {
    font-size: var(--h3);
  }

  h4, .h4 {
    font-size: var(--h4);
  }

  h5, .h5 {
    font-size: var(--h5);
  }

  h6, .h6 {
    font-size: var(--h6);
  }
}


/* Type: Font Sizes */

.font-size-xxxs {
  font-size: var(--font-size-xs);
}

.font-size-xxs {
  font-size: var(--font-size-xs);
}

.font-size-xs {
  font-size: var(--font-size-xs);
}

.font-size-sm {
  font-size: var(--font-size-sm);
}

.font-size-base {
  font-size: var(--font-size-base);
}

.font-size-lg {
  font-size: var(--font-size-lg);
}

.font-size-xl {
  font-size: var(--font-size-xl-sm);
}

.font-size-xxl {
  font-size: var(--font-size-xxl-sm);
}

.font-size-xxxl {
  font-size: var(--font-size-xxxl-sm);
}

.font-size-xxxxl {
  font-size: var(--font-size-xxxxl-sm);
}

@media(min-width: 960px) {
  .font-size-xl {
    font-size: var(--font-size-xl);
    line-height: 1.2;
  }

  .font-size-xxl {
    font-size: var(--font-size-xxl);
    line-height: 1.2;
  }

  .font-size-xxxl {
    font-size: var(--font-size-xxxl);
    line-height: 1.2;
  }

  .font-size-xxxxl {
    font-size: var(--font-size-xxxxl);
    line-height: 1.2;
  }
}

/* Type: Link Styles */
a {
  color: var(--color-font);
  text-decoration: none;
  transition: var(--transition-linear);
}

a:hover, a:focus, a:active {
  color: var(--white);
  transition: var(--transition-linear);
}

a:focus {
  outline: none;
}


/* Type: Default HTML Elements */

p, ul, ol, li {
  margin-bottom: calc(var(--spacing) * 1.5);
}

ul, ol {
  padding-left: var(--spacing);
}

sup {
  font-size: 66.66667%;
  position: relative;
  top: -10px; 
}

/* Type: Reset Lists: Ul, Ol */
.list-reset {
  margin-bottom: 0;
  padding-left: 0;
  list-style-type: none;
}

.list-reset li {
  margin-bottom: 0;
}

/* Type: Heading Tag */
/* Used for tiny section headings */

.heading-tag {
  font-size: var(--font-size-xs);
  font-weight: 900;
  letter-spacing: 1px;
  margin-bottom: var(--spacing);
}


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

/* Grid: Containers */

.container-full, .container, .container-mid, .container-sm, .container-xs {
  width: 100%;
  padding-left: var(--grid-gutter-lg);
  padding-right: var(--grid-gutter-lg);
  margin-left: auto;
  margin-right: auto;
}

.container {
  max-width: var(--media-lg);
}

.container-mid {
  max-width: var(--media-mid);
}

.container-sm {
  max-width: var(--media-sm);
}

.container-xs {
  max-width: var(--media-xs);
}

/* CSS Grid */

.grid {
  display: grid;
  grid-template-columns: 1fr;
}

.grid-auto {
  display: inline-grid;
  grid-auto-flow: column;
/*  grid-auto-columns: max-content;
  align-items: center;*/
}

.grid-gap-5 {
  gap: 5px;
}

.grid-gap-10 {
  gap: 10px;
}

.grid-gap-20 {
  gap: 20px;
}

.grid-gap-50 {
  gap: 50px;
}

.grid-2,
.grid-3,
.grid-4,
.grid-sm-2,
.grid-sm-3,
.grid-sm-4,
 {
  grid-template-columns: 1fr;
}

.grid-2 {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.grid-3 {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.grid-4 {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}


@media (min-width: 720px) {
  .grid-sm-2 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .grid-sm-3 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .grid-sm-4 {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .grid-2-sm-item-full-width {
    grid-column: span 2;
  }

}

@media (min-width: 960px) {
  .grid-mid-2 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .grid-mid-3 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .grid-mid-4 {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

.align-center {
  align-items: center;
}

.align-baseline {
  align-items: baseline;
}


/* Grid: Flexbox */

.flex {
  display: flex;
  flex-wrap: wrap;
}

.flex-align-end {
  align-items: end;
}

.flex-justify-center {
  justify-content: center;
}

.flex-justify-end {
  justify-content: flex-end;
}

.flex-1 {
  flex: 1;
}

.margin-auto {
  margin: auto;
}

.margin-top-auto {
  margin-top: auto;
}

.margin-left-auto {
  margin-left: auto;
}

.margin-right-auto {
  margin-right: auto;
}

@media (min-width: 660px) {
  .flex-xs {
    display: flex;
    flex-wrap: wrap;
  }
}

@media (min-width: 960px) {
  .flex-sm {
    display: flex;
    flex-wrap: wrap;
  }
}

@media (min-width: 1160px) {
  .flex-mid {
    display: flex;
    flex-wrap: wrap;
  }
}

@media (min-width: 1420px) {
  .flex-lg {
    display: flex;
    flex-wrap: wrap;
  }
}

/* -------------------------------------*/
/* GLOBALS: TABLES */

table {
  border-collapse: collapse;
}

th, td {
  border: 1px solid var(--grey-cement);
  padding: var(--spacing-half);
}

/* -------------------------------------*/
/* GLOBALS: POSITIONS */

.position-relative {
  position: relative;
}


/* -------------------------------------*/
/* GLOBALS: SPACING */

.spacing-t {
  padding-top: var(--spacing);
}

.spacing-b {
  padding-bottom: var(--spacing);
}

.spacing-v {
  padding-top: var(--spacing);
  padding-bottom: var(--spacing);
}

.spacing-2-t {
  padding-top: var(--spacing-2);
}

.spacing-2-b {
  padding-bottom: var(--spacing-2);
}

.spacing-2-v {
  padding-top: var(--spacing-2);
  padding-bottom: var(--spacing-2);
}

.spacing-3-t, .spacing-3-t-app, .spacing-3-t-app-reset {
  padding-top: var(--spacing-3);
}

.spacing-3-b, .spacing-3-b-app, .spacing-3-b-app-reset {
  padding-bottom: var(--spacing-3);
}

.spacing-3-v, .spacing-3-v-app {
  padding-top: var(--spacing-3);
  padding-bottom: var(--spacing-3);
}

/*.spacing-4-t-app {
  padding-top: var(--spacing-4);
}

.spacing-4-b, .spacing-4-b-app {
  padding-bottom: var(--spacing-4);
}

.spacing-4-v-app {
  padding-top: var(--spacing-4);
  padding-bottom: var(--spacing-4);
}

.spacing-5-t-app {
  padding-top: var(--spacing-5);
}

.spacing-5-b, .spacing-5-b-app {
  padding-bottom: var(--spacing-5);
}

.spacing-5-v-app {
  padding-top: var(--spacing-5);
  padding-bottom: var(--spacing-5);
}

.spacing-6-v-app {
  padding-top: var(--spacing-6);
  padding-bottom: var(--spacing-6);
}

.spacing-7-t-app, .spacing-7-t-app-reset {
  padding-top: var(--spacing-7);
}

.spacing-7-b-app {
  padding-bottom: var(--spacing-7);
}

.spacing-7-v-app {
  padding-top: var(--spacing-7);
  padding-bottom: var(--spacing-7);
}

.spacing-9-t-app {
  padding-top: calc(var(--spacing) * 9);
}

.spacing-9-b-app {
  padding-bottom: calc(var(--spacing) * 9);
}

.spacing-9-v-app {
  padding-top: calc(var(--spacing) * 9);
  padding-bottom: calc(var(--spacing) * 9);
}

.spacing-11-t-app {
  padding-top: calc(var(--spacing) * 11);
}

.spacing-11-b-app {
  padding-bottom: calc(var(--spacing) * 11);
}

.spacing-11-v-app {
  padding-top: calc(var(--spacing) * 11);
  padding-bottom: calc(var(--spacing) * 11);
}
*/

/*@media (max-width: 959px) {
  .spacing-3-t-app, .spacing-4-t-app, .spacing-5-t-app, .spacing-7-t-app, .spacing-9-t-app, .spacing-11-t-app {
    padding-top: var(--spacing-3);
  }

  .spacing-4-b-app, .spacing-5-b-app, .spacing-7-b-app, .spacing-9-b-app, .spacing-11-b-app {
    padding-bottom: var(--spacing-3);
  }

  .spacing-4-v-app, .spacing-5-v-app, .spacing-6-v-app, .spacing-7-v-app, .spacing-9-v-app, .spacing-11-v-app {
    padding-top: var(--spacing-3);
    padding-bottom: var(--spacing-3);
  }
}

@media (max-width: 659px) {
  .spacing-3-t-app, .spacing-4-t-app, .spacing-5-t-app, .spacing-7-t-app {
    padding-top: var(--spacing-2);
  }

  .spacing-3-t-app-reset {
    padding-top: 0;
  }

  .spacing-7-t-app-reset {
    padding-top: 0;
  }

  .spacing-9-t-app, .spacing-11-t-app {
    padding-top: var(--spacing-4);
  }

  .spacing-3-b-app-reset {
    padding-bottom: 0;
  }

  .spacing-3-b-app, .spacing-4-b-app, .spacing-5-b-app, .spacing-7-b-app {
    padding-bottom: var(--spacing-2);
  }

  .spacing-9-b-app, .spacing-11-b-app {
    padding-bottom: var(--spacing-4);
  }

  .spacing-3-v-app, .spacing-4-v-app, .spacing-5-v-app, .spacing-7-v-app {
    padding-top: var(--spacing-2);
    padding-bottom: var(--spacing-2);
  }

  .spacing-9-v-app, .spacing-11-v-app {
    padding-top: var(--spacing-4);
    padding-bottom: var(--spacing-4);
  }
}
*/ 

/* -------------------------------------*/
/* GLOBALS: BUTTONS */

.btn {
  font-family: var(--font-family-1);
  font-size: var(--font-size-sm);  
  font-weight: 900;
  line-height: 1.2;
  color: var(--white);
  border-radius: var(--btn-border-radius);
  border: 1px solid;
  text-align: center;
  padding: calc(var(--spacing) * 0.3) calc(var(--spacing) * 0.5) calc(var(--spacing) * 0.3)  var(--spacing-2);
  display: inline-flex;
  align-items: center;
  transition: all 0.2s linear;
  min-height: 42px;
  cursor: pointer;
}

@media(min-width: 660px) {
  .btn {
    /*padding-left: var(--spacing-3);
    padding-right: var(--spacing-3);*/
  }
}

.btn:hover, .btn:focus {
  color: var(--white);
  opacity: 0.7;
  transition: all 0.2s linear;
}

.btn--orange-marigold {
  background-color: var(--orange-marigold);
  border-color: var(--orange-marigold);  
}

.btn--orange-marigold:hover, .btn--orange-marigold:focus {

}

.btn-text {
  padding-right: var(--spacing-2);
}

.btn--disabled {
  opacity: 0.4;
  pointer-events: none;
}

.btn-clear {
  color: var(--color-font);
  background-color: transparent;
  border: none; 
}

.btn-clear:hover, .btn-clear:focus {
  color: var(--color-font); 
}

.btn-reset {
  color: var(--color-font);
  background-color: transparent;
  border-color: transparent;
  border-width: 0;
  padding: 0;
  text-align: left;
  color: inherit;
  text-transform: inherit;
  font-weight: 500;
  letter-spacing: inherit; 
}

.btn-icon {
  background-color: var(--yellow-pale-alt);
  border: 1px solid var(--yellow-pale-alt);
  border-radius: 50%;
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
}

/*@media (min-width: 660px) {
  .btn-icon {
    width: 48px;
    height: 48px;
  }
}
*/

/* -------------------------------------*/
/* FORMS */

/* Forms: Overrides for browser quirks */

input, select {
  box-shadow: none; /* removes red border on active input: Firefox */
  border-radius: 0; /* removes border-radius on iOS */
}

input[type="submit"].btn {
  -webkit-appearance: none;
}

select {
  border-radius: 0; /* fixes for desktop Safari */
/*  background-image: none !important;*/
}

/* Forms: Text Inputs, Selects, Textareas */

.form-text, textarea, select, button {
  font-family: var(--font-family-1);
}

.form-text, textarea, select, .form-text-group {
  color: var(--yellow-pale);
  background-color: rgba(0, 0, 0, 0.3);
  border: none;
  border-radius: 7px;
  font-family: var(--font-family-1);
  font-size: var(--font-size-base);  
  font-weight: 400;
  line-height: 1.2;
  width: 100%;
  display: block;
  padding: var(--spacing);
  transition: var(--transition-linear);
}

.form-text--select {
  -moz-appearance: none;
  -webkit-appearance: none;
  appearance: none;
  background-image: url(/site-assets/images/icons/chevron-down.svg);
  background-repeat: no-repeat;
  background-position: right 10px center;
  background-size: 14px; 
}

/*.form-text-group {
  display: flex;
  align-items: center;
  padding: 0 var(--spacing) 0 0;
}

.form-text-group:focus-within .form-text {
  border: none;
}
*/
.form-text:focus, textarea:focus, select:focus, /*.form-text-group:focus-within*/ {
  outline: 0;
  transition: all 0.5s ease-in;
  border-color: var(--green-slate);
}

textarea {
  vertical-align: top;
  min-height: 100px;
  resize: vertical;
}

::placeholder {
  color: var(--grey-cement);
}

.form-info-text {
  font-weight: 900;
  font-size: var(--font-size-sm);
  opacity: 0.27;
}

.form-text--error {
  border-color: var(--orange-marigold); 
}

.form-help-text {
  color: var(--grey-cement);
  font-size: var(--font-size-sm);
  padding: var(--spacing-half) var(--spacing) 0;
}

.form-help-text--error {
  color: var(--orange-marigold);
}

/* Forms: Labels */

.form-label {
  font-size: var(--font-size-sm);
  font-weight: 900;
  display: block;
  margin: 0 0 var(--spacing) 0;
}

/* Forms: Padding between sections */

.form-field-block {
  margin-bottom: var(--spacing-2);
}

/* Form: Notifications */

.notify {
  color: var(--white);
  background-color: var(--brand-blue-ink);
  border: 2px solid;
  padding: var(--spacing);
  margin: 0 0  var(--spacing) 0;
  position: relative;
}

.notify--error {
  color: var(--brand-red);
}

.notify-close {
  position: absolute;
  right: 0;
  top: 0;
  padding: var(--spacing);
  cursor: pointer;
}

/* ------------------------------------- */
/* GLOBALS: DISPLAY */

.d-block {
  display: block;
}


/* ------------------------------------- */
/* GLOBALS: ALIGNMENT */

.text-right {
  text-align: right;
}

.text-left {
  text-align: left;
}

.text-center {
  text-align: center;
}

@media(max-width: 659px) {
  .text-center-media-sm-max {
    text-align: center;
  }
}

/*.vertical-center {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
}

.absolute-center {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translateX(-50%) translateY(-50%);
}*/


/* GLOBALS: RESPONSIVE IMAGES, VIDEOS, SVGS */

img, video, svg, iframe {
  max-width: 100%;
  height: auto;
}

svg {
  max-height: 100%;
}

/* GLOBALS: FULL WIDTH CONTAINERS */

.full-width {
  width: 100%;
  display: block;
}

/* GLOBALS: SCREEN READER CLASSES */

.show-on-screen-reader, .show-on-focus {
  height: 1px;
  width: 1px;
  overflow: hidden;
  position: absolute;
  clip: rect(1px, 1px, 1px, 1px);
  clip-path: polygon(0px 0px, 0px 0px,0px 0px, 0px 0px);
}

/* --------------------------------------------- */
/* COMPONENTS: ACCORDION / COLLAPSIBLE */
/* Uses JavaScript */

.accordion-item-title {
  padding: var(--spacing-2);
  border-style: solid;
  border-width: 1px;
  color: var(--color-font);
  text-transform: uppercase;
  border-radius: 30px;
  font-weight: 900;
  text-align: left;
  position: relative;
  width: 100%;
  cursor: pointer;
  display: grid;
  grid-template-columns: 1fr auto;
  grid-gap: var(--grid-gutter-lg);
  align-items: end;
  line-height: 1;
}

.accordion-item-title--active {
  border-radius: 30px 30px 0 0;
}

.accordion-item-content {
  display: grid;
  grid-template-rows: 0fr;
  overflow: hidden;
  padding: 0;
  border: none;
  border-radius: 0 0 30px 30px;
  transition: grid-template-rows 0.45s ease;
}

.accordion-item-content--active {
  grid-template-rows: 1fr;
  border-top-color: transparent;
}

.accordion-item-content-inner {
  min-height: 0;
  overflow: hidden;
  padding: 0 var(--spacing-2) var(--spacing-2);
  opacity: 0;
  transition: opacity 0.35s ease;
}

.accordion-item-content--active .accordion-item-content-inner {
  opacity: 1;
  transition-delay: 0.08s;
}

.accordion-item-content[hidden] {
  display: none;
}

.accordion--instant .accordion-item-content,
.accordion--instant .accordion-item-content-inner {
  transition: none !important;
}

@media (prefers-reduced-motion: reduce) {
  .accordion-item-content,
  .accordion-item-content-inner {
    transition: none;
  }
}

@media(min-width: 660px) {
  .accordion-item-title {
    padding: calc(var(--spacing) * 5) calc(var(--spacing) * 6);
  }

  .accordion-item-content-inner {
    padding: 0 calc(var(--spacing) * 6) calc(var(--spacing) * 5);
  }
}

@media(max-width: 659px) {
  .accordion-item-title-icon {
    width: 40px;
  }
}


/* ------------------------------------- */
/* GLOBALS: ANIMATIONS: USING THESE */

.wow {
  visibility: hidden;
}

@keyframes fadeIn {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

.fadeIn {
  animation-name: fadeIn;
  animation-fill-mode: forwards;
}


@keyframes rotateInfinite {
  0% {
    rotate: 0deg;
  }

  100% {
    rotate: 360deg;
  }
}

.rotateInfinite {
  animation-name: rotateInfinite;
}

@keyframes swing {
  20% {
    transform: rotate3d(0, 0, 1, 12deg);
  }

  40% {
    transform: rotate3d(0, 0, 1, -8deg);
  }

  60% {
    transform: rotate3d(0, 0, 1, 4deg);
  }

  80% {
    transform: rotate3d(0, 0, 1, -4deg);
  }

  to {
    transform: rotate3d(0, 0, 1, 0deg);
  }
}

.swing {
  transform-origin: top center;
  animation-name: swing;
}

.animation-direction-alternate {
  animation-direction: alternate;
}

@keyframes heartBeat {
  0% {
    transform: scale(1);
  }

  42% {
    transform: scale(0.96);
  }

  62% {
    transform: scale(1.01);
  }

  100% {
    transform: scale(1);
  }
}

.heartBeat {
  animation-name: heartBeat;
  animation-duration: 2.1s;
}


@keyframes heartBeatLg {
  0% {
    transform: scale(1);
  }

  42% {
    transform: scale(0.86);
  }

  62% {
    transform: scale(1.1);
  }

  100% {
    transform: scale(1);
  }
}

.heartBeatLg {
  animation-name: heartBeatLg;
  animation-duration: 2.1s;
}


/* ------------------------------------- */
/* GLOBALS: ANIMATIONS */

.animated {
  animation-duration: 7s;
  animation-fill-mode: alternate;
}

.animated-infinite {
  animation-iteration-count: infinite;
}

@keyframes bounce {
  from, 20%, 53%, 80%, to {
    animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
    transform: translate3d(0, 0, 0);
  }

  40%, 43% {
    animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
    transform: translate3d(0, -30px, 0);
  }

  70% {
    animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
    transform: translate3d(0, -15px, 0);
  }

  90% {
    transform: translate3d(0, -4px, 0);
  }
}

.bounce {
  animation-name: bounce;
  transform-origin: center bottom;
}

/*@keyframes zoomInLeft {
  from {
    opacity: 0;
    transform: scale3d(0.1, 0.1, 0.1) translate3d(-1000px, 0, 0);
    animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
  }

  60% {
    opacity: 1;
    transform: scale3d(0.475, 0.475, 0.475) translate3d(10px, 0, 0);
    animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
  }
}

.zoomInLeft {
  animation-name: zoomInLeft;
  animation-fill-mode: forwards;
}*/

@keyframes fadeInLeft {
  from {
    opacity: 0;
    transform: translate3d(-100%, 0, 0);
  }

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

.fadeInLeft {
  animation-name: fadeInLeft;
  animation-fill-mode: forwards;
}

@keyframes fadeInRight {
  from {
    opacity: 0;
    transform: translate3d(100%, 0, 0);
  }

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

.fadeInRight {
  animation-name: fadeInRight;
  animation-fill-mode: forwards;
}

@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translate3d(0, 10%, 0);
  }

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

.fadeInUp {
  animation-name: fadeInUp;
  animation-fill-mode: forwards;
}

@keyframes fadeInDown {
  from {
    opacity: 0;
    transform: translate3d(0, -100%, 0);
  }

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

.fadeInDown {
  animation-name: fadeInDown;
  animation-fill-mode: forwards;
}

/* ------------------------------------- */
/* HEADER */

.header {
  display: flex;
  align-items: center;
  padding: var(--spacing) 0;
  margin: 0 auto;
  z-index: var(--z-index-menu);
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  min-height: var(--header-height);
}


/* Header: Media Queries  */

@media (min-width: 660px) {
  .header {
    padding: var(--spacing-2);
    min-height: var(--header-height-lg);
  }
}

@media (min-width: 960px) {
  .header {
/*    padding: var(--spacing-2) var(--spacing-5);*/
  }
}

.header-col-nav {
  margin-left: auto;
}

.header-logo, .footer-logo {
  display: block;
  padding: var(--spacing) 0;
}

.header-logo-img .footer-logo-img {
  display: block;
}

.nav-link--active, .nav-link--active:hover, .nav-link--active:focus {
  color: var(--orange-marigold);
}

.nav-icon-sun {
  width: 32px;
  height: 32px;
}

@media(min-width: 660px) {
  .nav-icon-sun {
    width: 62px;
    height: 62px;
  }
}

.nav-icon-sun-ray {
  opacity: 0;
  transition: opacity 0.25s ease-in-out;
  transform-box: fill-box;
  transform-origin: center;
}

.btn-nav-toggle--active .nav-icon-sun-ray {
  opacity: 1;
  animation: nav-sun-ray-pulse 3.2s ease-in-out infinite;
}

@keyframes nav-sun-ray-pulse {
  0%, 100% {
    opacity: 0.35;
    transform: scale(0.92);
  }
  50% {
    opacity: 1;
    transform: scale(1.08);
  }
}

@media (prefers-reduced-motion: reduce) {
  .btn-nav-toggle--active .nav-icon-sun-ray {
    animation: none;
    opacity: 1;
  }
}

.btn-nav-toggle {
  cursor: pointer;
  z-index: calc(var(--z-index-menu) + 2);
  position: fixed;
  right: var(--spacing);
  top: 28px;
  display: inline-flex;
  align-items: center;
}

@media(min-width: 660px) {
  .btn-nav-toggle {
    right: var(--spacing-2);
    top: var(--spacing-2);
  }  
}

.btn-nav-text {
  color: var(--black-carbon);
  text-transform: uppercase;
  font-weight: 900;
  padding-right: var(--spacing);
}

.btn-nav-close {
  display: block;
  margin: calc(var(--spacing) * 1.3) auto var(--spacing-2) auto;
  text-align: center;
  cursor: pointer;
}



.nav {
  background-color: var(--yellow-pale);
  padding: var(--spacing-2);
  right: calc(var(--spacing) * 2.6);
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  opacity: 0;
  overflow-y: auto;
  overflow-x: hidden;
  transition: var(--transition-linear);
  pointer-events: none;
  padding-top: var(--header-height);
  padding-left: var(--spacing-3);
}

.nav--active {
  opacity: 1;
  transition: opacity 0.4s ease-in-out;
  z-index: calc(var(--z-index-menu) + 1);
  pointer-events: auto;
}

.nav-link {
  color: var(--black-carbon);
  text-transform: uppercase;
  font-weight: 900;
  padding: 0 0 var(--spacing) 0;
}


@media (max-width: 659px) {
  .header-logo-img, .footer-logo-img {
    width: 176px;
  }
}

@media (min-width: 660px) {
  .nav {
    padding-top: var(--header-height-lg);
    padding-left: 100px;
  }
}


/* MAIN */
.main {
/*  overflow-x: hidden;* /* was originally on body; replace if it causes issues  */
  margin-top: var(--header-height);
  padding-top: var(--spacing-2);
}

@media (min-width: 660px) {
  .main {
    margin-top: var(--header-height-lg);  
  }
}


/* ------------------------------------- */
/* FOOTER */


.footer {
  padding: calc(var(--spacing) * 4) 0;
  position: relative;
}


/* ------------------------------------- */
/* PAGE: HOME */

/* Home:  */
.container-banner {
  position: relative;
}

.container-banner-icon {
  position: absolute;
  display: block;
  line-height: 0;
  display: none;
}

.container-banner-icon > img {
  display: block;
  height: auto;
}

.container-banner-icon--diamond {
  top: 50px;
  left: -70px;
}

.container-banner-icon--diamond-lg {
  bottom: 20px;
  right: -100px;
}

.container-banner-icon--flower {
  top: 50%;
  left: -140px;
}

.container-banner-icon--asterisk {
  top: 30px;
  right: -140px;
}

.container-banner-scroll-icon {
  margin: var(--spacing) auto 0;
  display: block;
  opacity: 0;
  width: 150px;
}

@media(min-width: 960px) {
  .container-banner-icon {
    display: block;
  }

  .container-banner-scroll-icon {
    position: absolute;
    left: 0;
    right: 0;
  }
}

@media(min-width: 1200px) {
  .container-banner-scroll-icon {
    width: 170px;
  }
}


@media (max-width: 659px) {
}

@media (min-width: 660px) {
}

@media(min-width: 660px) {
}


/* ------------------------------------- */
/* PAGE: ABOUT */

/* Who We Are: About */

.about {
  margin-bottom: calc(var(--spacing) * 6);
}

.about-shape {
  line-height: 0;
}

.about-circles-semi-shape {
  display: block;
  width: 100%;
  opacity: 0;
}

.about-content {
  border-radius: 0 0 60px 60px;
  position: relative;
  top: -1px;
}

.about-content-box {
  border-radius: 20px;
  padding: calc(var(--spacing) * 2.5);
  /*display: flex;
  flex-direction: column;*/
  display: grid;
}

.about-content-box-heading {
  font-weight: 900;
  font-size: var(--font-size-lg);
  margin: calc(var(--spacing) * 1.5) 0;
}

.about-content-box-icon {
  width: 50px;
  height: 50px;
}

.about-content-box-icon img, .about-content-box-icon svg {
  display: block;
}

.about-content-box-icon svg path {
  fill: rgba(255, 255, 255, 0.3);
}

.about-content-box-text {
  color: rgba(255, 255, 255, 0.8);
  font-size: var(--font-size-sm);
  padding-bottom: var(--spacing-2);
}

.about-content-box-link {
  margin-top: auto;
}

.about-content-box-link-icon {
  background-color: rgba(255, 255, 255, 0.7);
  border-radius: 50%;
  width: 22px;
  height: 22px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-left: var(--spacing);
}

.about-content-box-link-text {
  font-size: var(--font-size-sm);
}

.about-footer-heading {
  font-weight: 900;
  line-height: 0.9;
  text-transform: uppercase;
  text-align: center;
}

@media (min-width: 660px) {
  .about-content {
    border-radius: 0 0 120px 120px;
  }
}

@media(min-width: 960px) {
  .about-grid {
    grid-gap: 200px;    
  }
}


/* ------------------------------------- */
/* PAGE: */

.content-box-number {
  color: var(--white);
  background-color: rgba(255, 255, 255, 0.3);
  border-radius: 10px;
  padding: var(--spacing-2);
}


/* ------------------------------------- */
/* PAGE: DIFFERENCE */

.info {
  position: relative;
  z-index: 2;
  padding-bottom: calc(var(--spacing) * 2);
}

.info .accordion {
  min-height: var(--accordion-max-height, auto);
}

.info .accordion-item {
  position: relative;
}

.difference {
  position: relative;
  z-index: 1;
  margin-top: calc(var(--spacing) * 3);
  margin-bottom: calc(var(--spacing) * 6);
  transform: translate3d(0, var(--difference-overlap-y, 0px), 0);
  will-change: transform;
}

.difference-block {
  border-radius: 38px;
  padding: var(--spacing-3);
}

@media (prefers-reduced-motion: reduce) {
  .difference {
    transform: none;
    will-change: auto;
    margin-top: clamp(-40px, -5vw, -24px);
  }
}

@media (min-width: 660px) and (prefers-reduced-motion: reduce) {
  .difference {
    margin-top: clamp(-56px, -6vw, -40px);
  }
}

@media (min-width: 660px) {
  .difference-block {
    border-radius: 88px;
    padding: calc(var(--spacing) * 6) calc(var(--spacing) * 12);
  }
}


/* ------------------------------------- */
/* PAGE:  */


/* ------------------------------------- */
/* PAGE: CONNECT */

.connect  {
  background-color: var(--green-leaf);
  border-radius: 0 0 97px 97px;
  padding: calc(var(--spacing) * 6) 0;
}

.connect-banner-marquee {
  overflow: hidden;
  width: 100%;
}

.connect-banner-marquee-track {
  display: flex;
  width: max-content;
  animation: connect-banner-marquee 20s linear infinite;
}

.connect-banner-heading {
  flex-shrink: 0;
  white-space: nowrap;
  display: inline-flex;
  align-items: center;
  gap: 0.5em;
  margin-bottom: var(--spacing-3);
  padding-right: 200px;
  font-weight: 900;
  text-transform: uppercase;
}

.connect-banner-heading img {
  display: inline-block;
  vertical-align: middle;
  flex-shrink: 0;
}

@keyframes connect-banner-marquee {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(-50%);
  }
}

@media (prefers-reduced-motion: reduce) {
  .connect-banner-marquee__track {
    animation: none;
  }
}

 
/* GLOBALS: SHOW HIDE */
/* Needs to be at the end of the page to override  */


.show {
  display: block;
}

.js-show {
  display: block !important;
}

.hide {
  display: none;
}

.js-hide {
  display: none !important;
}

/* Show / Hide based on Media Query  */

@media (max-width: 1159px) {
  .hide-media-mid-max {
    display: none;
  }
}

@media (max-width: 959px) {
  .hide-media-sm-max {
    display: none;
  }
}

@media (max-width: 659px) {
  .hide-media-xs-max {
    display: none;
  }
}

@media (min-width: 660px) {
  .hide-media-xs {
    display: none;
  }
}

@media (min-width: 960px) {
  .hide-media-sm {
    display: none;
  }
}

@media (min-width: 1160px) {
  .hide-media-mid {
    display: none;
  }
}

/* Type: Reset Margins */
.margin-reset {
  margin: 0;
}

.padding-reset {
  padding: 0;
}


/* ------------------------------------- */
/* PAGE: LOGIN */

.login-block {
  background-color: var(--yellow-dark);
  border-radius: var(--border-radius-50);
  padding: var(--spacing-3);
}