@charset "UTF-8";
/* CSS Document */

.head {
	display: flex;
}
.headshot {
	width: 45%;
	margin: 3% 4% 3% 0;
}
.headshot img {
	width: 100%;
}

h1 {
	font-family: "Relation One", cursive;
	font-size: 2em;
	line-height: 1.35em;
}
.intro p {
	font-size: 1.25em;
	font-weight: bold;
}
.intro button{
	background-color: #AC45AD;
	font-family: "Quasimoda", sans-serif;
	font-weight: bold;
	padding: 3%;
	margin: 2% 0;
}
.intro a {
	font-size: 0.85em;
	text-decoration: none;
	color: #001626;
}
h2, h3, h4 {
	font-size: 1.5em;
	line-height: 0.75em;
	padding: 0;
	margin: 4% 1%;
}
[class*="ab-"] ul {
	list-style: square;
	padding-top: 2%;
	padding-bottom: 2%;
	margin: 0;
	max-width: 400px;
	line-height: 1.5em;
}
.ab-1 {
	background-color: #abede7;
	padding: 2%;
}
.ab-1 img {
	width: 80%;
}
.ab-2 {
	background-color: #e1b6e2;
	padding: 2%;
}
.ab-3 {
	background-color: #b3b7e6;
	padding: 2%;
}
.photos {
	display: flex;
}
.photos img {
	width: 95%;
	margin: 4% 0 0 0;
	border: thick solid #FEF5FF;
}
.cap {
	margin: 1% 1% 3% 1%;
}

@media (min-width: 581px) and (max-width: 800px) {
	.headshot {
		width: 35%;
		margin: 3% 4% 3% 0;
	}
	.headshot img {
		width: 90%;
	}

	h1 {
		font-family: "Relation One", cursive;
		font-size: 2.25em;
		line-height: 1.35em;
	}
	.intro p {
		font-size: 1.5em;
		font-weight: bold;
	}
	.intro a {
		font-size: 1.25em;
	}
	h2, h3, h4 {
		font-size: 1.75em;
		line-height: 0.75em;
		padding: 0;
		margin: 4% 1%;
	}
	[class*="ab-"] ul {
		font-size: 1.15em;
		max-width: 600px;
		line-height: 1.725em;
	}
	.ab-1 img {
		width: 50%;
	}
	
}
@media (min-width: 801px) and (max-width: 1000px) {
	.headshot {
		width: 35%;
		margin: 3% 4% 3% 0;
	}
	.headshot img {
		width: 90%;
	}

	h1 {
		font-family: "Relation One", cursive;
		font-size: 2.5em;
		line-height: 1.35em;
	}
	.intro p {
		font-size: 1.75em;
		font-weight: bold;
	}
	.intro a {
		font-size: 1.5em;
	}
	h2, h3, h4 {
		font-size: 2em;
		line-height: 0.75em;
		padding: 0;
		margin: 2% 1%;
	}
	[class*="ab-"] ul {
		font-size: 1.25em;
		max-width: 700px;
		line-height: 1.875em;
	}
	.ab-1 img {
		width: 50%;
	}
	.cap {
		font-size: 1.25em;
	}
	
}
@media (min-width: 1001px) and (max-width: 1300px) {
	[class*="row-"] {
		display: flex;
	}
	[class*="ab-"]{
		width: 50%;
	}
	.kids {
		width: 50%;
		padding: 2%;
	}
	.headshot {
		width: 30%;
		margin: 3% 4% 3% 0;
	}
	.headshot img {
		width: 90%;
	}

	h1 {
		font-family: "Relation One", cursive;
		font-size: 3em;
		line-height: 1.35em;
	}
	.intro p {
		font-size: 2em;
		font-weight: bold;
	}
	.intro a {
		font-size: 1.75em;
	}
	h2, h3, h4 {
		font-size: 2.25em;
		line-height: 0.75em;
		padding: 0;
		margin: 2% 1%;
	}
	[class*="ab-"] ul {
		font-size: 1.45em;
		max-width: 700px;
		line-height: 2.175em;
	}
	.ab-1 img { 
		width: 70%;
	}
	.cap {
		font-size: 1.35em;
	}
}

@media (min-width: 1301px) {
	[class*="row-"] {
		display: flex;
	}
	[class*="ab-"]{
		width: 50%;
	}
	.kids {
		width: 50%;
		padding: 2%;
	}
	.headshot {
		width: 30%;
		margin: 3% 4% 3% 0;
	}
	.headshot img {
		width: 90%;
	}

	h1 {
		font-family: "Relation One", cursive;
		font-size: 3.25em;
		line-height: 1.35em;
	}
	.intro p {
		font-size: 2.25em;
		font-weight: bold;
	}
	.intro a {
		font-size: 2em;
	}
	h2, h3, h4 {
		font-size: 2.5em;
		line-height: 0.75em;
		padding: 0;
		margin: 2% 1%;
	}
	[class*="ab-"] ul {
		font-size: 1.5em;
		max-width: 700px;
		line-height: 2.25em;
	}
	.ab-1 img {
		width: 50%;
	}
	.cap {
		font-size: 1.5em;
	}
	
}