
	@font-face {
		font-family: 'Catchy Mager';
		src: url('/Assets/fonts/catchy-mager/CatchyMager-Normal.eot'); 	/* IE9 Compat Modes */
		src: url('/Assets/fonts/catchy-mager/CatchyMager-Normal.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
			url('/Assets/fonts/catchy-mager/CatchyMager-Normal.woff') format('woff'), /* Modern Browsers */
			url('/Assets/fonts/catchy-mager/CatchyMager-Normal.ttf')  format('truetype'), /* Safari, Android, iOS */
			url('/Assets/fonts/catchy-mager/CatchyMager-Normal.svg#svgFontName') format('svg'); /* Legacy iOS */
	}

	:root{

		--font-catchy-mager: 		'Catchy Mager', sans-serif; 
		--font-montserrat: 			'Montserrat', sans-serif; 

		--color-pink: 				#e01981;
		--color-dim-pink: 			#fcedf5;
		--color-green: 				#8cbb32;
		--color-yellow: 			#ffe22c;
		--color-red: 				#e1031b;
		--color-blue: 				#20b4e7;
		--color-purple: 			#4c3487;
		--color-orange: 			#f39224;
		--color-brown: 				#91371d;

		--color-white: 				#FFF;
		--color-copy: 				#343434;
		--color-grey: 				#343434;
		--color-dim-grey: 			#a1a1a1;

		--pane-padding: 			0px 16px;
		--input-padding: 			12px;

		--margin-fixed-s: 			4px;
		--margin-xxs: 				4px;
		--margin-xs: 				8px;
		--margin-s: 				16px;
		--margin-m: 				58px;
		--margin-l: 				80px;
		--margin-xl: 				136px;
		--margin-xxl: 				176px;

		--font-xs: 					9px;
		--font-s: 					12px;
		--font-n: 					14px;
		--font-m: 					17px;
		--font-l: 					18px;
		--font-xl: 					21px;
		--font-xxl: 				27px;
		--font-hero: 				43px;

		--font-weight-thin: 		100;
		--font-weight-extralight: 	200;
		--font-weight-light: 		300;
		--font-weight-regular: 		400;
		--font-weight-medium: 		500;
		--font-weight-semibold: 	600;

		--menu-height: 				152px;

	}
	
	*{ box-sizing: border-box; }

	body{ 
		font-family: var(--font-montserrat);
		font-size: var(--font-n);
		font-weight: var(--font-weight-regular);	
		color: var(--copy-color); 
		line-height: 16px;
	}

	
	.z999{ z-index:999; }
	.z9999{ z-index:9999; }

	.font-catchy-mager{ font-family: var(--font-catchy-mager); }
	.font-montserrat{ font-family: var(--font-montserrat); }

	.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: 165%; letter-spacing: -0.023em; }
	.font-m{ font-size: var(--font-m); line-height: 172%; letter-spacing: -0.033em; }
	.font-l{ font-size: var(--font-l); line-height: 168%; letter-spacing: -0.033em; }
	.font-xl{ font-size: var(--font-xl); line-height: 162%; letter-spacing: -0.033em; }
	.font-xxl{ font-size: var(--font-xxl); line-height: 142%; letter-spacing: -0.033em; } 
	.font-hero{ font-size: var(--font-hero); line-height: 112%; letter-spacing: -0.013em; }

	.bg-white{ background-color: var(--color-white); }
	.bg-pink{ background-color: var(--color-pink); }
	.bg-dim-pink{ background-color: var(--color-dim-pink); }
	.bg-green{ background-color: var(--color-green); }
	.bg-yellow{ background-color: var(--color-yellow); }
	.bg-red{ background-color: var(--color-red); }
	.bg-blue{ background-color: var(--color-blue); }
	.bg-purple{ background-color: var(--color-purple); }
	.bg-orange{ background-color: var(--color-orange); }
	.bg-brown{ background-color: var(--color-brown); }
	
	.color-pink{ color: var(--color-pink); }
	.color-green{ color: var(--color-green); }
	.color-yellow{ color: var(--color-yellow); }
	.color-red{ color: var(--color-red); }
	.color-blue{ color: var(--color-blue); }
	.color-purple{ color: var(--color-purple); }
	.color-orange{ color: var(--color-orange); }
	.color-brown{ color: var(--color-brown); }
	.color-grey{ color: var(--color-grey); }
	.color-dim-grey{ color: var(--color-dim-grey); }
	.color-white{ color: #FFF; }
	
	.border-pink{ border: 2px solid var(--color-pink); }
	.border-green{ border: 2px solid var(--color-green); }
	.border-yellow{ border: 2px solid var(--color-yellow); }
	.border-red{ border: 2px solid var(--color-red); }
	.border-blue{ border: 2px solid var(--color-blue); }
	.border-purple{ border: 2px solid var(--color-purple); }
	.border-orange{ border: 2px solid var(--color-orange); }
	.border-brown{ border: 2px solid var(--color-brown); }
	.border-bottom-pink{ border-bottom: 1px solid var(--color-dim-pink); }

	.text-shadow{ text-shadow: 1px 1px 1px rgba(255,255,255,0.6); }

	a:link,a:active,a:visited,a:hover{ 
		font-family: var(--font-montserrat);
		color: var(--color-pink); 
		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 64px 0px rgba(0,0,0,0.09);
		-moz-box-shadow: 0px 0px 64px 0px rgba(0,0,0,0.09);
		box-shadow: 0px 0px 64px 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; }

	.input, .textarea{
		font-family: var(--font-montserrat);
		font-weight: var(--font-weight-regular);
		font-size: var(--font-m);
		background-color: #FFF;
		border: 0px;
		padding: 22px;
		color: var(--color-pink);
		width: 100%;
		-webkit-box-shadow: 0px 0px 12px 0px rgba(0,0,0,0.12);
		-moz-box-shadow: 	0px 0px 12px 0px rgba(0,0,0,0.12);
		box-shadow: 		0px 0px 12px 0px rgba(0,0,0,0.12);
	}

	.submit{
		font-family: var(--font-montserrat);
		font-weight: var(--font-weight-semibold);
		font-size: var(--font-n);
		background-color: var(--color-pink);
		text-transform: uppercase; 
		letter-spacing: 0.070em; 
		border: 0px;
		color: #FFF;
		padding: var(--margin-s) var(--margin-m);
		text-align: center;
		width: auto;
	}

	.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-xxs{ padding: var(--margin-xxs); }
	.padding-xs{ padding: var(--margin-xs); }
	.padding-s{ padding: var(--margin-s); }
	.padding-m{ padding: var(--margin-m); }
	.padding-l{ padding: var(--margin-l); }
	.padding-xl{ padding: var(--margin-xl); }

	.padding-bottom-fixed-s{ padding-bottom: var(--margin-fixed-s); }
	.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-bottom-mobile-menu{ padding-bottom: 32px; }

	.padding-menu{ padding-left: 5vw; }
	.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-xxl{ padding-top: var(--margin-xxl); }

	.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%;
		border: 1px solid #222;
		display: inline-block;
		font-weight: var(--font-weight-light);
		font-size: var(--font-xl);
		padding-top: 17px;
		text-align: center;
		/* -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=80)";
		 filter: alpha(opacity=80);
		 -moz-opacity: 0.8;
		 -khtml-opacity: 0.8;
		 opacity: 0.8;*/
	}

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


	/* . 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; }
	.content-centered-left{ display: flex; justify-content: left; align-items: center; }
	.content-centered-right{ display: flex; justify-content: right; align-items: center; }
	
	.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); }

	ul{ list-style-type: circle; margin: 0; padding: 0; }


	
