/*
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 Stylings */
:root {
	/* Font Pairings */
	--font-primary: "Montserrat";
	--font-secondary: "Red Hat Display";
	/* 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 */
	--orange: #F15325;
	--dark-blue: #161549;
	--blue: #3F55A5;
	--mid-grey: #86909A;
	--light-grey: #A3B5C3;
	--off-white: #C9D5DF;
	--font-grey: #555b61;
}

	/* Font Color Classes*/
.orange {color: var(--orange);}
.dark-blue {color: var(--dark-blue);}
.blue {color: var(--blue);}
.mid-grey {color: var(--mid-grey);}
.light-grey {color: var(--light-grey);}
.off-white {color: var(--off-white);}
.font-grey {color: var(--font-grey);}

	/* 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 */
.thin-text-weight, .thin-text-weight .title {font-weight: 300;}
.medium-text-weight, .medium-text-weight .title  {font-weight: 400;}
.heavy-text-weight, .heavy-text-weight .title  {font-weight: 700;}

	/* 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(--dark-blue);
	letter-spacing: 0px;
	font-weight: 600;
}
h2 {
	font-size: var(--step-4); line-height: 110%;
	font-family: var(--font-primary), sans-serif;
	color: var(--dark-blue);
	letter-spacing: 0px;
	font-weight: 600;
}
h3 {
	font-size: var(--step-3); line-height: 120%;
	font-family: var(--font-primary), sans-serif;
	color: var(--dark-blue);
	letter-spacing: 0px;
	font-weight: 600;
}
h4 {
	font-size: var(--step-2); line-height: 130%;
	font-family: var(--font-secondary), sans-serif;
	color: var(--dark-blue);
	letter-spacing: 0px;
	font-weight: 700;
}
h5 {
	font-size: var(--step-1); line-height: 130% ;
	font-family: var(--font-secondary), sans-serif;
	color: var(--font-grey);
	letter-spacing: 0px;
	font-weight: 700;
}
h6 {
	font-size: var(--step-0); line-height: 150%;
	font-family: var(--font-secondary), sans-serif;
	color: var(--font-grey);
	letter-spacing: 0px;
	font-weight: 700;
}

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

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

/* END Root Stylings */