@import url('https://fonts.googleapis.com/css2?family=Archivo+Black&family=Archivo:ital,wght@0,400;0,500;0,600;0,700;1,400;1,500;1,600;1,700&display=swap');
			/* @import statements need to be the _first_ items in a CSS file… */

			html {font-size: 100%;}

			body, p {font-family: "Archivo", sans-serif; color: #111;}

			h1 {font-family: "Archivo Black", sans-serif; font-weight: normal; letter-spacing: -2px}

			h2, h3, h4, h5, h6 {font-family: "Archivo", sans-serif; font-weight: 800;}

			h1 {font-size: 72px; margin: 50px 0;}
			h2 {font-size: 54px; margin: 15px 0 15px 0; letter-spacing: -3px}
			h3 {font-size: 48px; margin: 20px 0 15px 0;}
			h4 {font-size: 36px; margin: 20px 0 15px 0;}
			h5 {font-size: 30px; margin: 20px 0 15px 0;}
			h6 {font-size: 22px; margin: 20px 0 5px 0; font-weight: 600; text-transform: uppercase;}
			p  {font-size: 18px; margin: 0 0 30px 0; line-height: 24px;}
			ul {font-size: 16px; margin: 0 0 30px 0; line-height: 20px;}
			a.button {font-size: 20px;}

			.small { font-size: 18px; line-height: 22px;}

			/* Mobile Typography */

			@media only screen and (max-width: 750px){
				h1 {font-size: 45px; margin: 50px 0;}
				h2 {font-size: 28px; margin: 5px 0 5px 0; letter-spacing: -1px}
				h3 {font-size: 26px; margin: 20px 0 15px 0;}
				h4 {font-size: 24px; margin: 20px 0 15px 0;}
				h5 {font-size: 20px; margin: 20px 0 15px 0;}
				h6 {font-size: 18px; margin: 20px 0 5px 0; font-weight: 600; text-transform: uppercase;}
				p  {font-size: 14px; margin: 0 0 30px 0; line-height: 18px;}
				ul {font-size: 12px; margin: 0 0 30px 0; line-height: 20px;}
				a.button {font-size: 16px;}
			}

			/* Text colors */
			.primary, .primary * {color: #5551FF;}

			/* Links */
			a.lien {
				position: relative;
				color: #5551FF;
				text-decoration: underline;
				transition: all 0.2s ease-in-out;
				transform: none;
			}

			a.lien:hover {
				font-style: italic;
			}

			/* Buttons */

			a.button {
				display: flex;
				width: fit-content;
				align-items: center;
				font-weight: 600;
				padding: 15px 30px;
				border:3px solid #111;
				border-radius: 8px;
				color: #111 !important;
				text-decoration: none;
				background-color: #fff;
				margin-bottom: 30px;
				-moz-transition: all .2s ease-in-out;
				-o-transition: all .2s ease-in-out;
				-webkit-transition: all .2s ease-in-out;
				transition: all .2s ease-in-out;
			}

			a.button * {
				color: #111 !important;
			}

			a.button:hover * {
				color: #fff !important;
			}

			a.button:hover {
				border: 3px solid #111;
				border-radius: 100px;
				background-color: #5551FF;
				color: #fff !important;
			}

			a.button:active {
				border: 3px solid #5551FF;
			}

			/* Categories */

			a.category {
				position: relative;
				color: #111;
				text-decoration: none;
				text-transform: uppercase;
				/* transition: all .2s ease-in-out; */
			}

			a.category:hover {
				color: #fff;
				transition: all .2s ease-in-out;
			}

			a.category:active {
				color: #5551FF;
				transition: all 0s ease-in-out;
			}

			a.category::before {
				content: "";
				position: absolute;
				width: calc(100%);
				height: 3px;
				bottom: 0;
				left: 0;
				background-color: #5551FF;
				visibility: visible;
				transform: scaleX(1) translateY(0px);
				transition: all .2s ease-in-out;
				z-index: -1;
			}

			a.category:hover::before {
				background-color: #5551FF;
				height: 110%;
			}

			a.category:active::before {
				background-color: #111;
				transition: all 0s ease-in-out;
			}

			ion-icon {
				cursor: pointer;
			}

			/* Separator */

			hr {
				border: 1px solid #fff;
			}