:root{

    --white:#ffffff;
    --off-white:#f5f5f5;
    --light-grey:#a6b6bb;
    --pine-green:#224a57;
    --black:#000000;
    --light-white:#ffffff80;
    --blue:#3fa2f7;
    --dark-grey: #999999;
    --orange: #f26649;
    --light-black: #000000b3;
    --grey: #cccccc;
    --grey-80: #cccccc80;
    --tint-blue: #f2f4f6;
    --peach: #f5d6c6;
    --ting-peach: #ece4e4;
    --tint-grey: #3333331a;
    --dark-blue: #092546;
    --font-roboto: font-family: Roboto, Arial, sans-serif;
    --font-roboto-light: font-family: Roboto Light;
    
	--primary-primary1: #C20E2F;
    --primary-primary2: #8A031C;
    --primary-primary3: #7FB1FB;
    --primary-primary4: #438BF5;
    --primary-primary5: #0D4BA9;
    
    --secondary-secondary1: #EA3556;
    --secondary-secondary2: #61D2D6;
    --secondary-secondary3: #ED146F;
    --secondary-secondary4: #EDDE45;
    --secondary-secondary5: #9BF0E9;
    
    --base-base1: #111;
    --base-base2: #757575;
    --base-base3: #DADADA;
    --base-base4: #F4F4F4;
    --base-base5: #FFF;
    
    --error: #D91010;
    --success: #3ACD07;
    
    --gradients-gradient1: linear-gradient(180deg, #9747FF 0%, #00FFEA 100%);
    --gradients-gradient2: linear-gradient(90deg, #F0FF47 0%, #00FFEA 100%);
    --gradients-gradient3: linear-gradient(239deg, #9747FF 6.42%, #FF00C7 98.25%);
    --gradients-gradient4: linear-gradient(119deg, #7852E4 8.88%, #0078E8 57.77%, #28B09F 97.44%);
    --gradients-gradient5: gradient(90deg, #FF8947 0%, #ADFF00 91.5%);
    
    --tint-dark-5: rgba(0, 0, 0, 0.05);
    --tint-dark-10: rgba(0, 0, 0, 0.10);
    --tint-dark-25: rgba(0, 0, 0, 0.25);
    --tint-dark-50: rgba(0, 0, 0, 0.50);
    --tint-dark-75: rgba(0, 0, 0, 0.75);
    
    --tint-light-5: rgba(255, 255, 255, 0.05);
    --tint-light-10: rgba(255, 255, 255, 0.10);
    --tint-light-25: rgba(255, 255, 255, 0.25);
    --tint-light-50: rgba(255, 255, 255, 0.50);
    --tint-light-75: rgba(255, 255, 255, 0.75);
    
    --gradient-overlays-dark-bottom: linear-gradient(180deg, rgba(0, 0, 0, 0.00) 0%, rgba(0, 0, 0, 0.50) 100%);
    --gradient-overlays-dark-top: linear-gradient(180deg, rgba(0, 0, 0, 0.50) 0%, rgba(0, 0, 0, 0.00) 100%);
    --gradient-overlays-dark-left-to-right: linear-gradient(90deg, rgba(0, 0, 0, 0.50) 0%, rgba(0, 0, 0, 0.00) 100%);
    --gradient-overlays-dark-right-to-left: linear-gradient(270deg, rgba(0, 0, 0, 0.50) 0%, rgba(0, 0, 0, 0.00) 100%);
    
    --shadow-noshadow: none;
    --shadow-xsmall: 0px 1px 2px 0px rgba(0, 0, 0, 0.06), 0px 1px 3px 0px rgba(0, 0, 0, 0.10);
    --shadow-small: 0px 2px 4px -2px rgba(0, 0, 0, 0.06), 0px 4px 8px -2px rgba(0, 0, 0, 0.10);
    --shadow-medium: 0px 4px 6px -2px rgba(0, 0, 0, 0.03), 0px 12px 16px -4px rgba(0, 0, 0, 0.08);
    --shadow-large: 0px 8px 8px -4px rgba(0, 0, 0, 0.03), 0px 20px 24px -4px rgba(0, 0, 0, 0.08);
    --shadow-xlarge: 0px 24px 48px -12px rgba(0, 0, 0, 0.18);
    --shadow-xxlarge: 0px 24px 48px -12px rgba(0, 0, 0, 0.18);
    
    --radius-noradius: none;
    --radius-xsmall: 2px;
    --radius-small: 4px;
    --radius-medium: 8px;
    --radius-large: 16px;
    --radius-xlarge: 16px;
    --radius-xxlarge: 24px;
    
    --fw-roboto-thin: 100;
  	--fw-roboto-light: 300;
  	--fw-roboto: 400;
  	--fw-roboto-medium: 500;
  	--fw-roboto-bold: 700;
  	--fw-roboto-black: 900;
    
  	--miller-banner: "Miller Banner";
  	--roboto-thin: "Roboto Thin";
  	--roboto-thin-italic: "Roboto Thin Italic";
  	--roboto-light: "Roboto Light";
  	--roboto-light-italic: "Roboto Light Italic";
  	--roboto-regular: "Roboto";
  	--roboto-italic: "Roboto Italic";
  	--roboto-medium: "Roboto Medium";
  	--roboto-medium-italic: "Roboto Medium Italic";
  	--roboto-bold: "Roboto Bold";
  	--roboto-bold-italic: "Roboto Bold Italic";
  	--roboto-black: "Roboto Black";
  	--roboto-black-italic: "Roboto Black Italic";
    
    --font-size-h1: clamp(3.6rem, 2.16rem + 2.4vw, 6rem);
    --font-size-h2: clamp(2.8rem, 1.6rem + 2vw, 4.8rem);
    --font-size-h3: clamp(2.4rem, 1.44rem + 1.6vw, 4rem);
    --font-size-h4: clamp(2rem, 1.28rem + 1.2vw, 3.2rem);
    --font-size-h5: clamp(1.8rem, 1.44rem + 0.6vw, 2.4rem);
    --font-size-h6: clamp(1.4rem, 1.16rem + 0.4vw, 1.8rem);
    
    --font-section-title: clamp(1.4rem, 1.04rem + 0.6vw, 2rem);
    --font-quote-large: clamp(2.4rem, 0.96rem + 2.4vw, 4.8rem);
    --font-quote-medium: clamp(1.6rem, 1.12rem + 0.8vw, 2.4rem);
    --font-body-large: clamp(1.8rem, 1.44rem + 0.6vw, 2.4rem);
    --font-body-medium: clamp(1.6rem, 1.48rem + 0.2vw, 1.8rem);
    --font-body-small: clamp(1.4rem, 1.28rem + 0.2vw, 1.6rem);
    --font-body-xsmall: clamp(1.2rem, 1.08rem + 0.2vw, 1.4rem);
    
    --font-label: clamp(1.2rem, 1.08rem + 0.2vw, 1.4rem);
    
    --font-stat-large: clamp(3.2rem, 1.52rem + 2.8vw, 6rem);
    --font-stat-medium: clamp(2.4rem, 0.96rem + 2.4vw, 4.8rem);
    
    --font-link-large: clamp(1.8rem, 1.44rem + 0.6vw, 2.4rem);
    --font-link-medium: clamp(1.6rem, 1.48rem + 0.2vw, 1.8rem);
    --font-link-small: clamp(1.4rem, 1.28rem + 0.2vw, 1.6rem);
    --font-link-xsmall: clamp(1.2rem, 1.08rem + 0.2vw, 1.4rem);
    
    --font-cta: clamp(1.4rem, 1.28rem + 0.2vw, 1.6rem);
    
    --font-tag: clamp(1.2rem, 1.08rem + 0.2vw, 1.4rem);
    
    --font-nav-large: clamp(1.4rem, 1.16rem + 0.4vw, 1.8rem);
    --font-nav-medium: clamp(1.2rem, 0.96rem + 0.4vw, 1.6rem);
    --font-nav-small: clamp(1rem, 0.76rem + 0.4vw, 1.4rem);
    
    --font-breadcrumb: clamp(1.2rem, 1.08rem + 0.2vw, 1.4rem);
    
    --spacing-1: clamp(3rem, 1.557rem + 3.7975vw, 6rem);
    
    --st-lg1: 48px;
    --st-lg2: 40px;
    --st-lg3: 36px;
    --st-lg4: 32px;
    
    --st-md1: 28px;
    --st-md2: 24px;
    --st-md3: 20px;
    --st-md4: 20px;
    
    --st-sm1: 20px;
    --st-sm2: 16px;
    --st-sm3: 12px;
    --st-sm4: 12px;
    
    --st-xs1: 8px;
    --st-xs-2: 4px;
    
    --transition-3: all 0.3s ease-in-out;
    --transition-5: all 0.5s ease-in-out;
    
    --font-family-roboto: "Roboto", sans-serif;
    --font-family-miller: "miller-banner";
    
}
@media all and (min-width: 768px){
  :root{
      --radius-small: 6px;
      --radius-medium: 12px;
      --radius-large: 20px;
      --radius-xlarge: 24px;
      --radius-xxlarge: 40px;
      
      --st-lg1: 96px;
      --st-lg2: 88px;
      --st-lg3: 80px;
      --st-lg4: 72px;
      
      --st-md1: 64px;
      --st-md2: 56px;
      --st-md3: 48px;
      --st-md4: 40px;
      
      --st-sm1: 32px;
      --st-sm2: 24px;
      --st-sm3: 16px;
      --st-sm4: 12px;
  }
}
@media all and (min-width: 992px){
  :root{
      --radius-xsmall: 4px;
      --radius-small: 8px;
      --radius-medium: 16px;
      --radius-large: 24px;
      --radius-xlarge: 40px;
      --radius-xxlarge: 60px;
  }
}