/*-- -------------------------- -->
<---     Mobile Navigation      -->
<--- -------------------------- -*/

:root {
  /* remove this whole :root and put in your global css file that's shared on all pages, then just remove this section from all other Stitches you add later, only need this once in your global stylesheet */
/*  --primary: #EAB676;*/

	--gold1: radial-gradient(ellipse farthest-corner at right bottom, #FEDB37 0%, #FDB931 8%, #9f7928 30%, #8A6E2F 40%, transparent 80%),
                radial-gradient(ellipse farthest-corner at left top, #FFFFFF 0%, #FFFFAC 8%, #D1B464 25%, #5d4a1f 62.5%, #5d4a1f 100%);
	--flippedGold1: radial-gradient(ellipse farthest-corner at left bottom, #FEDB37 0%, #FDB931 8%, #9f7928 30%, #8A6E2F 40%, transparent 80%),
            radial-gradient(ellipse farthest-corner at right top, #FFFFFF 0%, #FFFFAC 8%, #D1B464 25%, #5d4a1f 62.5%, #5d4a1f 100%);


	--gold2: radial-gradient(ellipse farthest-corner at right bottom, #FEDB37 0%, #f2ab1e 8%, #f7e896eb 30%, #ffffac 40%, transparent 80%),                radial-gradient(ellipse farthest-corner at left top, #FFFFFF 0%, #FFFFAC 8%, #88670a 25%, #bea774 62.5%, gold 100%);
	
	--hvflippedGold2: radial-gradient(ellipse farthest-corner at left top, #FEDB37 0%, #f2ab1e 8%, #f7e896eb 30%, #ffffac 40%, transparent 80%),
            radial-gradient(ellipse farthest-corner at right bottom, #FFFFFF 0%, #FFFFAC 8%, #88670a 25%, #bea774 62.5%, gold 100%);
	--hflippedGold2: radial-gradient(ellipse farthest-corner at left bottom, #FEDB37 0%, #f2ab1e 8%, #f7e896eb 30%, #ffffac 40%, transparent 80%),
            radial-gradient(ellipse farthest-corner at right top, #FFFFFF 0%, #FFFFAC 8%, #88670a 25%, #bea774 62.5%, gold 100%);


/*	--primary: #f4c148;*/
    --primary: #e3b630;
    --primaryLight: #001F3F;
    --secondary: #FFBA43;
    --secondaryLight: #FFBA43;
    --headerColor: #1a1a1a;
    --bodyTextColor: #4E4B66;
    --bodyTextColorWhite: #FAFBFC;
  /* 13px - 16px */
  --topperFontSize: clamp(0.8125rem, 1.6vw, 1rem);
  /* 31px - 49px */
  --headerFontSize: clamp(1.9375rem, 3.9vw, 3.0625rem);
  --bodyFontSize: 1rem;
  /* 60px - 100px top and bottom */
  --sectionPadding: clamp(3.75em, 7.82vw, 6.25em) 1rem;
	--navColor: white;
/*	#ffebde*/
}

body{
	margin: 0;
	font-family: 'Roboto', 'Arial', sans-serif;
}

.cs-picture {
	animation: fadeInAnimation ease 1s;
}

@media (prefers-reduced-motion: no-preference) {
	.fadeIn{
		scale: 0.8;
		opacity: 0;
		animation: fadeIn linear forwards;
		animation-timeline: view();
		animation-range: entry 15% cover 35%;
	}

	@keyframes fadeIn {
	  to {
		  scale: 1;
		  opacity: 1;
	  }
	}
}

@keyframes fadeInAnimation {
    0% {
        opacity: 0;
    }
    100% {
        opacity: 1;
    }
}

.cs-button-solid {
    font-size: 1rem;
    /* 46px - 56px */
    line-height: clamp(2.875em, 5.5vw, 3.5em);
    text-decoration: none;
    font-weight: 700;
    text-align: center;
    margin: 0;
    color: black;
    min-width: 9.375rem;
    padding: 0 1.5rem;
/*    background-color: var(--primary);*/
    border-radius: 0.25rem;
    display: inline-block;
    position: relative;
    z-index: 1;
    /* prevents padding from adding to the width */
    box-sizing: border-box;
	box-shadow: 0px 0px 5px gold;
  }
.cs-button-solid:before {
    content: '';
    position: absolute;
    height: 100%;
    width: 0%;
    background: #000;
    opacity: 1;
    top: 0;
    left: 0;
    z-index: -1;
    border-radius: 0.25rem;
    transition: width .3s;
  }
.cs-button-solid:hover:before {
    width: 100%;
  }
.cs-button-solid:hover{
		color: white;
	}

.cs-topper {
  font-size: var(--topperFontSize);
  line-height: 1.2em;
  text-transform: uppercase;
  text-align: inherit;
  letter-spacing: .1em;
  font-weight: 700;
  color: var(--primary);
  margin-bottom: 0.25rem;
  display: block;
}
.cs-title {
  font-size: var(--headerFontSize);
  font-weight: 900;
  line-height: 1.2em;
  text-align: inherit;
  max-width: 43.75rem;
  margin: 0 0 1rem 0;
  color: var(--headerColor);
  position: relative;
}
.cs-text {
  font-size: var(--bodyFontSize);
  line-height: 1.5em;
  text-align: inherit;
  width: 100%;
  max-width: 40.625rem;
  margin: 0;
  color: var(--bodyTextColor);
}

/* Mobile - 1023px */
@media only screen and (max-width: 63.9375rem) {
  body.cs-open {
    overflow: hidden;
  }
  #cs-navigation {
    /* remove the font family so the Stitch inherits the fonts from your global stylesheet */
    font-family: 'Roboto', 'Arial', sans-serif;
    width: 100%;
    padding: 0.75rem 1rem;
    /* prevents padding from affecting height and width */
    box-sizing: border-box;
    background-color: var(--navColor); 
    box-shadow: rgba(149, 157, 165, 0.2) 0px 8px 24px;
    position: fixed;
    z-index: 10000;
  }
  #cs-navigation:before {
    content: '';
    width: 100%;
    height: 0vh;
    background: rgba(0, 0, 0, 0.6);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    position: absolute;
    display: block;
    top: 100%;
    right: 0;
    z-index: -1100;
    opacity: 0;
    transition: height .5s, opacity .5s;
  }
  #cs-navigation.cs-active:before {
    height: 150vh;
    opacity: 1;
  }
  #cs-navigation.cs-active .cs-ul-wrapper {
    opacity: 1;
    transform: scaleY(1);
    transition-delay: .15s;
  }
  #cs-navigation.cs-active .cs-li {
    transform: translateY(0);
    opacity: 1;
  }
  #cs-navigation .cs-container {
    width: 100%;
    display: flex;
    justify-content: flex-end;
    align-items: center;
  }
  #cs-navigation .cs-logo {
    width: 25%;
    max-width: 9.125rem;
    height: 100%;
    margin: 0 auto 0 0;
    padding: 0;
    /* prevents padding from affecting height and width */
    box-sizing: border-box;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 10;
  }
  #cs-navigation .cs-logo img {
    width: 40%;
    height: 100%;
    /* ensures the image never overflows the container. It stays contained within it's width and height and expands to fill it then stops once it reaches an edge */
    object-fit: contain;
  }
  #cs-navigation .cs-toggle {
    /* 44px - 48px */
    width: clamp(2.75rem, 6vw, 3rem);
    height: clamp(2.75rem, 6vw, 3rem);
    margin: 0 0 0 auto;
    border-radius: 0.25rem;
    background-color: transparent;
    border: none;
    display: flex;
    justify-content: center;
    align-items: center;
  }
  #cs-navigation .cs-active .cs-line1 {
    top: 50%;
    transform: translate(-50%, -50%) rotate(225deg);
  }
  #cs-navigation .cs-active .cs-line2 {
    top: 50%;
    transform-origin: center;
    transform: translate(-50%, -50%) translateY(0) rotate(-225deg);
  }
  #cs-navigation .cs-active .cs-line3 {
    bottom: 100%;
    opacity: 0;
  }
  #cs-navigation .cs-box {
    /* 24px - 28px */
    width: clamp(1.5rem, 2vw, 1.75rem);
    /* 14px - 16px */
    height: clamp(0.875rem, 1.5vw, 1rem);
    position: relative;
  }
  #cs-navigation .cs-line {
    width: 100%;
    height: 2px;
    border-radius: 2px;
    background-color: #1a1a1a;
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
  }
  #cs-navigation .cs-line1 {
    top: 0;
    transform-origin: center;
    transition: transform .5s, top .3S, left .3S;
    animation-duration: .7s;
    animation-timing-function: ease;
    animation-fill-mode: forwards;
    animation-direction: normal;
  }
  #cs-navigation .cs-line2 {
    top: 50%;
    transform: translateX(-50%) translateY(-50%);
    transition: top .3s, left .3s, transform .5s;
    animation-duration: .7s;
    animation-timing-function: ease;
    animation-fill-mode: forwards;
    animation-direction: normal;
  }
  #cs-navigation .cs-line3 {
    bottom: 0;
    transition: bottom .3s, opacity .3s;
  }
  #cs-navigation .cs-ul-wrapper {
    width: 100%;
    height: auto;
    padding-bottom: 2.4em;
    opacity: 0;
    background-color: var(--navColor);
    box-shadow: inset rgba(0, 0, 0, 0.2) 0px 8px 24px;
    overflow: hidden;
    position: absolute;
    top: 100%;
    left: 0;
    z-index: -1;
    transform: scaleY(0);
    transform-origin: top;
    transition: transform .4s, opacity .3s;
  }
  #cs-navigation .cs-ul {
    margin: 0;
    padding: 3rem 0 0 0;
    width: 100%;
    height: auto;
    max-height: 65vh;
    overflow: auto;
    display: flex;
    justify-content: flex-start;
    flex-direction: column;
    align-items: center;
    gap: 1.25rem;
  }
  #cs-navigation .cs-li {
    width: 100%;
    text-align: center;
    list-style: none;
    margin-right: 0;
    /* transition from these values */
    transform: translateY(-4.375rem);
    opacity: 0;
    transition: transform .6s, opacity .9s;
  }
  #cs-navigation .cs-li:nth-of-type(1) {
    transition-delay: .05s;
  }
  #cs-navigation .cs-li:nth-of-type(2) {
    transition-delay: .1s;
  }
  #cs-navigation .cs-li:nth-of-type(3) {
    transition-delay: .15s;
  }
  #cs-navigation .cs-li:nth-of-type(4) {
    transition-delay: .2s;
  }
  #cs-navigation .cs-li:nth-of-type(5) {
    transition-delay: .25s;
  }
  #cs-navigation .cs-li:nth-of-type(6) {
    transition-delay: .3s;
  }
  #cs-navigation .cs-li:nth-of-type(7) {
    transition-delay: .35s;
  }
  #cs-navigation .cs-li:nth-of-type(8) {
    transition-delay: .4s;
  }
  #cs-navigation .cs-li:nth-of-type(9) {
    transition-delay: .45s;
  }
  #cs-navigation .cs-li:nth-of-type(10) {
    transition-delay: .5s;
  }
  #cs-navigation .cs-li:nth-of-type(11) {
    transition-delay: .55s;
  }
  #cs-navigation .cs-li:nth-of-type(12) {
    transition-delay: .6s;
  }
  #cs-navigation .cs-li:nth-of-type(13) {
    transition-delay: .65s;
  }
  #cs-navigation .cs-li-link {
    /* 16px - 24px */
    font-size: clamp(1rem, 2.5vw, 1.5rem);
    line-height: 1.2em;
    text-decoration: none;
    margin: 0;
    color: var(--headerColor);
    display: inline-block;
    position: relative;
  }
  #cs-navigation .cs-li-link:before {
    /* active state underline */
    content: '';
    width: 100%;
    height: 1px;
    background: currentColor;
    opacity: 1;
    position: absolute;
    display: none;
    bottom: -0.125rem;
    left: 0;
  }
  #cs-navigation .cs-li-link.cs-active:before {
    display: block;
  }
  #cs-navigation .cs-button-solid {
    display: none;
  }
}

/*-- -------------------------- -->
<---     Desktop Navigation     -->
<--- -------------------------- -*/

/* Small Desktop - 1024px */
@media only screen and (min-width: 64rem) {
  #cs-navigation {
    /* remove the font family so the Stitch inherits the fonts from your global stylesheet */
    font-family: 'Roboto', 'Arial', sans-serif;
    width: 100%;
    padding: 0 1rem;
    /* prevents padding from affecting height and width */
    box-sizing: border-box;
    background-color: var(--navColor);
    box-shadow: rgba(149, 157, 165, 0.2) 0px 8px 24px;
    position: fixed;
    z-index: 10000;
  }
  #cs-navigation .cs-container {
    width: 100%;
    max-width: 80rem;
    margin: auto;
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 1.5rem;
  }
  #cs-navigation .cs-toggle {
    display: none;
  }
  #cs-navigation .cs-logo {
    width: 18.4%;
    max-width: 21.875rem;
    height: 4.0625rem;
    /* margin-right auto pushes everything away from it to the right */
    margin: 0 auto 0 0;
    padding: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 100;
  }
  #cs-navigation .cs-logo img {
    width: 100%;
    height: 100%;
    /* ensures the image never overflows the container. It stays contained within it's width and height and expands to fill it then stops once it reaches an edge */
    object-fit: contain;
  }
  #cs-navigation .cs-ul {
    width: 100%;
    margin: 0;
    padding: 0;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    /* 20px - 36px */
    gap: clamp(1.25rem, 2.6vw, 2.25rem);
  }
  #cs-navigation .cs-li {
    list-style: none;
    padding: 2rem 0;
    /* prevent flexbox from squishing it */
    flex: none;
  }
  #cs-navigation .cs-li-link {
    /* 14px - 16px */
    font-size: clamp(0.875rem, 1vw, 1rem);
    line-height: 1.5em;
    text-decoration: none;
    margin: 0;
    color: var(--bodyTextColor);
    display: block;
    position: relative;
  }
  #cs-navigation .cs-li-link:hover:before {
    width: 100%;
  }
  #cs-navigation .cs-li-link.cs-active:before {
    width: 100%;
  }
  #cs-navigation .cs-li-link:before {
    /* active state underline */
    content: '';
    width: 0%;
    height: 2px;
    background: var(--primary);
    opacity: 1;
    position: absolute;
    display: block;
    bottom: 0rem;
    left: 0;
    transition: width .3s;
  }
  #cs-navigation .cs-button-solid {
    font-size: 1rem;
    /* 46px - 56px */
    line-height: clamp(2.875em, 5.5vw, 3.5em);
    text-decoration: none;
    font-weight: 700;
    text-align: center;
    margin: 0;
    color: black;
    min-width: 9.375rem;
    padding: 0 1.5rem;
/*    background-color: var(--primary);*/
	background: var(--hvflippedGold2);
    border-radius: 0.25rem;
    display: inline-block;
    position: relative;
    z-index: 1;
    /* prevents padding from adding to the width */
    box-sizing: border-box;
	box-shadow: 0px 0px 5px gold;
  }
  #cs-navigation .cs-button-solid:before {
    content: '';
    position: absolute;
    height: 100%;
    width: 0%;
    background: #000;
    opacity: 1;
    top: 0;
    left: 0;
    z-index: -1;
    border-radius: 0.25rem;
    transition: width .3s;
  }
  #cs-navigation .cs-button-solid:hover:before {
    width: 100%;
  }
	#cs-navigation .cs-button-solid:hover{
		color: white;
	}

}


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

/* Mobile - 360px */
@media only screen and (min-width: 0rem) {
  #cs-footer-272 {
    /* remove the font family so the Stitch inherits the fonts from your global stylesheet */
    font-family: 'Roboto', 'Arial', sans-serif;
    padding: var(--sectionPadding);
    /* Navigation Links */
    /* Contact Links */
  }
  #cs-footer-272 .cs-container {
    width: 100%;
    /* reset on tablet */
    max-width: 34.375rem;
    margin: auto;
    display: flex;
    justify-content: flex-start;
    align-items: flex-start;
    flex-wrap: wrap;
    column-gap: 5.5rem;
    row-gap: 2rem;
  }
  #cs-footer-272 .cs-logo-group {
    /* takes up all the space, lets the other ul's wrap below it */
    width: 100%;
    position: relative;
  }
  #cs-footer-272 .cs-logo {
    /* 210px - 240px */
    width: clamp(13.125rem, 8vw, 15rem);
    height: auto;
    display: block;
    /* 28px - 44px */
    margin-bottom: clamp(1.75rem, 4.17vw, 2.75rem);
  }
  #cs-footer-272 .cs-logo-img {
    width: 100%;
    height: auto;
  }
  #cs-footer-272 .cs-logo-img.dark {
    display: none;
  }
  #cs-footer-272 .cs-text {
    /* 14px - 16px */
    font-size: clamp(0.875rem, 2.5vw, 1rem);
    line-height: 1.5em;
    margin: 0;
    margin-bottom: 2rem;
    width: 78%;
    /* changes to 305px at desktop */
    max-width: 33.75rem;
    color: var(--bodyTextColor);
  }
  #cs-footer-272 .cs-social {
    display: inline-flex;
    flex-direction: column;
    justify-content: flex-start;
    gap: 0.75rem;
    position: absolute;
    top: 0;
    right: 0;
  }
  #cs-footer-272 .cs-social-link {
    width: 1.5rem;
    height: 1.5rem;
    background-color: #4E4B66;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    z-index: 1;
    transition: transform 0.3s, background-color 0.3s;
  }
  #cs-footer-272 .cs-social-link:hover {
    background-color: #1a1a1a;
    transform: translateY(-0.1875rem);
  }
  #cs-footer-272 .cs-social-img {
    height: 0.8125rem;
    width: auto;
    display: block;
  }
  #cs-footer-272 .cs-nav {
    padding: 0;
    margin: 0;
  }
  #cs-footer-272 .cs-nav-li {
    list-style: none;
    margin-bottom: 1rem;
  }
  #cs-footer-272 .cs-nav-li:last-of-type {
    margin-bottom: 0;
  }
  #cs-footer-272 .cs-header {
    font-size: 1rem;
    line-height: 1.5em;
    font-weight: 700;
    color: var(--bodyTextColor);
    position: relative;
  }
  #cs-footer-272 .cs-header:after {
    content: '';
    width: 2rem;
    height: 0.25rem;
    margin: 1rem auto 1.5rem 0;
    background: var(--primary);
    opacity: 1;
    position: relative;
    display: block;
  }
  #cs-footer-272 .cs-nav-link {
    font-size: 1rem;
    text-decoration: none;
    line-height: 1.5em;
    color: var(--bodyTextColor);
    position: relative;
  }
  #cs-footer-272 .cs-nav-link:before {
    /* underline */
    content: '';
    width: 0%;
    height: 0.125rem;
    background: var(--bodyTextColor);
    opacity: 1;
    position: absolute;
    display: block;
    bottom: -0.125rem;
    left: 0;
    transition: width .3s;
  }
  #cs-footer-272 .cs-nav-link:hover:before {
    width: 100%;
  }
  #cs-footer-272 .cs-contact {
    margin: 0;
    padding: 0;
    width: 35%;
  }
  #cs-footer-272 .cs-contact-li {
    list-style: none;
    margin-bottom: 0rem;
  }
  #cs-footer-272 .cs-contact-li:last-of-type {
    margin-bottom: 0;
  }
  #cs-footer-272 .cs-contact-link {
    font-size: 1rem;
    text-decoration: none;
    line-height: 1.5em;
    text-align: left;
    color: var(--bodyTextColor);
    display: inline-block;
  }
  #cs-footer-272 .cs-contact-link:hover {
    text-decoration: underline;
  }
  #cs-footer-272 .cs-address {
    font-size: 1rem;
    margin-bottom: 1.25rem;
  }
}
/* Tablet - 768px */
@media only screen and (min-width: 48rem) {
  #cs-footer-272 .cs-container {
    max-width: 80rem;
    row-gap: 0;
  }
  #cs-footer-272 .cs-contact {
    flex-direction: row;
    justify-content: space-between;
    border-top: none;
  }
  #cs-footer-272 .cs-contact-li {
    margin: 0;
  }
}
/* Small Desktop - 1024px */
@media only screen and (min-width: 64rem) {
  #cs-footer-272 .cs-container {
    /* pushes all flex children to the top */
    align-items: flex-start;
    justify-content: flex-end;
  }
  #cs-footer-272 .cs-logo-group {
    /* pushes everything to the right of it as far as possible in a flexbox */
    margin-right: auto;
    width: auto;
    max-width: 19.0625rem;
  }
  #cs-footer-272 .cs-text {
    width: 100%;
  }
  #cs-footer-272 .cs-social {
    flex-direction: row;
    position: relative;
    top: auto;
    right: auto;
  }
  #cs-footer-272 .cs-contact {
    width: auto;
  }
}

.cs-bottom {
    width: 100%;
    position: relative;
	padding-top: 4rem;
  }

.cs-copyright {
    font-size: 1rem;
    line-height: 1.5em;
    color: #746F95;
    display: block;
}