/*
Theme Name: Betheme Child
Theme URI: https://themes.muffingroup.com/betheme
Author: Muffin group
Author URI: https://muffingroup.com
Description: Child Theme for Betheme
Template: betheme
Version: 2.0.2
*/
:root {
	/* Font Pairings */
	--font-primary: "ff-tisa-web-pro";
	--font-secondary: "ff-tisa-sans-web-pro";
	/* Font Sizes */ /* @link https://utopia.fyi/type/calculator?c=300,16,1.15,1240,21,1.333,5,2,&s=0.75|0.5|0.25,1.5|2|3|4|6,s-l&g=s,l,xl,12 */
  --step--2: clamp(0.64rem, 0.8474rem + -0.2676vw, 0.7972rem);
  --step--1: clamp(0.8rem, 0.9225rem + -0.1581vw, 0.8929rem);
  --step-0: clamp(1rem, 1rem + 0vw, 1rem);
  --step-1: clamp(1.12rem, 1.0785rem + 0.2213vw, 1.25rem);
  --step-2: clamp(1.2544rem, 1.1561rem + 0.5244vw, 1.5625rem);
  --step-3: clamp(1.4049rem, 1.23rem + 0.9331vw, 1.9531rem);
  --step-4: clamp(1.5735rem, 1.2965rem + 1.4773vw, 2.4414rem);
  --step-5: clamp(1.7623rem, 1.3508rem + 2.1948vw, 3.0518rem);
	/* Colors */
	--off-black: #1F2223;
	--off-white: #F7F9FA;
	--raindrop: #7CA0B5;
	--deep-lake: #3082B1;
	--deep-lake-tint: #5BB1E3;
	--sunset: #AC648F;	
	--fishing-float-tint: #C75454;	
	--boat-dock: #9A866F;	
	--tree-top: #ACC696;	
	--texas-pine-tint: #44A58B;
	--sunrise-tint: #FF8862;
	--shoreline-tint: #FFC370;
}

	/* Font Color Classes*/
.off-black {color: var(--off-black);}
.off-white {color: var(--off-white);}
.deep-blue {color: var(--deep-lake);}
.light-blue {color: var(--deep-lake-tint);}
.medium-blue {color: var(--raindrop);}
.purple {color: var(--sunset);}
.red {color: var(--fishing-float-tint);}
.brown {color: var(--boat-dock);}
.light-green {color: var(--tree-top);}
.green {color: var(--texas-pine-tint);}
.orange {color: var(--sunrise-tint);}
.yellow {color: var(--shoreline-tint);}




	/* Custom Font Family Classes */
.font-family-primary, .font-family-primary .title {font-family: var(--font-primary), sans-serif;}
.font-family-secondary, .font-family-secondary .title {font-family: var(--font-secondary), sans-serif;}

	/* Custom Font Size Classes */
.font-size-step--2, .font-size-step--2 .title {font-size: var(--step--2) !important; line-height: 150%  !important;}
.font-size-step--1, .font-size-step--1 .title {font-size: var(--step--1) !important; line-height: 150%  !important;}
.font-size-step-0, .font-size-step-0 .title {font-size: var(--step-0) !important; line-height: 150%  !important;}
.font-size-step-1, .font-size-step-1 .title {font-size: var(--step-1) !important; line-height: 130%  !important;}
.font-size-step-2, .font-size-step-2 .title {font-size: var(--step-2) !important; line-height: 130% !important;}
.font-size-step-3, .font-size-step-3 .title {font-size: var(--step-3) !important; line-height: 120%  !important;}
.font-size-step-4, .font-size-step-4 .title {font-size: var(--step-4) !important; line-height: 110%  !important;}
.font-size-step-5, .font-size-step-5 .title {font-size: var(--step-5) !important; line-height: 110% !important;}

	/* Custom Font Weights */
.font-weight-thin, .font-weight-thin .title, .font-weight-thin span {font-weight: 300;}
.font-weight-medium, .font-weight-medium .title, .font-weight-medium span {font-weight: 400;} 
.font-weight-heavy, .font-weight-heavy .title, .font-weight-heavy span {font-weight: 700 !important;}

	/* Custom Letter Spacing */
.thin-letter-spacing, .thin-letter-spacing .title {letter-spacing: -2px;}
.medium-letter-spacing, .medium-letter-spacing .title {letter-spacing: 0;}
.heavy-letter-spacing, .heavy-letter-spacing .title {letter-spacing: 2px;}


	/* Default UTOPIA Styles, Sizes, and everything-in-between */
h1 {
	font-size: var(--step-5); line-height: 110%;
	font-family: var(--font-primary), sans-serif;
	color: var(--off-black);
	letter-spacing: 0px;
	font-weight: 600;
}
h2 {
	font-size: var(--step-4); line-height: 110%;
	font-family: var(--font-primary), sans-serif;
	color: var(--off-black);
	letter-spacing: 0px;
	font-weight: 600;
}
h3 {
	font-size: var(--step-3); line-height: 120%;
	font-family: var(--font-primary), sans-serif;
	color: var(--off-black);
	letter-spacing: 0px;
	font-weight: 600;
}
h4 {
	font-size: var(--step-2); line-height: 130%;
	font-family: var(--font-secondary), sans-serif;
	color: var(--off-black);
	letter-spacing: 0px;
	font-weight: 700;
}
h5 {
	font-size: var(--step-1); line-height: 130% ;
	font-family: var(--font-secondary), sans-serif;
	color: var(--off-black);
	letter-spacing: 0px;
	font-weight: 700;
}
h6 {
	font-size: var(--step-0); line-height: 150%;
	font-family: var(--font-secondary), sans-serif;
	color: var(--off-black);
	letter-spacing: 0px;
	font-weight: 700;
}

p.lead, p.big {
	font-size: var(--step-2) !important; line-height: 150%  !important;
	font-family: var(--font-secondary), sans-serif;
	letter-spacing: 0px;
	font-weight: 500;
	
}

body, p, span, ul li, div.desc {
	font-size: var(--step-1); line-height: 150%  !important;
	font-family: var(--font-secondary), sans-serif;
	letter-spacing: 0px;
	font-weight: 500;
}
.button_label {
	font-size: var(--step-0); line-height: 150%  !important;
	font-family: var(--font-secondary), sans-serif;
	letter-spacing: 1px;
	font-weight: 600;
	text-transform: uppercase !important;
}

/* END Root Stylings */