:root {
/* website colors */
  --lt-clr: #ffffff;
  --body-clr: #f7f7f7;
  --header-clr: #eca98f;
  --btn-clr: #31707f;
  --btn-hvr-clr: #228586;
  --hlt-clr-lt: #eda557;
  --hlt-clr-dk: #e06e5f;
  --althlt-clr-lt: #f0d1c5;
  --althlt-clr-dk: #eca98f;
  --icon-clr: #ecb068;
  --lmnt-clr-1: #f7d584;
  --menu-hlt-bg-clr: #f2f2f2;
  --txt-clr: #31707f;
  --txt-clr-2: #2b2b2b;
  --footer-clr: #170b00;
  --dk-clr: #000000;

  --std-btn-pad: 15px 30px 12px 30px;
}
/* <---------- Global Settings ----------> */
.com-sppagebuilder #sp-main-body {
  padding: 0;
  background: var(--body-clr);
}
body {
  color: var(--txt-clr);
}

/* This has been added to test the variable font scaling from Syntax */
body, h1, h2, h3, h4, h5, h6, p, a, li, .fluid, textarea, input, select, th, td,
.sppb-btn, .sppb-btn-custom, btn-success, btn-danger,
.sppb-addon-button-group .sppb-btn-custom {
	--fl: 0;
	--font-size-min: 18;
	--font-size-max: 24;
	--font-ratio-min: 1.125;
	--font-ratio-max: 1.125;
	--font-width-min: 320;
	--font-width-max: 1500;
	--fluid-min: calc(var(--font-size-min) * pow(var(--font-ratio-min), var(--fl, 0)));
	--fluid-max: calc(var(--font-size-max) * pow(var(--font-ratio-max), var(--fl, 0)));
	--fluid-preferred: calc((var(--fluid-max) - var(--fluid-min)) / (var(--font-width-max) - var(--font-width-min)));
	--fluid-type: clamp(
		(var(--fluid-min) / 16) * 1rem,
		((var(--fluid-min) / 16) * 1rem) -
			(((var(--fluid-preferred) * var(--font-width-min)) / 16) * 1rem) +
			(var(--fluid-preferred) * var(--variable-unit, 100vi)),
		(var(--fluid-max) / 16) * 1rem
	);
	font-size: var(--fluid-type);
}

body, h1, h2, h3, h4, h5, h6, p, a, ul, li, .fluid, textarea, input, select, th, td,
.sppb-btn, .sppb-btn-custom, btn-success, btn-danger,
.sppb-addon-button-group .sppb-btn-custom {
    margin-bottom: 0px!important;
}

/* This makes containers, with container queries use a cqi unit instead of vi */
.fluid-text-container {
	container-type: inline-size;
  --variable-unit: 100cqi;
}

.hero-section-header h1 {--fl: 8; font-weight: 600;}
h2, .h2 {--fl: 5;}
h3, .h3 {--fl: 3;}
h4, .h4 {--fl: 2;}
h5, .h5 {--fl: 1;}
h6, .h6 {--fl: 0;}
p, li, body, span {--fl: 0; line-height: 1.25;}
.fs-xs{--fl: -1;}
.fs-base{--fl: 0;}
.fs-s{--fl: 1;}
.fs-m{--fl: 2;}
.fs-l{--fl: 3;}
.fs-xl{--fl: 4;}
.fs-xxl{--fl: 5;}
.fs-xxxl{--fl: 6;}
/* This is the end of what has been added to test the variable font scaling from Syntax */

/* <---------- Font Weight Settings ---------->*/
/* <---------- Fonts Are Loaded From deanzafonts.css ---------->*/
.js100 > * {font-family: 'JS100';}
.js200 > * {font-family: 'JS200';}
.js300 > * {font-family: 'JS300';}
.js400 > * {font-family: 'JS400';}
.js500 > * {font-family: 'JS500';}
.js600 > * {font-family: 'JS600';}
.js800 > * {font-family: 'JS800';}
.rc100 > * {font-family: 'RC100';}
.rc200 > * {font-family: 'RC200';}
.rc300 > * {font-family: 'RC300';}
.rc400 > * {font-family: 'RC400';}
.rc500 > * {font-family: 'RC500';}
.rc600 > * {font-family: 'RC600';}
.rc700 > * {font-family: 'RC700';}
.rc800 > * {font-family: 'RC800';}
.rc900 > * {font-family: 'RC900';}

/* <---------- Font Color Settings ----------> */
.dk-txt {color: var(--dk-clr);}
.std-txt {color: var(--txt-clr);}


/* <---------- Top Row Settings ----------> */
.dsr-top-row {
  background: var(--header-clr);
  padding-block: 2dvh;

  .logo-image {
    width: 12dvw;
    height: auto;
    margin: 0 auto;
  }

  #sp-top2.col-lg-5 {
    align-content: center;
  }
}
#sp-header {
  background: var(--header-clr);
  height: 80px;
  width: 100%;
  position: relative;
  box-shadow: 0 4px 8px -4px rgb(from var(--dk-clr) r g b / .5);
  border-top: 2px solid var(--lt-clr);
  border-bottom: 2px solid var(--lt-clr);
  z-index: 99;
}

@media (width < 1200px) {
  .dsr-top-row .logo-image {
    width: 22.5dvw;
  }
}

@media (width < 768px) {
  .dsr-top-row .logo-image {
    width: 35dvw;
  }
}

/* <---------- Main Menu Settings ----------> */
#sp-menu {
  padding-inline: 10dvw;
  position: static;
  margin: 0 auto;
  text-align: center;
  height: 80px;

  .justify-content-end {
    justify-content: center!important;
  }
}
.sp-megamenu-parent > li.active > a,
.sp-megamenu-parent > li > a,
.sp-megamenu-parent > li > span,
.sp-megamenu-parent > li:hover > a {
  color: var(--lt-clr);
  text-transform: uppercase;
  letter-spacing: 3px;
  font-family: 'JS600';
  font-size: calc(var(--fluid-type) * .75);
  transition: color 350ms ease-in-out;
}
.sp-megamenu-parent > li.active:hover > a,
.sp-megamenu-parent > li.active:focus > a,
.sp-megamenu-parent > li.active:focus-within > a,
.sp-megamenu-parent > li > span:hover,
.sp-megamenu-parent > li > span:focus,
.sp-megamenu-parent > li > span:focus-within,
.sp-megamenu-parent > li:hover > a {
  color: rgb(from var(--lt-clr) r g b /.75);
}
/* <---------- Hamburger Menu Settings ----------> */
@media (width < 992px) {
  #sp-menu .justify-content-end {
    justify-content: end!important;
  }
  #sp-header,
  #sp-menu {
    height: 40px;
    border-top: none;
  }
  body.ltr #offcanvas-toggler.offcanvas-toggler-right {
    margin-top: -20px;
  }
  .header-sticky #offcanvas-toggler.offcanvas-toggler-right {
    margin-top: 0px!important;
  }
}
.burger-icon > span {
  background-color: var(--footer-clr);
}

/* <---------- Drop Down Menu Settings ----------> */
@media (width < 992px) {
  .offcanvas-menu .logo-image {
    width: 50%;
    height: auto;
    margin: 0px 0px 0px 30px;
  }
}

.sp-megamenu-parent .sp-dropdown .sp-dropdown-inner {
  background: var(--lt-clr);
  box-shadow: 0 3px 8px 4px rgb(from var(--dk-clr) r g b / .5));
  padding: 12px 6px;
  width: max-content!important;
}
.sp-megamenu-parent .sp-dropdown li.sp-menu-item {
  text-align: left;
}
.offcanvas-menu .offcanvas-inner ul.menu li.active > a,
.offcanvas-menu .offcanvas-inner ul.menu li.active > .nav-header,
.offcanvas-menu .offcanvas-inner ul.menu li.active > .mod-menu__heading,
.offcanvas-menu .offcanvas-inner ul.menu > li > ul li a,
.offcanvas-menu .offcanvas-inner ul.menu > li > a,
.offcanvas-menu .offcanvas-inner ul.menu > li > span,
.sp-megamenu-parent .sp-dropdown li.sp-menu-item > a,
.sp-megamenu-parent .sp-dropdown li.sp-menu-item span:not(.sp-menu-badge) {
  color: var(--txt-clr);
  font-family: 'JS600';
  font-size: calc(var(--fluid-type) * .75);
  letter-spacing: 3px;
  line-height: 1;
  display: inline-block;
  opacity: 1;
  padding: 8px 20px;
  cursor: pointer;
  width: 100%;
}
.offcanvas-menu .offcanvas-inner ul.menu > li a:hover,
.offcanvas-menu .offcanvas-inner ul.menu > li a:focus,
.offcanvas-menu .offcanvas-inner ul.menu > li span:hover,
.offcanvas-menu .offcanvas-inner ul.menu > li span:focus,
.sp-megamenu-parent .sp-dropdown li.sp-menu-item:hover,
.sp-megamenu-parent .sp-dropdown li.sp-menu-item:focus,
.sp-megamenu-parent .sp-dropdown li.sp-menu-item > a:hover,
.sp-megamenu-parent .sp-dropdown li.sp-menu-item:focus-within,
.sp-megamenu-parent .sp-dropdown li.sp-menu-item.active > a {
  background: var(--menu-hlt-bg-clr);
  color: var(--txt-clr)!important;
}
.offcanvas-menu .offcanvas-inner ul.menu > li.menu-parent > .nav-header > .menu-toggler {
  width: 100%;
  text-align: right;
  background: transparent;
}
/* <---------- Web Elements Settings ----------> */
.teal-button,
.transparent-orange1-button,
.dk-orange-button,
.dp-orange-button,
.transparent-black-button {
  font-family: 'JS600';
  font-size: calc(var(--fluid-type) * .6);
  text-transform: uppercase;
  letter-spacing: 2px;
  padding: var(--std-btn-pad);
  border-radius: 0px;
}

.teal-button {
  color: var(--lt-clr)!important;
  background: var(--btn-clr);

  a {
    color: var(--lt-clr)!important;
  }
}
.teal-button:hover,
.teal-button:focus,
.teal-button:focus-within {
  color: var(--lt-clr);
  background: var(--btn-hvr-clr);

  a {
    color: var(--lt-clr);
  }
}

.dk-orange-button {
  color: var(--lt-clr)!important;
  background: var(--hlt-clr-lt);
  box-shadow: 0px 10px 30px 0px var(--hlt-clr-lt)!important;

  a {
    color: var(--lt-clr)!important;
  }
}
.dk-orange-button:hover,
.dk-orange-button:focus,
.dk-orange-button:focus-within {
  color: var(--lt-clr);
  background: var(--hlt-clr-lt);
  box-shadow: none!important;
  scale: .97;

  a {
    color: var(--lt-clr);
  }
}

.dp-orange-button {
  color: var(--lt-clr)!important;
  background: var(--hlt-clr-dk);
  box-shadow: 0px 10px 30px 0px var(--hlt-clr-dk)!important;

  a {
    color: var(--lt-clr)!important;
  }
}
.dp-orange-button:hover,
.dp-orange-button:focus,
.dp-orange-button:focus-within {
  color: var(--lt-clr);
  background: var(--hlt-clr-dk);
  box-shadow: none!important;
  scale: .97;

  a {
    color: var(--lt-clr);
  }
}

.transparent-orange1-button {
  color: var(--lt-clr);
  background: transparent;
  border: 2px solid var(--lt-clr);

  a {
    color: var(--lt-clr);
  }
}
.transparent-orange1-button:hover,
.transparent-orange1-button:focus,
.transparent-orange1-button:focus-within {
  color: var(--header-clr);
  background: var(--lt-clr);

  a {
    color: var(--header-clr);
  }
}

.transparent-black-button {
  color: var(--txt-clr-2);
  background: transparent;
  border: 2px solid var(--txt-clr-2);

  a {
    color: var(--lt-clr);
  }
}
.transparent-black-button:hover,
.transparent-black-button:focus,
.transparent-black-button:focus-within {
  color: var(--lt-clr);
  background: var(--txt-clr-2);

  a {
    color: var(--lt-clr);
  }
}

.dsr-shadow-panel {
  box-shadow: 2px 20px 50px -10px rgb(from var(--txt-clr) r g b / .5) !important;
}

.dsr-information-block {
  h2, h3 {
    font-family: 'JS300';
    color: var(--txt-clr);
  }
  p, li {
    font-family: 'RC300';
    font-size: calc(var(--fluid-type) * .9);
    color: var(--txt-clr);
  }
}

.dsr-information-block-bold {
  h3 {
    font-family: 'JS600';
    color: var(--txt-clr);
    margin-bottom: 5px;
  }
  p {
    font-family: 'RC400';
    font-size: calc(var(--fluid-type) * .9);
    color: var(--txt-clr);
    margin-bottom: 5px;
  }
}

.dsr-amen-header h6 {
    font-family: 'JS800';
    color: var(--btn-clr);
    margin-bottom: 0px;
}

.dark-text p {
  color: var(--dk-clr);
}

.dsr-amen-divider {
  border-bottom: 1px solid var(--dk-clr);
  width: 70%;
  margin: 0 auto;
  text-align: center;
}

.dsr-col-border-left {
  border-left: 1px solid var(--btn-clr);
}

.dsr-col-border-right {
  border-right: 1px solid var(--btn-clr);
}

@media (width < 1200px) {
  .dsr-tablet {
    border: none;
  }
}

@media (width < 768px) {
  .dsr-phone {
    border: none;
  }
}

/* <---------- Accordion Settings ----------> */
.dsr-accordion {
  .sppb-panel-custom {
    background: var(--lt-clr);
    border: 1px solid rgb(from var(--txt-clr) r b g / .3);
    border-radius: 0px !important;
  }
  .sppb-panel-heading {
    background: var(--body-clr);
    /*border-bottom: 1px solid rgb(from var(--txt-clr) r b g / .3);*/
  }
  .sppb-panel-title {
    color: var(--btn-clr);
    font-family: 'JS200';
    font-size: var(--fluid-type);
    text-transform: uppercase;
  }
  .fas {
    font-weight: 200;
    color: var(--btn-clr);
  }
  .sppb-panel-body {
    border-top: 1px solid rgb(from var(--txt-clr) r b g / .3);
  }
  .sppb-addon-content p {
    font-family: 'RC400';
    font-size: calc(var(--fluid-type) * .8);
    color: var(--txt-clr);
    margin-bottom: .5em!important;
  }
}
/* <---------- Google Calendar Settings ----------> */
.googleCalendar {
  border: 0;
  width: 100%;
  min-height: 80dvh;
}

/* <---------- Footer Settings ----------> */

#sp-footer .container-inner {
  padding: 0px;
  border: none;
}
#sp-footer, #sp-bottom {
  background: var(--footer-clr);
}
@media (width > 991px) {
  .dsr-footer-logo img {
    width: 80%;
  }
}
.footer-icons {
  text-align: center;
  margin: 0px auto 20px auto;
  color: var(--icon-clr);
  font-size: var(--fluid-type);
}
.dsr-footer-info-block > * {
  color: var(--lt-clr);
  text-align:center;
  display: block;
}

#sp-footer .dsr-footer-info-block {
  p {
    color: var(--lt-clr);
    font-family: 'RC500';
    margin: 0px;
  }
  a {
    color: var(--lt-clr);
    font-family: 'RC500';
  } 
  a:hover,
  a:focus,
  a:focus-within {
    color: var(--icon-clr);
  }
  h4 {
    font-family: 'JS300';
    margin-bottom: 0px;
  }
  .footer-icons {
    font-size: calc(var(--fluid-type) * 1.3);
  }
}

#sp-footer .dsr-footer-copyright-block {
  p {
    color: var(--lt-clr);
    font-family: 'RC300';
    margin: 0px;
    font-size: calc(var(--fluid-type) * .75);
  }
  a {
    color: var(--lt-clr);
    font-family: 'RC300';
    font-size: calc(var(--fluid-type) * .75);
  } 
  a:hover,
  a:focus,
  a:focus-within {
    color: var(--icon-clr);
  }
}