/* BUTTONS ------------------------------------------------------ */
/*
NOTE: The /js/global.js file contains a script that applies the class of "dynamic" to all link elements and buttons. It wraps the text inside those elements with a <span class="text"></span> element, allowing for the ::before to appear behind it upon animation. <input type="button" /> elements cannot have children, so these elements cannot have dynamic application.
*/
.btn,
.btn-wrap a,
#page input[type="submit"],
.wp-block-button .wp-block-button__link,
.editor-styles-wrapper .wp-block-button .wp-block-button__link {
  display: inline-block;
  position: relative;
  margin: 0;
  padding: 1.2em 5em 1.2em 3.33em;
  border: none;
  border-radius: 0;
  outline: none;
  background-color: var(--brand-green);
  color: var(--text);
  font-size: 18px;
  font-weight: 700;
  line-height: 1em;
  text-align: center;
  text-decoration: none;
  text-transform: uppercase;
  cursor: pointer;
  -webkit-appearance: none;
  -moz-appearance: none;
  -webkit-clip-path: polygon(0 0, calc(100% - 2.9em) 0, 100% 100%, 0 100% );
  clip-path: polygon(0 0, calc(100% - 2.9em) 0, 100% 100%, 0 100% );
  -webkit-transition: all 200ms ease-in-out;
  -moz-transition: all 200ms ease-in-out;
  -o-transition: all 200ms ease-in-out;
  transition: all 200ms ease-in-out;
}
.btn.small,
.btn-wrap.small a,
#page input[type="submit"].small,
.wp-block-button.small .wp-block-button__link,
.editor-styles-wrapper .wp-block-button.small .wp-block-button__link {
  font-size: 12px;
}
.btn:hover,
.btn-wrap a:hover,
#page input[type="submit"]:hover,
.wp-block-button .wp-block-button__link:hover,
.editor-styles-wrapper .wp-block-button .wp-block-button__link:hover {
  background-color: var(--white) !important;
  text-decoration: none;
  -webkit-transition: all 200ms ease-in-out;
  -moz-transition: all 200ms ease-in-out;
  -o-transition: all 200ms ease-in-out;
  transition: all 200ms ease-in-out;
}
.btn.dynamic:hover,
.btn-wrap a.dynamic:hover,
input[type="submit"].dynamic:hover,
.wp-block-button .wp-block-button__link.dynamic:hover {
  padding-right: 8.33em;
  padding-left: 2.22em;
}
.btn.dynamic.no-grow:hover,
.btn-wrap.no-grow a.dynamic:hover,
input[type="submit"].dynamic.no-grow:hover,
.wp-block-button.no-grow .wp-block-button__link.dynamic:hover {
  padding-left: 1.5em;
  padding-right: 6.83em;
}
.btn .btn-text,
.btn-wrap a .btn-text,
.wp-block-button .wp-block-button__link .btn-text {
  position: relative;
  z-index: 2;
}
.btn.dynamic::before,
.btn-wrap a.dynamic::before,
.wp-block-button .wp-block-button__link.dynamic::before {
  content: '';
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
  background: transparent url('../img/btn-bgs/brand-green.png') right 4.44em center no-repeat;
  background-size: auto 0.722em;
  opacity: 0;
  -webkit-transition: all 200ms ease-in-out;
  -moz-transition: all 200ms ease-in-out;
  -o-transition: all 200ms ease-in-out;
  transition: all 200ms ease-in-out;
}
.btn.dynamic.no-grow::before,
.btn-wrap.no-grow a.dynamic::before,
.wp-block-button.no-grow .wp-block-button__link.dynamic::before {
  background-image: url('../img/btn-bgs/brand-green.small.png');
}
.btn.dynamic:hover::before,
.btn-wrap a.dynamic:hover::before,
.wp-block-button .wp-block-button__link.dynamic:hover::before { 
  opacity: 1; 
  background-position: right 3.88em center;
  -webkit-transition: all 300ms ease-in-out;
  -moz-transition: all 300ms ease-in-out;
  -o-transition: all 300ms ease-in-out;
  transition: all 300ms ease-in-out;
}

/* brand-green backgrounds */
.has-brand-green-background-color .btn,
.has-brand-green-background-color .btn-wrap a,
.has-brand-green-background-color #page input[type="submit"],
.has-brand-green-background-color .wp-block-button .wp-block-button__link {
  background-color: var(--white);
}

/* white button */
.btn.white,
.btn-wrap.white a,
input[type="submit"].white,
.wp-block-button .wp-block-button__link.has-white-background-color,
.editor-styles-wrapper .wp-block-button .wp-block-button__link.has-white-background-color {
  background-color: var(--white);
}
.btn.dynamic.white::before,
.btn-wrap.white a.dynamic::before,
.wp-block-button .wp-block-button__link.dynamic.has-white-background-color::before {
  background-image: url('../img/btn-bgs/text.png');
}
.btn.dynamic.no-grow.white::before,
.btn-wrap.no-grow.white a.dynamic::before,
.wp-block-button.no-grow .wp-block-button__link.dynamic.has-white-background-color::before {
  background-image: url('../img/btn-bgs/text.small.png');
}

/* brand blue button */
.btn.brand-blue,
.btn-wrap.brand-blue a,
input[type="submit"].brand-blue,
.wp-block-button .wp-block-button__link.has-brand-blue-background-color,
.editor-styles-wrapper .wp-block-button .wp-block-button__link.has-brand-blue-background-color {
  background-color: var(--brand-blue);
}
.btn.dynamic.brand-blue::before,
.btn-wrap.brand-blue a.dynamic::before,
.wp-block-button .wp-block-button__link.dynamic.has-brand-blue-background-color::before {
  background-image: url('../img/btn-bgs/brand-blue.png');
}
.btn.dynamic.no-grow.brand-blue::before,
.btn-wrap.no-grow.brand-blue a.dynamic::before,
.wp-block-button.no-grow .wp-block-button__link.dynamic.has-brand-blue-background-color::before {
  background-image: url('../img/btn-bgs/brand-blue.small.png');
}

/* brand orange button */
.btn.brand-orange,
.btn-wrap.brand-orange a,
input[type="submit"].brand-orange,
.wp-block-button .wp-block-button__link.has-brand-orange-background-color,
.editor-styles-wrapper .wp-block-button .wp-block-button__link.has-brand-orange-background-color {
  background-color: var(--brand-orange);
}
.btn.dynamic.brand-orange::before,
.btn-wrap.brand-orange a.dynamic::before,
.wp-block-button .wp-block-button__link.dynamic.has-brand-orange-background-color::before {
  background-image: url('../img/btn-bgs/brand-orange.png');
}
.btn.dynamic.no-grow.brand-orange::before,
.btn-wrap.no-grow.brand-orange a.dynamic::before,
.wp-block-button.no-grow .wp-block-button__link.dynamic.has-brand-orange-background-color::before {
  background-image: url('../img/btn-bgs/brand-orange.small.png');
}

/* grey button */
.btn.grey,
.btn-wrap.grey a,
input[type="submit"].grey,
.wp-block-button .wp-block-button__link.has-grey-background-color,
.editor-styles-wrapper .wp-block-button .wp-block-button__link.has-grey-background-color {
  background-color: var(--grey);
}
.btn.dynamic.grey::before,
.btn-wrap.grey a.dynamic::before,
.wp-block-button .wp-block-button__link.dynamic.has-grey-background-color::before {
  background-image: url('../img/btn-bgs/grey.png');
}
.btn.dynamic.no-grow.grey::before,
.btn-wrap.no-grow.grey a.dynamic::before,
.wp-block-button.no-grow .wp-block-button__link.dynamic.has-grey-background-color::before {
  background-image: url('../img/btn-bgs/grey.small.png');
}

/* dark grey button */
.btn.brand-grey,
.btn-wrap.brand-grey a,
input[type="submit"].brand-grey,
.wp-block-button .wp-block-button__link.has-brand-grey-background-color,
.editor-styles-wrapper .wp-block-button .wp-block-button__link.has-brand-grey-background-color {
  background-color: var(--brand-grey);
  color: var(--white);
}
.btn.brand-grey:hover,
.btn-wrap.brand-grey a:hover,
input[type="submit"].brand-grey:hover,
.wp-block-button .wp-block-button__link.has-brand-grey-background-color:hover,
.editor-styles-wrapper .wp-block-button .wp-block-button__link.has-brand-grey-background-color:hover {
  color: var(--brand-grey) !important;
}
.btn.dynamic.brand-grey::before,
.btn-wrap.brand-grey a.dynamic::before,
.wp-block-button .wp-block-button__link.dynamic.has-brand-grey-background-color::before {
  background-image: url('../img/btn-bgs/brand-grey.png');
}
.btn.dynamic.no-grow.brand-grey::before,
.btn-wrap.no-grow.brand-grey a.dynamic::before,
.wp-block-button.no-grow .wp-block-button__link.dynamic.has-brand-grey-background-color::before {
  background-image: url('../img/btn-bgs/brand-grey.small.png');
}

/* text button */
.btn.btn-text,
.btn-wrap.btn-text a,
input[type="submit"].btn-text,
.wp-block-button .wp-block-button__link.has-text-background-color,
.editor-styles-wrapper .wp-block-button .wp-block-button__link.has-text-background-color {
  background-color: var(--text);
  color: var(--white);
}
.btn.btn-text:hover,
.btn-wrap.btn-text a:hover,
input[type="submit"].btn-text:hover,
.wp-block-button .wp-block-button__link.has-text-background-color:hover,
.editor-styles-wrapper .wp-block-button .wp-block-button__link.has-text-background-color:hover {
  color: var(--text) !important;
}
.btn.dynamic.btn-text::before,
.btn-wrap.btn-text a.dynamic::before,
.wp-block-button .wp-block-button__link.dynamic.has-text-background-color::before {
  background-image: url('../img/btn-bgs/text.png');
}
.btn.dynamic.no-grow.btn-text::before,
.btn-wrap.no-grow.btn-text a.dynamic::before,
.wp-block-button.no-grow .wp-block-button__link.dynamic.has-text-background-color::before {
  background-image: url('../img/btn-bgs/text.small.png');
}

/* black button */
.btn.black,
.btn-wrap.black a,
input[type="submit"].black,
.wp-block-button .wp-block-button__link.has-black-background-color,
.editor-styles-wrapper .wp-block-button .wp-block-button__link.has-black-background-color {
  background-color: var(--black);
  color: var(--white);
}
.btn.black:hover,
.btn-wrap.black a:hover,
input[type="submit"].black:hover,
.wp-block-button .wp-block-button__link.has-black-background-color:hover,
.editor-styles-wrapper .wp-block-button .wp-block-button__link.has-black-background-color:hover {
  color: var(--black) !important;
}
.btn.dynamic.black::before,
.btn-wrap.black a.dynamic::before,
.wp-block-button .wp-block-button__link.dynamic.has-black-background-color::before {
  background-image: url('../img/btn-bgs/black.png');
}
.btn.dynamic.no-grow.black::before,
.btn-wrap.no-grow.black a.dynamic::before,
.wp-block-button.no-grow .wp-block-button__link.dynamic.has-black-background-color::before {
  background-image: url('../img/btn-bgs/black.small.png');
}

@media screen and (max-width: 1200px) {

  /* BUTTONS ------------------------------------------------------ */
  .btn,
  .btn-wrap a,
  input[type="submit"],
  .wp-block-button .wp-block-button__link,
  .editor-styles-wrapper .wp-block-button .wp-block-button__link {
    font-size: 16px;
  }

}

@media screen and (max-width: 600px) {

  /* BUTTONS ------------------------------------------------------ */
  .btn,
  .btn-wrap a,
  input[type="submit"],
  .wp-block-button .wp-block-button__link,
  .editor-styles-wrapper .wp-block-button .wp-block-button__link {
    font-size: 14px;
  }

}


/* CIRCLE + ARROW BUTTON ---------------------------------------- */
button.circle-arrow { 
  display: inline-block;
  overflow: hidden;
  position: relative;
  margin: 0;
  padding: 0;
  height: 3em;
  width: 3em;
  border: none;
  outline: none;
  background: transparent url('../img/static-icons/circle-arrow-btn-bg.png') center center no-repeat;
  background-size: 100% 100%;
  color: var(--black);
  font-size: 20px;
  line-height: 1em;
  text-align: left;
  text-decoration: none;
  text-indent: -9999em;
  cursor: pointer;
  -webkit-appearance: none;
  -moz-appearance: none;
}
button.circle-arrow::after {
  content: '';
  display: block;
  position: absolute;
  left: 0;
  top: 50%;
  z-index: 1;
  height: 1em;
  width: 1.65em;
  margin-top: -0.5em;
  background: transparent url('../img/static-icons/circle-arrow-btn-arrow.png') 0 0 no-repeat;
  background-size: 100% 100%;
  transition: left 200ms ease-in-out;
}
button.circle-arrow:hover::after {
  left: 0.675em;
  transition: left 300ms ease-in-out;
}


/* CIRCLE + ARROW BUTTON W/ TEXT -------------------------------- */
button.circle-arrow-text { 
  display: inline-block;
  overflow: hidden;
  position: relative;
  margin: 0;
  padding: 0 3em 0 0;
  height: 1.846155em;
  background: transparent;
  border: none;
  outline: none;
  color: var(--text);
  font-size: 13px;
  line-height: 1.846155em;
  text-align: left;
  text-decoration: none;
  text-transform: uppercase;
  cursor: pointer;
  -webkit-appearance: none;
  -moz-appearance: none;
}
button.circle-arrow-text::before {
  content: '';
  display: block;
  position: absolute;
  right: 0;
  top: 0;
  z-index: 1;
  height: 1.846155em;
  width: 1.846155em;
  background: transparent url('../img/static-icons/circle-arrow-btn-bg-white.png') center center no-repeat;
  background-size: 100% 100%;
}
button.circle-arrow-text::after {
  content: '';
  display: block;
  position: absolute;
  right: 0;
  top: 0;
  z-index: 1;
  height: 1.846155em;
  width: 1.846155em;
  background: transparent url('../img/static-icons/circle-arrow-btn-arrow-white.png') left center no-repeat;
  background-size: 0.92307em 0.53846em;
  transition: background-position 200ms ease-in-out;
}
button.circle-arrow-text:hover::after {
  background-position: left 0.4em center;
  transition: background-position 300ms ease-in-out;
}