/*
// <uniquifier>: Use a unique and descriptive class name
// <weight>: Use a value from 300 to 700

.quicksand-<uniquifier> {
  font-family: "Quicksand", sans-serif;
  font-optical-sizing: auto;
  font-weight: <weight>;
  font-style: normal;
}
*/


html {
	font: 16px/1.5em "Quicksand", sans-serif;
	font-weight: 400;
	-webkit-text-size-adjust: 100%;
}

h1, h2, h3, h4, h5, h6, p {
	margin: 0;
	padding: 0;
}

h1 {
	font-size: 2.1rem;
	font-weight: 700;
	line-height: 1.2em;
	padding-left: .3rem;
	padding-right: .3rem;
	padding-bottom: var(--spacing-md);
}

@media only screen and (min-width: 450px) {
	h1 {
		font-size: 2.5rem;
		line-height: 1.15em;
	}
}

@media only screen and (min-width: 800px) {
	h1 {
		font-size: 3.6rem;
		line-height: 1.1em;
	}
}

@media only screen and (min-width: 1024px) {
	h1 {
		font-size: 4.5rem;
	}
}

h2 {
	font-size: 1.6rem;
	font-weight: 700;
	line-height: 1.2em;
	padding-left: .3rem;
	padding-right: .3rem;
	padding-bottom: var(--spacing-sm);
}

@media only screen and (min-width: 450px) {
	h2 {
/*		font-size: 2.5rem;*/
/*		line-height: 1.15em;*/
	}
}

@media only screen and (min-width: 800px) {
	h2 {
/*		font-size: 3.6rem;*/
/*		line-height: 1.1em;*/
	}
}

@media only screen and (min-width: 1024px) {
	h2 {
/*		font-size: 4.5rem;*/
	}
}

h3 {
	font-size: 1.2rem;
	font-weight: 700;
	line-height: 1.2em;
	padding-left: .3rem;
	padding-right: .3rem;
	padding-bottom: var(--spacing-sm);
}

@media only screen and (min-width: 450px) {
	h3 {
/*		font-size: 2.5rem;*/
/*		line-height: 1.15em;*/
	}
}

@media only screen and (min-width: 800px) {
	h3 {
/*		font-size: 3.6rem;*/
/*		line-height: 1.1em;*/
	}
}

@media only screen and (min-width: 1024px) {
	h3 {
/*		font-size: 4.5rem;*/
	}
}


p {
	max-width: 34em;
	padding-left: .3rem;
	padding-right: .3rem;
	padding-bottom: var(--spacing-md);
}

p.large {
	font-size: 1.2rem;
	line-height: 1.4em;
}
@media only screen and (min-width: 450px) {
	p.large {
		font-size: 1.3rem;
	}
}
@media only screen and (min-width: 800px) {
	p.large {
		font-size: 1.5rem;
	}
}
@media only screen and (min-width: 1024px) {
	p.large {
		font-size: 1.8rem;
		line-height: 1.3em;
	}
}


p:first-child {
	padding-top: 0;
}

p:last-child {
	padding-bottom: 0;
}


blockquote .quote,
blockquote .name,
blockquote .role, {
	padding-left: .3rem;
	padding-right: .3rem;
}

blockquote .quote {
	font-size: 1.1rem;
	line-height: 1.4em;
	position: relative;
}
@media only screen and (min-width: 450px) {
	blockquote .quote {
		font-size: 1.15rem;
	}
}
@media only screen and (min-width: 800px) {
	blockquote .quote {
		font-size: 1.25rem;
	}
}

@media only screen and (min-width: 1024px) {
	blockquote .quote {
		font-size: 1.3rem;
	}
}



blockquote .name {
	font-weight: 700;
	font-size: 1.1rem;
}
@media only screen and (min-width: 1024px) {
	blockquote .name {
		font-size: 1.2rem;
	}
}