:root {

--viewport-width:100vw;
--min-vp:479px;
--max-vp:1119px;
--scale-factor: calc((var(--viewport-width) - var(--min-vp)) / (1119 - 479));


--pss-320: clamp(160px, calc(160px + var(--scale-factor) * 160), 320px);
--pss-260: clamp(130px, calc(130px + var(--scale-factor) * 130), 260px);
--pss-220: clamp(110px, calc(110px + var(--scale-factor) * 110), 220px);
--pss-180: clamp(90px, calc(90px + var(--scale-factor) * 90), 180px);
--pss-140: clamp(70px, calc(70px + var(--scale-factor) * 70), 140px);
--pss-100: clamp(50px, calc(50px + var(--scale-factor) * 50), 100px);
--pss-80: clamp(40px, calc(40px + var(--scale-factor) * 40), 80px);
--pss-60: clamp(30px, calc(30px + var(--scale-factor) * 30), 60px);
--pss-30: clamp(15px, calc(15px + var(--scale-factor) * 15), 30px);


--psp-200: clamp(100px, calc(100px + var(--scale-factor) * 100), 200px);
--psp-100: clamp(50px, calc(50px + var(--scale-factor) * 50), 100px);
--psp-80: clamp(40px, calc(40px + var(--scale-factor) * 40), 80px);
--psp-30: clamp(30px, calc(30px + var(--scale-factor) * 20), 50px);
--psp-40: clamp(25px, calc(25px + var(--scale-factor) * 15), 40px);
--psp-30: clamp(20px, calc(20px + var(--scale-factor) * 10), 30px);
--psp-20: clamp(12px, calc(12px + var(--scale-factor) * 8), 20px);
--psp-14: clamp(9px, calc(9px + var(--scale-factor) * 5), 14px);


--pfo-160: clamp( 1.88rem, -4.206rem + 20.313vw, 10.00rem ); /* Min. Font-Size: 30px at 479px | Max. Font-Size: 160px at 1119px */
--pfo-18: clamp( 0.79rem, 0.535rem + 0.844vw, 1.13rem ); /* Min. Font-Size: 12.6px at 479px | Max. Font-Size: 18px at 1119px */
--pfo-20: 1.25rem; /* Locked Font-Size: 20px */

	

	/* Standard Vars not auto generated */
	--csp-1: clamp(7px, calc(7px + var(--scale-factor) * 5), 14px);
	--csp-2: clamp(10px, calc(10px + var(--scale-factor) * 10), 20px); 
	--csp-3: clamp(15px, calc(15px + var(--scale-factor) * 25), 30px); 
	--csp-4: clamp(20px, calc(20px + var(--scale-factor) * 30), 40px);
	--csp-5: clamp(25px, calc(25px + var(--scale-factor) * 40), 50px); 
	--csp-6: clamp(40px, calc(40px + var(--scale-factor) * 50), 80px);
	--csp-7: clamp(50px, calc(50px + var(--scale-factor) * 60), 100px);
	--csp-8: clamp(100px, calc(100px + var(--scale-factor) * 70), 200px);

		     
	--css-1: clamp(12px, calc(25px + var(--scale-factor) * 5), 25px);
	--css-2: clamp(25px, calc(50px + var(--scale-factor) * 10), 50px); 
	--css-3: clamp(40px, calc(40px + var(--scale-factor) * 25), 80px); 
	--css-4: clamp(60px, calc(60px + var(--scale-factor) * 30), 120px);
	--css-5: clamp(90px, calc(90px + var(--scale-factor) * 40), 180px); 
	--css-6: clamp(110px, calc(110px + var(--scale-factor) * 50), 220px);
	--css-7: clamp(130px, calc(130px + var(--scale-factor) * 60), 260px);
	--css-8: clamp(160px, calc(160px + var(--scale-factor) * 70), 320px);

}
  
html{
	/* Set 1rem to base font size */
	/*font-size: var(--bde-body-font-size)*/;	
}

  /* Padding Top */
  
  .breakdance .bde-section.pad-v-xxl .section-container,
  .breakdance .bde-section .section-container .pad-v-xxl,
  .breakdance .bde-section.pad-top-xxl .section-container,
  .breakdance .bde-section .section-container .pad-top-xxl
  { padding-top: clamp(100px, calc(100px + var(--scale-factor) * 60), 160px); }
  
  .breakdance .bde-section.pad-v-xl .section-container,
  .breakdance .bde-section .section-container .pad-v-xl,
  .breakdance .bde-section.pad-top-xl .section-container,
  .breakdance .bde-section .section-container .pad-top-xl
  { padding-top: clamp(80px, calc(80px + var(--scale-factor) * 50), 130px); }
  
  .breakdance .bde-section.pad-v-l .section-container,
  .breakdance .bde-section .section-container .pad-v-l,
  .breakdance .bde-section.pad-top-l .section-container, 
  .breakdance .bde-section .section-container .pad-top-l
  { padding-top: clamp(60px, calc(60px + var(--scale-factor) * 40), 100px); }
  
  .breakdance .bde-section.pad-v-m .section-container,
  .breakdance .bde-section .section-container .pad-v-m,
  .breakdance .bde-section.pad-top-m .section-container,
  .breakdance .bde-section .section-container .pad-top-m 
  { padding-top: clamp(50px, calc(50px + var(--scale-factor) * 30), 80px); }
  
  .breakdance .bde-section.pad-v-s .section-container,
  .breakdance .bde-section .section-container .pad-v-s,
  .breakdance .bde-section.pad-top-s .section-container,
  .breakdance .bde-section .section-container .pad-top-s 
  { padding-top: clamp(35px, calc(35px + var(--scale-factor) * 25), 45px); }
  
  .breakdance .bde-section.pad-v-xs .section-container,
  .breakdance .bde-section .section-container .pad-v-xs,
  .breakdance .bde-section.pad-top-xs .section-container,
  .breakdance .bde-section .section-container .pad-top-xs 
  { padding-top: clamp(25px, calc(25px + var(--scale-factor) * 10), 35px); }
  
  .breakdance .bde-section.pad-v-xxs .section-container,
  .breakdance .bde-section .section-container .pad-v-xxs,
  .breakdance .bde-section.pad-top-xxs .section-container,
  .breakdance .bde-section .section-container .pad-top-xxs 
  { padding-top: clamp(15px, calc(15px + var(--scale-factor) * 5), 20px); }
  
  
  /* Padding Bottom */
  
  .breakdance .bde-section.pad-v-xxl .section-container,
  .breakdance .bde-section .section-container .pad-v-xxl,
  .breakdance .bde-section.pad-bot-xxl .section-container,
  .breakdance .bde-section .section-container .pad-bot-xxl
  { padding-bottom: clamp(100px, calc(100px + var(--scale-factor) * 60), 160px); }
  
  .breakdance .bde-section.pad-v-xl .section-container,
  .breakdance .bde-section .section-container .pad-v-xl,
  .breakdance .bde-section.pad-bot-xl .section-container,
  .breakdance .bde-section .section-container .pad-bot-xl
  { padding-bottom: clamp(80px, calc(80px + var(--scale-factor) * 50), 130px); }
  
  .breakdance .bde-section.pad-v-l .section-container,
  .breakdance .bde-section .section-container .pad-v-l,
  .breakdance .bde-section.pad-bot-l .section-container,
  .breakdance .bde-section .section-container .pad-bot-l
  { padding-bottom: clamp(60px, calc(60px + var(--scale-factor) * 40), 100px); }
  
  .breakdance .bde-section.pad-v-m .section-container,
  .breakdance .bde-section .section-container .pad-v-m,
  .breakdance .bde-section.pad-bot-m .section-container,
  .breakdance .bde-section .section-container .pad-bot-m
  { padding-bottom: clamp(50px, calc(50px + var(--scale-factor) * 30), 80px); }
  
  .breakdance .bde-section.pad-v-s .section-container,
  .breakdance .bde-section .section-container .pad-v-s,
  .breakdance .bde-section.pad-bot-s .section-container,
  .breakdance .bde-section .section-container .pad-bot-s
  { padding-bottom: clamp(35px, calc(35px + var(--scale-factor) * 25), 45px); }
  
  .breakdance .bde-section.pad-v-xs .section-container,
  .breakdance .bde-section .section-container .pad-v-xs,
  .breakdance .bde-section.pad-bot-xs .section-container,
  .breakdance .bde-section .section-container .pad-bot-xs
  { padding-bottom: clamp(25px, calc(25px + var(--scale-factor) * 10), 35px); }
  
  .breakdance .bde-section.pad-v-xxs .section-container,
  .breakdance .bde-section .section-container .pad-v-xxs,
  .breakdance .bde-section.pad-bot-xxs .section-container,
  .breakdance .bde-section .section-container .pad-bot-xxs
  { padding-bottom: clamp(15px, calc(15px + var(--scale-factor) * 5), 20px); }
  
  
  /* Zero Padding  */
  .breakdance .bde-section.pad-v-zero .section-container{ padding-top: 0; padding-bottom: 0; }
  .breakdance .bde-section.pad-top-zero .section-container{ padding-top: 0; }
  .breakdance .bde-section.pad-bot-zero .section-container{ padding-bottom: 0; }
  
  /* Width */
  .breakdance .width-full, .breakdance .width-100{  width:100%; }
  
  /* Helper */
  .breakdance .margin-auto{margin:auto;}
  
  /* Gap */
  .breakdance .bde-section.gap-xxl .section-container,
  .breakdance .gap-xxl
  { gap: clamp(70px, calc(70px + var(--scale-factor) * 50), 120px); }
  
  .breakdance .bde-section.gap-xl .section-container,
  .breakdance .gap-xl
  { gap: clamp(60px, calc(60px + var(--scale-factor) * 40), 100px); }
  
  .breakdance .bde-section.gap-l .section-container,
  .breakdance .gap-l 
  { gap: clamp(50px, calc(50px + var(--scale-factor) * 30), 80px); }
  
  .breakdance .bde-section.gap-m .section-container,
  .breakdance .gap-m 
  { gap: clamp(40px, calc(40px + var(--scale-factor) * 20), 60px); }
  
  .breakdance .bde-section.gap-s .section-container,
  .breakdance .gap-s
  { gap: clamp(30px, calc(30px + var(--scale-factor) * 15), 45px); }
  
  .breakdance .bde-section.gap-xs .section-container,
  .breakdance .gap-xs
  { gap: clamp(20px, calc(20px + var(--scale-factor) * 10), 30px); }
  
  .breakdance .bde-section.gap-xxs .section-container,
  .breakdance .gap-xxs
  { gap: clamp(10px, calc(10px + var(--scale-factor) * 5), 15px); }
  
  
  /* XS Values */
  @media only screen and (min-width:1px){
  
	  /* XS Width */
	  .breakdance .width-5-xs{width:5%;}
	  .breakdance .width-10-xs{width:10%;}
	  .breakdance .width-15-xs{width:15%;}
	  .breakdance .width-20-xs{width:20%;}
	  .breakdance .width-25-xs{width:25%;}
	  .breakdance .width-30-xs{width:30%;}
	  .breakdance .width-35-xs{width:35%;}
	  .breakdance .width-40-xs{width:40%;}
	  .breakdance .width-45-xs{width:45%;}
	  .breakdance .width-50-xs{width:50%;}
	  .breakdance .width-55-xs{width:55%;}
	  .breakdance .width-60-xs{width:60%;}
	  .breakdance .width-65-xs{width:65%;}
	  .breakdance .width-70-xs{width:70%;}
	  .breakdance .width-75-xs{width:75%;}
	  .breakdance .width-80-xs{width:80%;}
	  .breakdance .width-85-xs{width:85%;}
	  .breakdance .width-90-xs{width:90%;}
	  .breakdance .width-95-xs{width:95%;}
	  .breakdance .width-100-xs{width:100%;}
  }
  
  /* S Values */
  @media only screen and (min-width:480px){
  
	  /* S Width */
	  .breakdance .width-5-s{width:5%;}
	  .breakdance .width-10-s{width:10%;}
	  .breakdance .width-15-s{width:15%;}
	  .breakdance .width-20-s{width:20%;}
	  .breakdance .width-25-s{width:25%;}
	  .breakdance .width-30-s{width:30%;}
	  .breakdance .width-35-s{width:35%;}
	  .breakdance .width-40-s{width:40%;}
	  .breakdance .width-45-s{width:45%;}
	  .breakdance .width-50-s{width:50%;}
	  .breakdance .width-55-s{width:55%;}
	  .breakdance .width-60-s{width:60%;}
	  .breakdance .width-65-s{width:65%;}
	  .breakdance .width-70-s{width:70%;}
	  .breakdance .width-75-s{width:75%;}
	  .breakdance .width-80-s{width:80%;}
	  .breakdance .width-85-s{width:85%;}
	  .breakdance .width-90-s{width:90%;}
	  .breakdance .width-95-s{width:95%;}
	  .breakdance .width-100-s{width:100%;}
  }
  
  /* M Values */
  @media only screen and (min-width:768px){
  
	  /* M Width */
	  .breakdance .width-5-m{width:5%;}
	  .breakdance .width-10-m{width:10%;}
	  .breakdance .width-15-m{width:15%;}
	  .breakdance .width-20-m{width:20%;}
	  .breakdance .width-25-m{width:25%;}
	  .breakdance .width-30-m{width:30%;}
	  .breakdance .width-35-m{width:35%;}
	  .breakdance .width-40-m{width:40%;}
	  .breakdance .width-45-m{width:45%;}
	  .breakdance .width-50-m{width:50%;}
	  .breakdance .width-55-m{width:55%;}
	  .breakdance .width-60-m{width:60%;}
	  .breakdance .width-65-m{width:65%;}
	  .breakdance .width-70-m{width:70%;}
	  .breakdance .width-75-m{width:75%;}
	  .breakdance .width-80-m{width:80%;}
	  .breakdance .width-85-m{width:85%;}
	  .breakdance .width-90-m{width:90%;}
	  .breakdance .width-95-m{width:95%;}
	  .breakdance .width-100-m{width:100%;}
  }
  
  /* L Values */
  @media only screen and (min-width:1024px){
  
	  /* L Width */
	  .breakdance .width-5-l{width:5%;}
	  .breakdance .width-10-l{width:10%;}
	  .breakdance .width-15-l{width:15%;}
	  .breakdance .width-20-l{width:20%;}
	  .breakdance .width-25-l{width:25%;}
	  .breakdance .width-30-l{width:30%;}
	  .breakdance .width-35-l{width:35%;}
	  .breakdance .width-40-l{width:40%;}
	  .breakdance .width-45-l{width:45%;}
	  .breakdance .width-50-l{width:50%;}
	  .breakdance .width-55-l{width:55%;}
	  .breakdance .width-60-l{width:60%;}
	  .breakdance .width-65-l{width:65%;}
	  .breakdance .width-70-l{width:70%;}
	  .breakdance .width-75-l{width:75%;}
	  .breakdance .width-80-l{width:80%;}
	  .breakdance .width-85-l{width:85%;}
	  .breakdance .width-90-l{width:90%;}
	  .breakdance .width-95-l{width:95%;}
	  .breakdance .width-100-l{width:100%;}
  }
  
  /* XL Values */
  @media only screen and (min-width:1120px){
  
	  /* XL Width */
	  .breakdance .width-5-xl{width:5%;}
	  .breakdance .width-10-xl{width:10%;}
	  .breakdance .width-15-xl{width:15%;}
	  .breakdance .width-20-xl{width:20%;}
	  .breakdance .width-25-xl{width:25%;}
	  .breakdance .width-30-xl{width:30%;}
	  .breakdance .width-35-xl{width:35%;}
	  .breakdance .width-40-xl{width:40%;}
	  .breakdance .width-45-xl{width:45%;}
	  .breakdance .width-50-xl{width:50%;}
	  .breakdance .width-55-xl{width:55%;}
	  .breakdance .width-60-xl{width:60%;}
	  .breakdance .width-65-xl{width:65%;}
	  .breakdance .width-70-xl{width:70%;}
	  .breakdance .width-75-xl{width:75%;}
	  .breakdance .width-80-xl{width:80%;}
	  .breakdance .width-85-xl{width:85%;}
	  .breakdance .width-90-xl{width:90%;}
	  .breakdance .width-95-xl{width:95%;}
	  .breakdance .width-100-xl{width:100%;}
  }
  
  /* XXL Values var(--above-max-vp) */
  @media only screen and (min-width:1401px){
  
	  /* XXL Width */
	  .breakdance .width-5-xxl{width:5%;}
	  .breakdance .width-10-xxl{width:10%;}
	  .breakdance .width-15-xxl{width:15%;}
	  .breakdance .width-20-xxl{width:20%;}
	  .breakdance .width-25-xxl{width:25%;}
	  .breakdance .width-30-xxl{width:30%;}
	  .breakdance .width-35-xxl{width:35%;}
	  .breakdance .width-40-xxl{width:40%;}
	  .breakdance .width-45-xxl{width:45%;}
	  .breakdance .width-50-xxl{width:50%;}
	  .breakdance .width-55-xxl{width:55%;}
	  .breakdance .width-60-xxl{width:60%;}
	  .breakdance .width-65-xxl{width:65%;}
	  .breakdance .width-70-xxl{width:70%;}
	  .breakdance .width-75-xxl{width:75%;}
	  .breakdance .width-80-xxl{width:80%;}
	  .breakdance .width-85-xxl{width:85%;}
	  .breakdance .width-90-xxl{width:90%;}
	  .breakdance .width-95-xxl{width:95%;}
	  .breakdance .width-100-xxl{width:100%;}
  }