/**
 * Header Carousel
 */

.header-carousel__item {
	display: none;
	width: 100%;
	padding: 0 1rem 1rem 2rem;
}

@media screen and (min-width: 768px) {
	.header-carousel__item {
		padding: 0 10% 1rem 10%;
	}
}

.header-carousel__item:first-child {
	display: block;
}

.flickity-enabled .header-carousel__item {
	display: block;
}

.header-carousel__block {
	display: block;
	width: 100%;
	padding: 2rem 4rem;
	background-color: rgba(0, 135, 131, 0.9);
	box-shadow: 8px 8px 0px rgba(0, 0, 0, 0.2);
	text-align: center;
}

.header-carousel__quote {
	display: block;
	color: #fff;
	font-size: 2rem;
	font-weight: 700;
}

.header-carousel__quote::before,
.header-carousel__quote::after {
	display: block;
	font-size: 4rem;
	color: #99D5C3;
	text-align: center;
	line-height: 2rem;
}

.header-carousel__quote::before {
	content: "\201C";
}

.header-carousel__quote::after {
	content: "\201D";
	position: relative;
	top: 1.5rem;
}

.header-carousel__quote s,
.header-carousel__quote strike {
	text-decoration-color: #99D5C3;
	text-decoration-thickness: 4px;
	text-decoration-style: solid;
	text-decoration-style: wavy;
}

/**
 * Our mission
 */

.our-mission-text {
	display: block;
	margin-top: 1em;
}

/**
 * Hexagon grid
 */

.how-we-work {
	display: flex;
	--s: 140px; /* size  */
	--m: 8px; /* margin */
	--f: calc(1.732 * var(--s) + 4 * var(--m) - 1px);
	margin-bottom: var(--s);
}

@media screen and (min-width: 480px) {
	.how-we-work {
		margin-bottom: auto;
	}
}

@media screen and (min-width: 768px) {
	.how-we-work {
		--s: 180px; /* size  */
	}
}

@media screen and (min-width: 1024px) {
	.how-we-work {
		--s: 200px;
	}
}


.how-grid {
	font-size: 0; /*disable white space between inline block element */
	padding-top: 24px;
	padding-bottom: 76px;
	filter: drop-shadow(0px 8px 0px rgba(0, 0, 0, 0.2));
}

.how-grid__item {
	position: relative;
	width: var(--s);
	margin: var(--m);
	height: calc(var(--s)*1.1547);
	display: inline-block;
	font-size: .831rem;
	clip-path: polygon(0% 25%, 0% 75%, 50% 100%, 100% 75%, 100% 25%, 50% 0%);
	background: #008783;
	color: #fff;
	margin-bottom: calc(var(--m) - var(--s)*0.2885);
	transition: transform .32s ease-in-out;
}

.how-grid__item:hover {
	transform: scale(.95);
}
.how-grid__item.is-active {
	transform: scale(1.1);
	font-size: 1.33rem;
}

@media screen and (min-width: 768px) {
	.how-grid__item {
		font-size: initial;
	}
	.how-grid__item.is-active {
		font-size: 1.33rem;
	}
}

.how-grid__item:nth-child(2),
.how-grid__item:nth-child(6) {
	background: #0d5354;
}

.how-grid__item:nth-child(3),
.how-grid__item:nth-child(7) {
	background: #99D5C3;
}

.how-grid__item:nth-child(4),
.how-grid__item:nth-child(8) {
	background: #009aa1;
}

.how-grid::before {
	content: "";
	width: calc(var(--s)/2 + var(--m));
	float: left;
	height: 120%;
	shape-outside: repeating-linear-gradient(#0000 0 calc(var(--f) - 3px),
			#000 0 var(--f));
}

.how-grid__block {
	position: absolute;
	display: flex;
	justify-content: center;
	align-items: center;
	width: 100%;
	height: 100%;
	padding: 1rem;
	font-weight: 700;
	text-align: center;
	color: #fff;
	text-decoration: none;
}

.how-grid__block:hover {
	text-decoration: none;
	color: #fff;
}

/**
 * How answer toggles
 */

.how-answer {
	display: none;
}

.how-answer.is-active {
	display: block;
}

.how-answer__block {
	margin-bottom: 1rem;
}

.how-answer__content {
	padding-bottom: 2rem;
}

/**
 * Block titles
 */

.block-title {
	display: block;
	margin-top: 2rem;
	margin-bottom: .5rem;
	width: 100%;
}

.block-title span {
	display: inline-block;
	padding: .75rem 1.75rem;
	background-color: #99D5C3;
	color: #0d5354;
	font-weight: 700;
}

/**
 * Centered titles
 */

.centered-title {
	display: block;
	margin-top: 3rem;
	margin-bottom: .5rem;
	width: 100%;
	text-align: center;
	color: #0d5354;
}

/**
 * Flickity carousel
 */

/*! Flickity v2.3.0
https://flickity.metafizzy.co
---------------------------------------------- */

.flickity-enabled {
	position: relative;
}

.flickity-enabled:focus {
	outline: none;
}

.flickity-viewport {
	overflow: hidden;
	position: relative;
	height: 100%;
}

.flickity-slider {
	position: absolute;
	width: 100%;
	height: 100%;
}

/* draggable */

.flickity-enabled.is-draggable {
	-webkit-tap-highlight-color: transparent;
	-webkit-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
}

.flickity-enabled.is-draggable .flickity-viewport {
	cursor: move;
	cursor: -webkit-grab;
	cursor: grab;
}

.flickity-enabled.is-draggable .flickity-viewport.is-pointer-down {
	cursor: -webkit-grabbing;
	cursor: grabbing;
}

/* ---- flickity-button ---- */

.flickity-button {
	position: absolute;
	background: hsla(0, 0%, 100%, 0.75);
	border: none;
	color: #333;
}

.flickity-button:hover {
	background: white;
	cursor: pointer;
}

.flickity-button:focus {
	outline: none;
	box-shadow: 0 0 0 5px #19F;
}

.flickity-button:active {
	opacity: 0.6;
}

.flickity-button:disabled {
	opacity: 0.3;
	cursor: auto;
	/* prevent disabled button from capturing pointer up event. #716 */
	pointer-events: none;
}

.flickity-button-icon {
	fill: currentColor;
}

/* ---- previous/next buttons ---- */

.flickity-prev-next-button {
	top: 50%;
	width: 44px;
	height: 44px;
	border-radius: 50%;
	/* vertically center */
	transform: translateY(-50%);
}

.flickity-prev-next-button.previous {
	left: 10px;
}

.flickity-prev-next-button.next {
	right: 10px;
}

/* right to left */
.flickity-rtl .flickity-prev-next-button.previous {
	left: auto;
	right: 10px;
}

.flickity-rtl .flickity-prev-next-button.next {
	right: auto;
	left: 10px;
}

.flickity-prev-next-button .flickity-button-icon {
	position: absolute;
	left: 20%;
	top: 20%;
	width: 60%;
	height: 60%;
}

/* ---- page dots ---- */

.flickity-page-dots {
	position: absolute;
	width: 100%;
	bottom: -25px;
	padding: 0;
	margin: 0;
	list-style: none;
	text-align: center;
	line-height: 1;
}

.flickity-rtl .flickity-page-dots {
	direction: rtl;
}

.flickity-page-dots .dot {
	display: inline-block;
	width: 10px;
	height: 10px;
	margin: 0 8px;
	background: #333;
	border-radius: 50%;
	opacity: 0.25;
	cursor: pointer;
}

.flickity-page-dots .dot.is-selected {
	opacity: 1;
}