/* CSS Document */

/* Text Styles */

html { scroll-behavior: smooth; } 

body {
	margin:0;
	font-size:14px;
	color:#1E211E;
}

.inactive {
	display:none !important;
}

button, input[type="submit"], input[type="reset"] {
	background: none;
	color: inherit;
	border: none;
	padding: 0;
	font: inherit;
	cursor: pointer;
	outline: inherit;
}

h1, h2, a.button, button.button {
	font-family: romana-tw, serif;
	font-weight: 400;
	font-style: normal;
	margin:0;
}

h3, label, span.label {
	font-family: futura-pt, sans-serif;
	font-weight: 600;
	font-style: normal;
	font-size:0.8em;
	letter-spacing:2px;
	text-transform:uppercase;
	margin:0;
}

h3 {
	margin:0 0 8px;
}

p, span.p, a, span.email {
	font-family: amster, serif;
	font-weight: 300;
	margin:0;
}

p.error {
	font-size:0.8em;
	color:#DD2910;
	margin:0 0 4px;
}

.subtle {
	font-style:italic;
	/*text-transform:lowercase;*/
}

.small {
	font-size:0.8em;
}

.light, .light {
	color:#888888;
}

.bold {
	font-weight:700;
}

/* Buttons and CTAs */

a.button.primary, button.button.primary {
	background:#D7E6DD;
	color:#1E211E;
}

a.button.active, button.button.active {
	background:#3CB4E0;
	color:#ffffff;
}

a.button, button.button {
	display:block;
	min-width:128px;
	text-align:center;
	padding:16px 8px;
	margin:8px 0;
	border-radius:4px;
	background:#f2f2f2;
	color:#000000;
	text-decoration:none;
	transition:background 0.2s, color 0.2s;
	cursor:pointer;
}

a.link {
	color:#1793C0;
	text-decoration:underline;
}

/* Navigation */

.nav-menu {
	position:fixed;
	display:flex;
	flex-direction:column;
	justify-content:center;
	top:0;
	left:0;
	height:100vh;
	width:40px;
}

/* Utilties */

.responsive.stretch {
	display:flex;
	flex-direction:column;
	align-items:center;
}

div.content {
	display:flex;
	flex-direction:column;
	align-items:stretch;
	justify-content:space-between;
	max-width:600px;
	margin:auto;
	padding:32px 16px;
}

div.row {
	display:flex;
	flex-direction:row;
	justify-content:stretch;
	max-width:600px;
	margin:8px 0;
}

div.row.center {
	justify-content:center;
}

div.row.header {
	margin:32px 0 8px;
}

div.column.center {
	align-items:center;
	text-align:center;
}

div.column.middle {
	justify-content:center;
}

div.column {
	display:flex;
	flex-direction:column;
	/*flex:1;*/
}

/* Special Sections */

div.section.hero .content {
	min-height:calc(100vh - 64px);
}

.hero-container {
	background:#D7E6DD;
	border-radius:50%;
	width:90vw;
	height:90vw;
	max-width:500px;
	max-height:500px;
	text-align:center;
	margin:32px 0;
}

.hero-container img {
	height:110%;
	width:81%;
	transform:translate(2%, -5%);
}

div.section.green {
	/*background:#D7E6DD;*/
	background:#BFD6C8;
}

div.section.sage {
	background:#D7E6DD;
}

div.section.focusbox {
	min-height:100vh;
}

div.section.focusbox .content {
}

div.section.focusbox .row {
	height:50vh;
	margin:25vh 0;
}

div.section.footer .row {
	justify-content:space-around;
}

div.section.footer .column:nth-child(2) .flower .petal {
	fill:#1793C0;
}

div.section.footer .column:nth-child(3) .flower .petal {
	fill:#FFA943;
}

div.section.footer .column:nth-child(4) .flower .petal {
	fill:#6164AB;
}

div.section.footer .column:nth-child(5) .flower .petal {
	fill:#9CC125;
}

div.section.footer .column:nth-child(6) .flower .petal {
	fill:#E44972;
}

.bounce {
	animation-name:bounce;
	animation-duration:1s;
	animation-iteration-count:infinite;
	animation-direction:alternate;
}

@keyframes bounce {
	from {
		transform:translateY(0px);
	}
	to {
		transform:translateY(-10px);
	}
}

.flower svg {
	width:24px;
	margin:0 8px;
	animation-name:spin;
	animation-duration:10s;
	animation-iteration-count:infinite;
	animation-timing-function:linear;
}

@keyframes spin {
	from {
		transform:rotate(0deg);
	}
	to {
		transform:rotate(360deg);
	}
}

.flower .petal {
	fill:#f05b22;
}
.flower .center {
	fill:#dfab26;
}

@media (min-width: 600px) {
	.responsive.stretch {
		flex-direction:row;
	}
}