/***********************************

GLOBALS

***********************************/
@import url('https://fonts.googleapis.com/css?family=Nunito:200,200i,300,400,600,700,800');
@import url('https://fonts.googleapis.com/css?family=Indie+Flower');
@import url('https://fonts.googleapis.com/css?family=Open+Sans');


body {
	font: 300 16px 'Nunito', 'Open Sans', sans-serif;
	line-height: 25px; 
	color: #333333;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	margin: 0;
	padding: 0;
	background-color: #F7F7F7;
}

.black { color: #333333; }
.white { color: #ffffff; }

p { font: 300 16px 'Nunito'; line-height: 25px; margin-top: 20px; }
a { text-decoration: none; }
a:visited { text-decoration: none; }

.body-text-small { font: 300 15px 'Nunito'; color: #333333; }

.italic { font-style: italic; }

.center { text-align: center; }


/***********************************

LAYOUT

***********************************/

.flex-container {
	display: flex;
}

.flex-space-between {
	display: flex;
	justify-content: space-between;
	align-items: center;
}

.flex-space-between-top {
	display: flex;
	justify-content: space-between;
	align-items: flex-start;	
}

.flex-row {	flex-direction: row; }
.flex-column { flex-direction: column; }

.align-center { align-items: center; }

.align-top { align-self: flex-start; }
.align-bottom { align-self: flex-end; }

.margin60 { margin-top: 60px; }
.margin50 { margin-top: 50px; }
.margin40 { margin-top: 40px; }
.margin30 { margin-top: 30px; }
.margin20 { margin-top: 20px; }
.margin5 { margin-top: 5px; }


.main-content { 
	max-width: 920px; 
	margin: 0 auto;
}

.quote-container {
	margin-top: 10px;
	display: flex;
	align-items: center; 
}

.centered-content { margin: 20px auto; }


/***********************************

HEADER & FOOTER

***********************************/

#header { 
	background-color: #4CC7AA;
	width: 100%;
	padding: 40px 0 20px;
}

.header-content {
	display: flex;
	justify-content: space-between;
	align-items: center;
}

.logo-icon { width: 245px; }
.logo-text { width: 353px; }
.tagline {	font: 300 18px 'Nunito'; color: white; }

.button-white-border {
	border: solid 1px white;
	border-radius: 4px;
	padding: 12px 20px;
	color: white;
}
.header-button-text {
	text-transform: uppercase;
	font: 600 16px 'Nunito', 'Open Sans', sans-serif;
}


.tagline {
	margin-top: 30px;
	font: 400 28px 'Indie Flower', 'Open Sans', sans-serif;
	display: flex;
	justify-content: flex-end;
}

#footer {
	margin: 50px 0 0 0;
	/* padding: 70px 0 100px; */
 	width: 100%;
}

@media (max-width: 480px) {
	#header { padding: 20px; text-align: left; }
	.header-content { flex-direction: column; align-items: flex-start; }
	.logo-icon {margin-bottom: 30px; }
}


/***********************************

PROFILE

***********************************/

#profile { flex-direction: row; }

.profile-container { padding: 20px 0; background-color: #ffffff; }

.profile-pic { width: 80px; }

.profile-content { 
	margin-left: 20px;
	margin-right: 20px;
	max-width: 600px;
}

.profile-intro {
	font: 300 14px 'Nunito', 'Open Sans', sans-serif;
	line-height: 21px; 
	color: #333333;
}

.title { font: 700 13px 'Nunito', 'Open Sans', sans-serif; color: #9B9B9B; }
.name { font: 700 18px 'Nunito', 'Open Sans', sans-serif; color: #333333; }

@media (max-width: 480px) {
	#profile { flex-direction: column; }
	.profile-pic { margin-left: 20px; }
}

/***********************************

PODCASTS

***********************************/

.podcast-container {
	max-width: 920px;
	min-height: 200px;
	border: solid 1px #D9D9D9;
	border-radius: 10px;
	background-color: #ffffff;
	margin: 30px auto 0;
	padding: 30px;
}

.podcast-heading {
	font: 400 14px 'Nunito', 'Open Sans', sans-serif;
	color: #9B9B9B; 
	text-transform: uppercase;
}

.podcast-episode-title {
	font: 600 20px 'Nunito', 'Open Sans', sans-serif;
	color: #4D4D4D;
	margin-top: 7px;
}

.podcast-episode-description {
	font: 300 16px 'Nunito', 'Open Sans', sans-serif;
	color: #4D4D4D;
	margin-top: 5px;
}

.podcast-embed { margin-top: 20px; }

.downloadItem { 
	margin-left: 40px;
	max-width: 200px;
}

.downloadLink {
	text-decoration: none;
	font-size: 13px;
	line-height: 18px;
	color: #4CC7AA;
}

@media (max-width: 480px) {
	.podcast-container { margin: 10px; }
}
