/*Theme Name: Harmony*/
.hy-hide {
	display: none;
}
.container {
	max-width: 18.75rem;
	margin: 0 auto;
}
html {
	font-size: calc(100vw * 16/360);
/* 	font-size: calc(100vh * 16/721); */
}
@media screen and (min-width: 768px){
	.container {
		max-width: 83.485rem;
	}	
	html {
		font-size: calc(100vw* 16 / 1536);
	}
}
@media screen and (min-width: 1536px){
	html {
		font-size: calc(100vw* 16 / 1536);
	}
}
/* FONTS */
/* Product Sans */
@font-face {
  font-family: 'Product Sans';
  src: url('fonts/product-sans/ProductSans-Black.woff2') format('woff2');
  font-weight: 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Product Sans';
  src: url('fonts/product-sans/ProductSans-BlackItalic.woff2') format('woff2');
  font-weight: 900;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: 'Product Sans';
  src: url('fonts/product-sans/ProductSans-Bold.woff2') format('woff2');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Product Sans';
  src: url('fonts/product-sans/ProductSans-BoldItalic.woff2') format('woff2');
  font-weight: 700;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: 'Product Sans';
  src: url('fonts/product-sans/ProductSans-Medium.woff2') format('woff2');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Product Sans';
  src: url('fonts/product-sans/ProductSans-MediumItalic.woff2') format('woff2');
  font-weight: 500;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: 'Product Sans';
  src: url('fonts/product-sans/ProductSans-Regular.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Product Sans';
  src: url('fonts/product-sans/ProductSans-Italic.woff2') format('woff2');
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: 'Product Sans';
  src: url('fonts/product-sans/ProductSans-Light.woff2') format('woff2');
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Product Sans';
  src: url('fonts/product-sans/ProductSans-LightItalic.woff2') format('woff2');
  font-weight: 300;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: 'Product Sans';
  src: url('fonts/product-sans/ProductSans-Thin.woff2') format('woff2');
  font-weight: 100;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Product Sans';
  src: url('fonts/product-sans/ProductSans-ThinItalic.woff2');
  font-weight: 100;
  font-style: italic;
  font-display: swap;
}
/* Clash Grotesk Variable */
@font-face {
  font-family: 'ClashGrotesk-Variable';
  src: url('fonts/ClashGrotesk-Variable/ClashGrotesk-Variable.woff2');
  font-weight: 200 700;
  font-display: swap;
  font-style: normal;
}