/* montserrat-regular - latin */
@font-face {
	font-family: 'Montserrat';
	font-style: normal;
	font-weight: 400;
	src: local(''), url('fonts/montserrat-v23-latin-regular.woff') format('woff');
}
/* montserrat-600 - latin */
@font-face {
	font-family: 'Montserrat';
	font-style: normal;
	font-weight: 600;
	src: local(''), url('fonts/montserrat-v23-latin-600.woff') format('woff');
}
/* comfortaa-300 - latin */
@font-face {
	font-family: 'Comfortaa';
	font-style: normal;
	font-weight: 300;
	src: local(''), url('fonts/comfortaa-v37-latin-300.woff') format('woff');
}
/* comfortaa-700 - latin */
@font-face {
	font-family: 'Comfortaa';
	font-style: normal;
	font-weight: 700;
	src: local(''), url('fonts/comfortaa-v37-latin-700.woff') format('woff');
}

/* variables ----------------------------------------------------------------*/
:root {
	--background-color: white;
	--text-color: #4e4e4e;

	--header-height: 2.6em;

	--color-1-dark: hsl(192, 35%, 28%);
	--color-1: hsl(193, 71%, 44%);
	--color-1-hover: hsl(193, 61%, 48%);
	--color-1-light: rgb(133, 228, 255);
	--color-1-extra-light: hsl(193, 100%, 94%);

	--color-2-dark: hsl(140, 34%, 27%);
	--color-2: hsl(142, 67%, 35%);
	--color-2-hover: hsl(142, 56%, 54%);
	--color-2-light: hsl(142, 100%, 83%);
	--color-2-extra-light: hsl(143, 100%, 95%);

	--color-3-dark: hsl(42, 37%, 28%);
	--color-3: hsl(50, 96%, 47%);
	--color-3-hover: hsl(50, 76%, 60%);
	--color-3-light: hsl(50, 100%, 78%);
	--color-3-extra-light: hsl(50, 100%, 94%);

	--color-4-dark: hsl(21, 38%, 30%);
	--color-4: hsl(20, 68%, 50%);
	--color-4-hover: hsl(20, 83%, 55%);
	--color-4-light: hsl(20, 100%, 79%);
	--color-4-extra-light: hsl(20, 100%, 94%);

	--color-5-dark: hsl(252, 22%, 35%);
	--color-5: hsl(252, 59%, 65%);
	--color-5-hover: hsl(252, 92%, 75%);
	--color-5-light: hsl(252, 100%, 85%);
	--color-5-extra-light: hsl(252, 100%, 95%);

	--color-6-dark: hsl(335, 22%, 35%);
	--color-6: hsl(335, 59%, 65%);
	--color-6-hover: hsl(335, 92%, 75%);
	--color-6-light: hsl(335, 100%, 85%);
	--color-6-extra-light: hsl(335, 100%, 95%);
}	

/* core ---------------------------------------------------------------------*/

body {
	font-family: 'Montserrat', sans-serif;
	font-weight: 400;
	position: relative;
	background-color: var(--background-color);
	color: var(--text-color);
	text-size-adjust: none;
	font-size: 1.1em;
	margin: 0;
	line-height: 1.6em;
}

@media (max-width: 27cm) {
	body {
		font-size: 2.2em;
	}
}



h1, h2, h3 {
	font-family: 'Comfortaa', cursive;
	font-weight: 700;
}

h1 {
	font-size: 1.6em;
}

h2 {
	font-size: 1.2em;
}

h3 {
	font-size: 1em;
}

b, em {
	font-weight: 600;
	font-style: normal;
	color: var(--color-1)
}

strong {
	font-weight: 600;
	font-style: normal;
	color: rgb(194, 0, 0);
	background-color: rgb(221, 180, 105);
}

/* general ------------------------------------------------------------------*/

.button {
	color: white;
	border-radius: 0.2em;
	padding: 0.5em 1em;
	text-decoration: none;
	background-color: var(--color-1);
	display: flex;
	flex-direction: row;
	align-items: center;
	user-select: none;
	justify-content: space-around;
}

.button:hover {
	background-color: var(--color-1-hover);
}

.button-icon {
	width: 2em;
	height: 2em;
	margin-right: .5em;
}

.video-wrapper-16-9 {
	align-self: stretch;
	position: relative;
	padding-bottom: 56.25%;
	height: 0;
	background-color: black;
}

.video-wrapper-16-9 iframe, .video-wrapper-16-9 img{
	width: 100%;
	height: 100%;
	position: absolute;
	top: 0;
	left: 0;
}

blockquote {
	border-left: rgb(225, 237, 241) 1em solid;
	margin-left: 0;
	padding-left: 2em;
}

blockquote .attribution {
	font-size: 0.8em;
	font-style: italic;
}

/* color blocks -------------------------------------------------------------*/
.color-1-text {
	color: var(--color-1-dark);
}
.color-1-light-background {
	background-color: var(--color-1-light);
}
.color-1-extra-light-background {
	background-color: var(--color-1-extra-light);
}
.color-1-border {
	border-color: var(--color-1-light);
}
.color-1-background {
	background-color: var(--color-1);
}
.color-1-light-background {
	background-color: var(--color-1-light);
}

.color-1-background:hover {
	background-color: var(--color-1-hover);
}

.color-2-text {
	color: var(--color-2-dark);
}
.color-2-light-background {
	background-color: var(--color-2-light);
}
.color-2-extra-light-background {
	background-color: var(--color-2-extra-light);
}
.color-2-border {
	border-color: var(--color-2-light);
}
.color-2-background {
	background-color: var(--color-2);
}
.color-2-background:hover {
	background-color: var(--color-2-hover);
}

.color-3-text {
	color: var(--color-3-dark);
}
.color-3-light-background {
	background-color: var(--color-3-light);
}
.color-3-extra-light-background {
	background-color: var(--color-3-extra-light);
}
.color-3-border {
	border-color: var(--color-3-light);
}
.color-3-background {
	background-color: var(--color-3);
}
.color-3-background:hover {
	background-color: var(--color-3-hover);
}

.color-4-text {
	color: var(--color-4-dark);
}
.color-4-light-background {
	background-color: var(--color-4-light);
}
.color-4-extra-light-background {
	background-color: var(--color-4-extra-light);
}
.color-4-border {
	border-color: var(--color-4-light);
}
.color-4-background {
	background-color: var(--color-4);
}
.color-4-background:hover {
	background-color: var(--color-4-hover);
}

.color-5-text {
	color: var(--color-5-dark);
}
.color-5-light-background {
	background-color: var(--color-5-light);
}
.color-5-extra-light-background {
	background-color: var(--color-5-extra-light);
}
.color-5-border {
	border-color: var(--color-5-light);
}
.color-5-background {
	background-color: var(--color-5);
}
.color-5-background:hover {
	background-color: var(--color-5-hover);
}

.color-6-text {
	color: var(--color-6-dark);
}
.color-6-light-background {
	background-color: var(--color-6-light);
}
.color-6-extra-light-background {
	background-color: var(--color-6-extra-light);
}
.color-6-border {
	border-color: var(--color-6-light);
}
.color-6-background {
	background-color: var(--color-6);
}
.color-6-background:hover {
	background-color: var(--color-6-hover);
}


/* home page ----------------------------------------------------------------*/


@media (max-width: 27cm) {
	.hero .info {
		font-size: 0.6em;
	}
}

.hero .bullets *~* {
	margin-left: 0.4em;
}

.what-is-section {
	display: flex;
	flex-direction: column;
	align-items: center;
	padding: 3em 0em;
	font-size: 1.15em;
	line-height: 1.5em;
}

.what-is-section .content {
	max-width: 900px;
	text-align: center;
}

.what-is-section h1 {
	color: var(--color-1);
	text-align: center;
}


/* product grid -------------------------------------------------------------------*/

.product-section {
	display: flex;
	flex-direction: column;
	align-items: center;
	padding: 0 0 2em 0;
}

.product-section-title {
	font-size: 1.92em;
	color: var(--color-1);
}

.product-section-content {
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	justify-content: center;
	max-width: 1200px;
}

.product {
	display: flex;
	flex-direction: column;
	border-width: 1em 1em 2.5em 1em;
	border-style: solid;
	max-width: 18em;
	min-width: 18em;
	margin: .5em;
	box-shadow: 0 0.1em 0.25em rgba(0, 0, 0, 0.2);
	border-radius: .5em;
}

.product-empty {
	background-color: rgb(243, 243, 243);
	max-width: 18em;
	min-width: 18em;
	margin: 0.5em;
	border: 1em solid white;
}

.product-header {
	display: flex;
	flex-direction: row;
	font-size: 1.4em;
	font-family: 'Comfortaa', cursive;
	font-weight: 700;
	height: 3em;
	padding: 1.5em 1em;
	border-radius: .25em .25em 0 0;
}

.product-content {
	display: flex;
	flex: 1;
	flex-direction: column;
	justify-content: space-between;
	padding: 1em;
	background-color: white;
	border-radius: 0 0 .25em .25em;
}

.product-description {
	font-size: 0.9em;
}

.product-footer {
	display: flex;
	flex-direction: row;
	align-items: baseline;
	justify-content: space-between;
	border-top: 1px solid lightgray;
	margin-top: 1em;
	padding-top: 1em;
}

.product-price {
	font-weight: 700;
}

@media (max-width: 27cm) {
	.product-section-content {
		max-width: initial;
		flex-direction: column;
		flex-wrap: nowrap;
	}
	.product {
		max-width: initial;
		min-width: initial;
		align-self: stretch;
		margin: 0;
		margin-top: 1em;
		border-width: 1.5em 1em;
	}
	.product-description {
		font-size: 1.1em;
	}
	.product-header {
		height: initial;
	}
}


/* footer -------------------------------------------------------------------*/

footer {
	display: flex;
	flex-direction: row;
	align-items: stretch;
	justify-content: center;
	height: 7em;
	padding-top: 2em;
	padding-bottom: 6em;
	background-color: #00536f;
	
}

@media (max-width: 27cm) {
	footer {
		height: auto;
		padding-top: 1em;
		padding-bottom: 2em;
	}
}

footer a {
	margin-top: 0.5em;
	height: 100%;
	border-radius: 0.5em;
	background-size: contain;
	background-position: center;
	height: 110px;
}

footer .bamba-img {
	background-image: url('img/BAMBA.png?version=5');
	flex: 0 1 240px;
	margin-right: 1em;
}

footer .mindfulness-network-img {
	background-image: url('img/MindfulnessNetwork.png?version=4');
	flex: 0 1 450px;
}

/* header -------------------------------------------------------------------*/
header {
	background: white;
	align-self: center;
	display: flex;
	flex-direction: column;
	padding-top: 1em;
	padding-bottom: 3em;
	box-shadow: 0 0 2em rgba(0, 0, 0, 0.1);
}

header .content {
	align-self: center;
	display: flex;
	flex-direction: column;
}

header .logo {
	width: 40em;
	align-self: center;
	margin-left: -5.7em;
}

header .tagline {
	align-self: flex-end;
	margin-top: -2.2em;
	font-weight: 300;
	color: var(--color-1);
	font-size: 1.2em;
}

@media (max-width: 27cm) {
	header {
		padding-bottom: 2em;
		padding-left: 1em;
		padding-right: 1em;
	}
	header .logo {
		width: 100%;
		margin-left: 0;
		margin-left: -1em;
	}
	header .tagline {
		align-self: flex-end;
		font-size: 3vw;
		margin-top: -7vw;
		margin-left: -1em;
	}
}

header .menu {
	display: flex;
	flex-direction: row;
}

header .menu-item {
	padding: 0 1em;
}

header .info {
	align-self: center;
	margin-top: -2em;
	display: flex;
	flex-direction: column;
}

header .info .subtitle {
	font-weight: 700;
} 

header .bullets {
	display: flex;
	flex-direction: row;
	align-self: center;
}


/* tables -------------------------------------------------------------------*/
table {
	border-collapse: collapse;
	width: 100%;
}
td, th {
	border: 1px solid #dddddd;
	padding: 0.6em 0.9em;
	text-align: left;
}

tr:nth-child(odd) {
	background-color: #f7f7f7;
}


/* articles -----------------------------------------------------------------*/

.page {
	display: flex;
	flex-direction: column;
	align-items: center;
	padding-bottom: 4em;
}

article {
	display: flex;
	flex-direction: row;
	align-items: flex-start;
	max-width: 1000px;
}

.article-content {
	display: flex;
	flex-direction: column;
	flex: 1 1 700px;
	padding-top: 1em;
}

@media (max-width: 27cm) {
	article {
		flex-direction: column;
		align-items: stretch;
	}

	.article-content {
		border-right: none;
		padding: 1em 1em;
	}
}

article h1 {
	color: var(--color-1);
	margin-top: 2em;
	margin-bottom: 0.5em;
}

article h2 {
	margin-top: 1.5em;
	margin-bottom: 0.3em;
	color: rgb(65, 65, 65);
}

article h4 {
	font-style: italic;
	font-weight: 700;
	color: slategray;
	margin: 0.5em 0 0 0;
	font-size: 1em;
}

article .content li {
	margin-bottom: 0.8em;
}

article p {
	margin-block-start: 0.5em;
	margin-block-end: 0.5em;
}

article ul {
	margin-block-start: 0.5em;
	margin-block-end: 0.5em;
}

article annotation {
	font-size: 0.8em;
	font-style: italic;
	text-align: center;
}

/* sidebar */
.sidebar {
	position: -webkit-sticky;
	position: sticky;
	top: var(--header-height);
	flex: 1 1 16em;
	padding: 1em 1em;
	display: flex;
	flex-direction: column;
}

.sidebar {
	font-size: 0.8em;
}

.sidebar h4 {
	margin-top: 0;
}

@media (max-width: 27cm) {
	.sidebar {
		font-size: 1.0em;
		position: initial;
		border-top: rgb(216, 216, 216) 1px solid;
		flex: 0 0 auto;
	}

	.sidebar p {
		font-size: 1em;
	}
}

/* side-bar ------------------------------------------------------------------*/
.side-bar {
	position: sticky;
	top: var(--header-height);
	margin-left: 2em;
	padding-top: 1em;
	max-width: 16em;
}

@media (max-width: 27cm) {
	.side-bar {
		max-width: initial;
		margin-left: 0em;
		font-size: 0.8em;
		position: fixed;
		padding: 0;
		left: 0;
		right: 0;
		bottom: 0;
		top: initial;
		background-color: var(--background-color);
		border-top: 1px solid rgb(196, 196, 196);
		box-shadow: 0 0 1em rgba(0,0,0,0.2);
	}
}

.apply-box {
	display: flex;
	flex-direction: column;
	border: 1px solid var(--color-1);
	padding: 1.5em 1em 1em 1em;
}

.apply-box .title {
	color: var(--color-1);
	font-size: 1.2em;
	margin: 0;
}

.apply-box .price {
	font-weight: 700;
}

.apply-box * ~ * {
	margin-top: 1em;
}

@media (max-width: 27cm) {
	.apply-box {
		border: none;
		flex-direction: row;
		align-items: baseline;
		justify-content: space-between;
		padding: .75em;
	}
	.apply-box * ~ * {
		margin-top: 0;
		margin-left: 1.2em;
	}
	.apply-box .title {
		flex: 0 0 auto;
	}
	.apply-box .title br {
		display: none;
	}
	.apply-box .price {
		text-align: right;
		flex: 1 0 auto;
	}
	.apply-box .button {
		flex: 1 0 auto;
	}
}





.about-section {
	display: flex;
	flex-direction: column;
	margin-top: 2em;
}

.about-section .box {
	background-color: rgb(241, 241, 241);
	padding: 1em;
	display: flex;
	flex-direction: row;
	border-radius: .25em;
}

.about-section .name {
	font-weight: 700;
	font-size: 1.2em;
	border-bottom: 1px solid lightgrey;
	padding-bottom: .25em;
	margin-bottom: .75em;
}

.about-section .portrait {
	padding: 1em;
	width: 8em;
	height: 8em;
	clip-path: circle(4em);
	align-self: center;
}

.about-section .content {
	margin-left: 1em;
}

@media (max-width: 27cm) {
	.about-section .box {
		flex-direction: column;
		padding: .5em;
	}
	.about-section .content {
		margin-left: 0;
	}
}


.session-info {
	display: flex;
	flex-direction: row;
	justify-content: space-between;
	border-top: 1px solid #d3d3d3;
	border-bottom: 1px solid #d3d3d3;
	padding: .4em 4em .4em 0;
	font-size: .9em;
}

.session-info-cell {
	display: flex;
	flex-direction: column;
	flex: 0 1 auto;
}

.session-info-cell ~ .session-info-cell {
	margin-left: 1em;
}

@media (max-width: 27cm) {
	.session-info {
		padding: .4em 0;
	}
}

/* About Page */

.about-page-section {
	display: flex;
	flex-direction: row-reverse;
}

.about-page-section-column-1 {
	display: flex;
	flex-direction: column;
}

.about-page-section-column-2 {
	display: flex;
	flex-direction: column;
	align-items: center;
}

.about-page-portrait {
	padding: 1em;
	width: 14em;
	height: 14em;
	clip-path: circle(7em);
	align-self: flex-start;
}

.about-page-linked-in-btn-alt {
	display: none;
	flex-direction: row;
	align-self: center;
	flex: 0 0 auto;
	margin-top: 1em;
}

@media (max-width: 27cm) {
	.about-page-section {
		flex-direction: column;
	}

	.about-page-portrait {
		align-self: initial;
	}

	.about-page-linked-in-btn {
		display: none;
	}

	.about-page-linked-in-btn-alt {
		display: flex;
	}
}