:root{
		--font-family: 'Josefin Sans', sans-serif; 
		--copy-color: #070707;
		--brand-color: #b66161;
		--grey-color: #656565;
		--lightgrey-color: #F4F4F4;
		--pane-padding: 0px 16px;
		--input-padding: 12px;
		--margin-fixed-s: 4px;
		--margin-xxs: 1vh;
		--margin-xs: 3vh;
		--margin-s: 6vh;
		--margin-n: 8vh;
		--margin-m: 17vh;
		--margin-l: 22vh;
		--margin-xl: 64vh;
		--margin-menu: 12vh;
		--font-s: 11px;
		--font-n: 13px;
		--font-m: 15px;
		--font-l: 17px;
		--font-xl: 21px;
		--font-xxl: 24px;
		--font-xxxl: 31px;
		--font-logo: 23px;
		--font-weight-thin: 100;
		--font-weight-extralight: 200;
		--font-weight-light: 300;
		--font-weight-regular: 400;
		--font-weight-medium: 500;
		--font-weight-semibold: 600;
	}
	
	*{ box-sizing: border-box; }

	body{ 
		font-family: 'Josefin Sans', sans-serif; 
		font-size: var(--font-s);
		font-weight: var(--font-weight-light);	
		color: var(--copy-color); 
		line-height: 16px;
		padding-top: var(--margin-m);
	}

	
	.z999{ z-index:999; }
	.z1999{ z-index:1999; }
	.z2999{ z-index:2999; }

	.font-thin{ font-weight: var(--font-weight-thin); }
	.font-extralight{ font-weight: var(--font-weight-extralight); }
	.font-light{ font-weight: var(--font-weight-light); }
	.font-regular{ font-weight: var(--font-weight-regular); }
	.font-medium{ font-weight: var(--font-weight-medium); }
	.font-semibold{ font-weight: var(--font-weight-semibold); }

	.font-s{ font-size: var(--font-s); line-height: 16px; }
	.font-n{ font-size: var(--font-n); line-height: 16px; }
	.font-m{ font-size: var(--font-m); line-height: 24px; }
	.font-l{ font-size: var(--font-l); line-height: 24px; }
	.font-xl{ font-size: var(--font-xl); line-height: 130%; letter-spacing: -0.011em; }
	.font-xxl{ font-size: var(--font-xxl); line-height: 40px; }
	.font-xxxl{ font-size: var(--font-xxxl); line-height: 124%; letter-spacing:-0.026em; }
	.font-logo{ font-size: var(--font-logo); line-height: 110%; letter-spacing:-0.009em; }

	.color-branding{ color: var(--brand-color); }
	.color-grey{ color: var(--grey-color); }
	.color-white{ color: #FFF; }

	a:link,a:active,a:visited,a:hover{ color: var(--copy-color); text-decoration: none; }
	a.dim:link,a.dim:active,a.dim:visited,a.dim:hover{ color: var(--grey-color); text-decoration: none; }
	a.white:link,a.white:active,a.white:visited,a.white:hover{ color: #FFF; text-decoration: none; }
	
	a.s{ font-size: var(--text-s); }
	a.m{ font-size: var(--text-m); }
	a.l{ font-size: var(--text-l); }
	a.xl{ font-size: var(--text-m); }

	.shadowbox{
		-webkit-box-shadow: 0px 0px 74px 0px rgba(0,0,0,0.09);
		-moz-box-shadow: 0px 0px 74px 0px rgba(0,0,0,0.09);
		box-shadow: 0px 0px 74px 0px rgba(0,0,0,0.09);
	}

	.whitebox{ background-color: #FFF; }
	.brandedbox{ background-color: var(--brand-color);  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=92)";
		 filter: alpha(opacity=92);
		 -moz-opacity: 0.92;
		 -khtml-opacity: 0.92;
		 opacity: 0.92;}

	.closebox{ position: absolute; top: 0px; right: 16px; }
	.closebox img{ height: 24px; }

	.inputfield-blurred, .textarea-blurred{
		font-family: var(--font-family);
		font-weight: var(--font-weight-light);
		background-color: var(--lightgrey-color);
		border: 0px;
		padding: var(--input-padding);
		color: var(--grey-color);
		font-size: var(--text-m);
		width: 100%;
	}

	.inputfield-focused, .textarea-focused{
		font-family: var(--font-family);
		font-weight: var(--font-weight-light);
		background-color: var(--lightgrey-color);
		border: 0px;
		padding: var(--input-padding);
		color: var(--copy-color);
		font-size: var(--text-m);
		width: 100%;
	}

	.textarea-blurred, .textarea-focused{ height: 18vh; }

	.submit{
		font-family: var(--font-family);
		font-weight: var(--font-weight-regular);
		font-size: var(--font-m);
		background-color: var(--brand-color);
		border: 0px;
		color: #FFF;
		padding: var(--input-padding);
		text-align: center;
		width: 100%;

	}

	.margin-bottom-xs{ margin-bottom: var(--margin-xs); }
	.margin-bottom-s{ margin-bottom: var(--margin-s); }
	.margin-bottom-m{ margin-bottom: var(--margin-m); }
	.margin-bottom-l{ margin-bottom: var(--margin-l); }
	.margin-bottom-xl{ margin-bottom: var(--margin-xl); }

	.margin-right-xs{ margin-right: var(--margin-xs); }
	.margin-right-s{ margin-right: var(--margin-s); }
	.margin-right-m{ margin-right: var(--margin-m); }
	.margin-right-l{ margin-right: var(--margin-l); }
	.margin-right-xl{ margin-right: var(--margin-xl); }

	.margin-left-xs{ margin-left: var(--margin-xs); }
	.margin-left-s{ margin-left: var(--margin-s); }
	.margin-left-m{ margin-left: var(--margin-m); }
	.margin-left-l{ margin-left: var(--margin-l); }
	.margin-left-xl{ margin-left: var(--margin-xl); }

	.padding-bottom-fixed-s{ padding-bottom: var(--margin-fixed-s); }
	.padding-bottom-xs{ padding-bottom: var(--margin-xs); }
	.padding-bottom-xs{ padding-bottom: var(--margin-xs); }
	.padding-bottom-s{ padding-bottom: var(--margin-s); }
	.padding-bottom-m{ padding-bottom: var(--margin-m); }
	.padding-bottom-l{ padding-bottom: var(--margin-l); }
	.padding-bottom-xl{ padding-bottom: var(--margin-xl); }

	.padding-left-xxs{ padding-left: var(--margin-xxs); }
	.padding-left-xs{ padding-left: var(--margin-xs); }
	.padding-left-s{ padding-left: var(--margin-s); }
	.padding-left-m{ padding-left: var(--margin-m); }
	.padding-left-l{ padding-left: var(--margin-l); }
	.padding-left-xl{ padding-left: var(--margin-xl); }

	.padding-right-xxs{ padding-right: var(--margin-xxs); }
	.padding-right-xs{ padding-right: var(--margin-xs); }
	.padding-right-s{ padding-right: var(--margin-s); }
	.padding-right-m{ padding-right: var(--margin-m); }
	.padding-right-l{ padding-right: var(--margin-l); }
	.padding-right-xl{ padding-right: var(--margin-xl); }

	.padding-top-xs{ padding-top: var(--margin-xs); }
	.padding-top-s{ padding-top: var(--margin-s); }
	.padding-top-n{ padding-top: var(--margin-n); }
	.padding-top-m{ padding-top: var(--margin-m); }
	.padding-top-l{ padding-top: var(--margin-l); }
	.padding-top-xl{ padding-top: var(--margin-xl); }
	.padding-top-menu{ padding-top: var(--margin-menu); }
	
	.social-icon-img{ height: 23px; }

	.height-100{ height: 100vh; }
	.width-100{ width: 100vw; }
	.width-100px{ width: 100px; }
	.width-40{ width: 40vw; }
	.width-50{ width: 50vw; }
	.width-77{ width: 77vw; }
	.width-88{ width: 88vw; }
	.width-92{ width: 92vw; }

	.bottom-hidden{ 
		position: fixed; left: 0px; bottom: -1000px; 
		transition: bottom 340ms;
	}
	
	.bottom-visible{ 
		position: fixed; left: 0px; bottom: 0px; 
		transition: bottom 740ms;
	}

	.bottom-floating-visible{ 
		position: fixed; left: 0px; bottom: 1vh; 
		transition: bottom 740ms;
	}

	a.circle:link,a.circle:active,a.circle:visited{
		height: 51px; width: 51px;
		background-color: #FFF;
		border-radius: 50%;
		color: var(--grey-color);
		border: 1px solid var(--grey-color);
		display: inline-block;
		font-weight: var(--font-weight-light);
		font-size: var(--font-xl);
		padding-top: 14px;
		text-align: center;
		transition: all 340ms;
	}

	a.circle:hover{
		height: 51px; width: 51px;
		background-color: #FFF;
		border-radius: 50%;
		color: var(--brand-color);
		border: 1px solid var(--brand-color);
		display: inline-block;
		font-weight: var(--font-weight-light);
		font-size: var(--font-xl);
		padding-top: 14px;
		text-align: center;
		transition: all 340ms;
	}


	/* . base definitions */

	
	html{ height: 100%; margin: 0px; padding: 0px; scroll-behavior: smooth; -webkit-font-smoothing: antialiased; }
	.fixed{ position: fixed; }
	.absolute{ position: absolute; }
	.absolute-top-left { position: absolute; top: 0px; left: 0px;}
	.absolute-top-right { position: absolute; top: 0px; right: 0px;}
	.relative{ position: relative; }
	.inline-block{ display: inline-block; }
	.hidden{ display: none; }
	.visible{ display: block; }
	.position-bottom-left{ bottom: 0px; left: 0px; }
	.position-top-left{ top: 0px; left: 0px; }
	.position-top-right{ top: 0px; right: 0px; }
	.nowrap{ white-space: nowrap; }
	.overflow-auto{ overflow: auto; }
	.width-10pct{ width: 10%; }
	.width-20pct{ width: 20%; }
	.width-30pct{ width: 30%; }
	.width-40pct{ width: 40%; }
	.width-50pct{ width: 50%; }
	.width-55pct{ width: 55%; }
	.width-60pct{ width: 60%; }
	.width-70pct{ width: 70%; }
	.width-80pct{ width: 80%; }
	.width-90pct{ width: 90%; }
	
	.backdrop-blur{ backdrop-filter: blur(1px) brightness(76%); }
	.content-centered{ display: flex; justify-content: center; align-items: center; }

	.flex{ display: flex; }
	.flex-1{ flex: 1; }
	
	.float-left{ float: left; }
	.float-right{ float: right; }
	.bg-covered-top{ background-size: cover; background-repeat: no-repeat; background-position: top; }
	.bg-covered-bottom{ background-size: cover; background-repeat: no-repeat; background-position: bottom; }
	.bg-covered-center{ background-size: cover; background-repeat: no-repeat; background-position: center; }
	.square{ width: 100%; }
	.square:after{ content: ''; display: block; padding-bottom: 100%; }
	.rectangle{ width: 100%; }
	.rectangle:after{ content: ''; display: block; padding-bottom: 22%; }
	.text-left, .text-left-to-center{ text-align: left; }
	.text-right, .text-right-to-center{ text-align: right; }
	.text-center{ text-align: center; }
	.bg-white{ background-color: #FFF; }
	.black-and-white-image{ -webkit-filter: grayscale(100%); filter: grayscale(100%); }
	.parallax{ height: 100vh; overflow-x: hidden; overflow-y: auto; -webkit-perspective: 1px; perspective: 1px; }
	.parallax__layer{ position: absolute; top: 0; left: 0; right: 0; bottom: 0; }
	.parallax__layer--base{ -webkit-transform: translateZ(0); transform: translateZ(0); }
	.parallax__layer--back{ -webkit-transform: translateZ(-1px) scale(2); transform: translateZ(-1px) scale(2); }

	.strikethrough{
		text-decoration: line-through;
	}
	.discount-box{
		background-color: var(--brand-color);
		padding: 4px;
		border-radius: 4px;
		color:  #FFF;
	}

	.shadow-on-hover:hover{
		-webkit-box-shadow: 0px 0px 44px 0px rgba(0,0,0,0.07);
		-moz-box-shadow: 0px 0px 44px 0px rgba(0,0,0,0.07);
		box-shadow: 0px 0px 44px 0px rgba(0,0,0,0.07);
		border:1px solid #FFF;
	}