/* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * *
 *
 * main.css
 * =========================================================================
 *
 * Table of Contents
 * -----------------
 *
 * + General Styles
 * + Fonts/Colors
 * + Navigation
 * + Header
 * + Footer
 * + 
 * + Shame (Should always be the last item in stylesheet)
 *
 * Read more:
 * - http://www.sitepoint.com/architecture-sass-project/
 * - https://css-tricks.com/sass-style-guide/
 *
 * @TODO: Update TOC as necessary.
 *
 * @BUG:
 *
 * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * */

/*-Grid Sizes--------------------------------------------------------------*//*
Breakpoint	Class    Dimensions
X-small     None    <576px
Small       sm      ≥576px
Medium  	md  	≥768px
Large	    lg	    ≥992px
X-large 	xl  	≥1200px
XX-large	xxl     ≥1400px

--- Containers ---
					X-Small Small   Medium  Large   X-Large XX-Large
					<576px  ≥576px  ≥768px  ≥992px  ≥1200px ≥1400px
.container          100%	540px	720px	960px	1140px	1320px
.container-sm       100%	540px	720px	960px	1140px	1320px
.container-md       100%	100%	720px	960px	1140px	1320px
.container-lg       100%	100%	100%	960px	1140px	1320px
.container-xl       100%	100%	100%	100%	1140px	1320px
.container-xxl	    100%	100%	100%	100%	100%	1320px
.container-fluid    100%	100%	100%	100%	100%	100%

--- Breakpoints ---
$grid-breakpoints: (
	xs: 0,
	sm: 576px,
	md: 768px,
	lg: 992px,
	xl: 1200px,
	xxl: 1400px
);
scss/_variables.scss

$container-max-widths: (
	sm: 540px,
	md: 720px,
	lg: 960px,
	xl: 1140px,
	xxl: 1320px
);
// X-Small devices (portrait phones, less than 576px)
// No media query for `xs` since this is the default in Bootstrap

// Small devices (landscape phones, 576px and up)
@media (min-width: 576px) { ... }
@media (max-width: 575.98px) { ... }
// `sm` applies to x-small devices (portrait phones, less than 576px)

// Medium devices (tablets, 768px and up)
@media (min-width: 768px) { ... }
@media (max-width: 767.98px) { ... }
// `md` applies to small devices (landscape phones, less than 768px)

// Large devices (desktops, 992px and up)
@media (min-width: 992px) { ... }
@media (max-width: 991.98px) { ... }
// `lg` applies to medium devices (tablets, less than 992px)

// X-Large devices (large desktops, 1200px and up)
@media (min-width: 1200px) { ... }
@media (max-width: 1199.98px) { ... }
// `xl` applies to large devices (desktops, less than 1200px)

// XX-Large devices (larger desktops, 1400px and up)
@media (min-width: 1400px) { ... }
@media (max-width: 1399.98px) { ... }
// `xxl` applies to x-large devices (large desktops, less than 1400px)

/*-Mobile----------------------------*/
@media (max-width: 767px) {
	.show-desktop { display: none !important; }
	.show-mobile { display: inherit !important; }
}
/*-Desktop----------------------------*/
@media (min-width: 768px) {
	.show-desktop { display: inherit !important; }
	.show-mobile { display: none !important; }
}
/*
/*--------------------------------------------------------------Grid Sizes-*/

/*-General Styles----------------------------------------------------------*/
html, body {
	overflow-x: hidden;
	min-width: 320px;
}
section {
	clear: both;
	padding: 2.5rem 0;
}

#ot-sdk-cookie-policy, #ot-sdk-btn { display: none; }
/*----------------------------------------------------------General Styles-*/

/*-Fonts/Colors------------------------------------------------------------*/
:root {
	--purple-light: #C04CFF;
	--purple-dark:	#310E6E;
	--purple-hqy:	#4F2984;
	--primary-black: #310E6E;
}
html, body {
	font-family: "neue-haas-grotesk-text", sans-serif;
}
a, ol, ul, p {
	font-family: "neue-haas-grotesk-text", sans-serif;
}

h1, h2, h3, h4, h5, h6 {
	text-transform: none;
	font-family: "neue-haas-grotesk-display", sans-serif;
	font-weight: 500;
}

.btn-sm, .btn-lg,
button, .btn {
	text-transform: none;
	font-family: "neue-haas-grotesk-text", sans-serif;
	font-weight: 500;
}
.alt,
.flourish {
	color: var(--purple-light);
}
.flourish {
	font-family: "Libre Baskerville";
	font-style: italic;
	font-weight: 400;
	letter-spacing: -0.96px;
}

.btn-round { border-radius: 28px; }
.btn-sm { padding: 14px 32px; }

.btn-white {
	border: none;
	background-color: #FFF;
	color: var(--purple-hqy);
	text-decoration: none;
	text-transform: none;
	font-family: "neue-haas-grotesk-text", sans-serif;
}
.btn-purple {
	border: none;
	background-color: var(--purple-hqy);
	color: #FFF;
	text-decoration: none;
	text-transform: none;
	font-family: "neue-haas-grotesk-text", sans-serif;
	
}
.btn-white:hover,
.btn-purple-outline:hover,
.btn-purple:hover {
	font-family: "neue-haas-grotesk-text", sans-serif;
	color: #FFF;
	background-color: var(--purple-light);
	text-decoration: none;
	text-transform: none;
}
.btn-purple-outline {
	background-color: transparent;
	border: solid 2px var(--purple-hqy);
	color: var(--purple-hqy);
	text-decoration: none;
	text-transform: none;
	font-family: "neue-haas-grotesk-text", sans-serif;
	
}
/*-Desktop----------------------------*/
@media (min-width: 992px) {
	h1, h2, h3, h4, h5, h6 {
		line-height: 110%;
		letter-spacing: -1px;
	}
	h1 { font-size: 3.125rem; /*50px*/}
	h2 { font-size: 2.875rem; /*46px*/}
}
/*-Mobile-----------------------------*/
@media (max-width: 991px) {
	h1 { font-size: 2rem; /*36px*/}
	h2 { font-size: 1.5rem; /*25px*/}
}
/*------------------------------------------------------------Fonts/Colors-*/

/*-Footer-----------------------------------------------------------------*/
#footer-retail a,
#footer-retail {
	color: #fff;
	font-size: 0.625rem; /*10px*/
}
/*-Desktop----------------------------*/
/*-Mobile-----------------------------*/
@media (max-width: 575px) {
	#legal-copy .row {
		margin-top: 2.5rem;
		display: flex;
		flex-direction: column;
		align-items: flex-start;
		gap: 1.5rem; /*24px*/
		align-self: stretch;
	}
}
/*-----------------------------------------------------------------Footer-*/