/** Shopify CDN: Minification failed

Line 22:0 Comments in CSS use "/* ... */" instead of "//"
Line 25:0 Comments in CSS use "/* ... */" instead of "//"
Line 28:0 Comments in CSS use "/* ... */" instead of "//"
Line 31:0 Comments in CSS use "/* ... */" instead of "//"
Line 34:0 Comments in CSS use "/* ... */" instead of "//"
Line 37:0 Comments in CSS use "/* ... */" instead of "//"
Line 40:0 Comments in CSS use "/* ... */" instead of "//"
Line 42:0 Comments in CSS use "/* ... */" instead of "//"
Line 45:0 Comments in CSS use "/* ... */" instead of "//"
Line 48:0 Comments in CSS use "/* ... */" instead of "//"
... and 158 more hidden warnings

**/
/*----------------------------------------
------------------------------------------
	## BREAKPOINTS
------------------------------------------
----------------------------------------*/

// 420px
$mq-xs-min: "only screen and (min-width: 420px)";

// 767px
$mq-sm-min: "only screen and (min-width: 767px)";

// 992px
$mq-md-min: "only screen and (min-width: 992px)";

// 1200px  
$mq-lg-min: "only screen and (min-width: 1200px)";

// 1360px
$mq-xl-min: "only screen and (min-width: 1360px)";

// 1600px
$mq-xxl-min: "only screen and (min-width: 1600px)";

// MOBILE FIRST

// 1660px
$mq-xxl-max: "only screen and (max-width: 1660px)";

// 1366px
$mq-xl-max: "only screen and (max-width: 1360px)";

// 1200px
$mq-lg-max: "only screen and (max-width: 1200px)";

// 992px 
$mq-md-max: "only screen and (max-width: 992px)";

// 767px
$mq-sm-max: "only screen and (max-width: 767px)";

// 575px
$mq-xs-max: "only screen and (max-width: 575px)";

// 420px
$mq-xxs-max: "only screen and (max-width: 420px)";

// 375px
$mq-xxxs-max: "only screen and (max-width: 375px)";

// 330px
$mq-old-max: "only screen and (max-width: 330px)";

// body {
// 	&::before {
// 		content: 'f.hd';
// 		display: block;
// 		position: fixed;
// 		font-family: sans-serif;
// 		bottom: 0;
// 		left: 0;
// 		margin: 25px;
// 		opacity: .9;
// 		pointer-events: none;
// 		padding: 10px;
// 		font-size: 14px;
// 		color: white;
// 		background: black;
// 		z-index: 99999999999;

// 		@media #{$mq-xxl-max} { content: 'xxl'; }
// 		@media #{$mq-xl-max} { content: 'xl'; }
// 		@media #{$mq-lg-max} { content: 'lg'; }
// 		@media #{$mq-md-max} { content: 'md'; }
// 		@media #{$mq-sm-max} { content: 'sm'; }
// 		@media #{$mq-xs-max} { content: 'xs'; }
// 		@media #{$mq-xxs-max} { content: 'xxs'; }
// 		@media #{$mq-xxxs-max} { content: 'xxxs'; }
// 		@media #{$mq-old-max} { content: 'old'; }
// 	}
// }

/*----------------------------------------
------------------------------------------
	## FONT FAMILIES / WEIGHTS
------------------------------------------
----------------------------------------*/

$gotham: 'Gotham', sans-serif;

$light: 300;
$regular: normal;
$bold: bold;

/*----------------------------------------
------------------------------------------
	## COLORS
------------------------------------------
----------------------------------------*/

$black:				#111;
$gray-dark: 		#222;
$gray-medium:		#555;
$gray-medium-light: #999;
$gray-light:		#bbb;
$gray-lighter:		#ddd;
$almost-white:		#fafafa;
$white:				#fff;

$beige: 			#ffd1b2;
$beige-medium: 		darken($beige, 7.5%);
$beige-dark: 		desaturate(darken($beige, 5%), 20%);
$beige-vibrant: 	saturate(darken($beige, 25%), 15%);

$gold:				#ffdf7a;
$gold-medium: 		darken($gold, 7.5%);
$gold-dark: 		desaturate(darken($gold, 5%), 20%);
$gold-vibrant: 		saturate(darken($gold, 25%), 15%);

$purple:			#977695;
$purple-medium: 	darken($purple, 7.5%);
$purple-dark: 		desaturate(darken($purple, 5%), 1%);
$purple-vibrant: 	saturate(darken($purple, 25%), 15%);

$red: 				#ff9b9d;
$red-medium: 		darken($red, 7.5%);
$red-dark: 			desaturate(darken($red, 5%), 20%);
$red-vibrant: 		saturate(darken($red, 25%), 15%);

$aqua:				#c8f1f3;
$aqua-medium: 		darken($aqua, 7.5%);
$aqua-dark: 		desaturate(darken($aqua, 5%), 20%);
$aqua-vibrant: 		saturate(darken($aqua, 25%), 15%);

$green:				#c8f3d7;
$green-medium: 		darken($green, 7.5%);
$green-dark: 		desaturate(darken($green, 5%), 20%);
$green-vibrant: 	saturate(darken($green, 25%), 15%);

$orange: 			#ffd8b5;
$orange-medium: 	darken($orange, 7.5%);
$orange-dark: 		desaturate(darken($orange, 5%), 20%);
$orange-vibrant: 	saturate(darken($orange, 25%), 15%);

$blue: 				#bfecff;
$blue-medium: 		darken($blue, 7.5%);
$blue-dark: 		desaturate(darken($blue, 5%), 20%);
$blue-vibrant: 		saturate(darken($blue, 25%), 15%);

$star:				#ff984c;

$bg-01:				#ece8e9;
$bg-02:				#e7e2e3;

/*----------------------------------------
------------------------------------------
	## FAQ
------------------------------------------
----------------------------------------*/

body.faq {
	#banner-top {
		background-color: $blue;

		&:before {
			border-color: transparent transparent transparent $blue-dark;
		} // END BEFORE

		.left {
			text-align: center;
			display: flex;
			align-items: flex-end;
			justify-content: center;

			img {
				width: 350px;

				@media #{$mq-sm-max} {
					width: 300px;
				}

				@media #{$mq-xs-max} {
					width: 250px;
				}

				@media #{$mq-xxs-max} {
					width: 200px;
				}
			} // END IMG
		} // END LEFT

		.right {
			display: flex;
			align-items: center;
			position: relative;
			text-align: right;
			justify-content: center;
			padding-bottom: 100px;

			@media #{$mq-sm-max} {
				display: block;
				text-align: center;
				padding-bottom: 50px;
			}

			.logo {
				position: absolute;
				top: 5%;
				right: -50px;
				width: 600px;
				height: auto;
				z-index: 0;

				@media #{$mq-sm-max} {
					right: 0;
					left: 0;
					margin: 0 auto;
					width: calc(100% - 100px);
				}

				@media #{$mq-xs-max} {
					display: none;
				}

				path {
					fill: $blue-dark;
				} // END PATH
			} // END LOGO

			.text-large {
				font-weight: $bold;
				color: $gray-dark;
				position: relative;
				z-index: 2;
				text-transform: lowercase;

				@media #{$mq-xxl-max} {
					padding-right: 20px;
				}

				@media #{$mq-sm-max} {
					white-space: normal;
					padding: 0;
				}

				@media #{$mq-xs-max} {
					font-size: 42px;
				}

				@media #{$mq-xxs-max} {
					font-size: 36px;
				}

				@media #{$mq-xxxs-max} {
					font-size: 32px;
				}
			} // END TEXT LARGE
		} // END RIGHT
	} // END BANNER TOP

	#content {
		#faq {
			.questions {
				padding-top: 100px;

				@media #{$mq-md-max} {
					padding-top: 80px;
				}

				@media #{$mq-xs-max} {
					padding-top: 50px;
				}

				.question {
					padding-bottom: 40px;
					margin-bottom: 40px;
					position: relative;

					@media #{$mq-md-max} {
						padding-bottom: 30px;
						margin-bottom: 30px;
					}

					@media #{$mq-xs-max} {
						padding-bottom: 20px;
						margin-bottom: 20px;
					}

					&:after {
						content: "";
						display: block;
						position: absolute;
						left: 0;
						bottom: 0;
						width: 100%;
						height: 1px;
						background-color: $gray-lighter;
						transition: .3s;
					} // END AFTER

					.line {
						position: relative;
						cursor: pointer;
						display: block;

						&:hover,
						&:focus,
						&.active {
							.text-big {
								color: $gray-light;
								padding-left: 3px;
							} // END TEXT BIG

							img,
							svg {
								polygon,
								rect {
									fill: $gray-light;

									@media #{$mq-md-max} {
										fill: $gray-dark;
									}
								} // END POLYGON / RECT
							} // END IMG / SVG
						} // END HOVER / FOCUS / ACTIVE

						&.active {
							.text-medium-big {
								color: $blue-vibrant;
							} // END TEXT MEDIUM BIG

							img,
							svg {
								transform: translateY(-50%) rotate(180deg);

								path {
									fill: $blue-vibrant;
								} // END PATH
							} // END IMG / SVG
						} // END ACTIVE

						.text-medium-big {
							color: $gray-dark;
							font-weight: $bold;
							transition: .3s;
							padding-right: 40px;
						} // END TEXT MEDIUM BIG

						img,
						svg {
							position: absolute;
							right: 0;
							top: 60%;
							transform: translateY(-50%);
							display: block;
							width: 25px;
							height: 25px;
							transition: .3s;

							polygon,
							rect {
								fill: $gray-light;
								transition: .3s;

								@media #{$mq-md-max} {
									fill: $gray-dark;
								}

								path {
									transition: .3s;
								} // END PATH
							} // END POLYGON / RECT
						} // END IMG / SVG
					} // END LINE

					.content {
						display: none;
						padding-top: 20px;
						padding-right: 50px;

						@media #{$mq-sm-max} {
							padding-right: 30px;
						}

						@media #{$mq-xs-max} {
							padding-right: 10px;
						}

						.text-medium {
							color: $gray-medium;
							line-height: 2;
						} // END TEXT MEDIUM
					} // END CONTENT
				} // END QUESTION
			} // END QUESTIONS
		} // END FAQ

		#answers {
			padding-top: 150px;
			padding-bottom: 100px;

			@media #{$mq-xxl-max} {
				padding-top: 120px;
			}

			@media #{$mq-xl-max} {
				padding-top: 90px;
				padding-bottom: 0;
			}

			@media #{$mq-md-max} {
				padding-top: 70px;
			}

			@media #{$mq-sm-max} {
				padding-top: 40px;
			}

			@media #{$mq-xs-max} {
				padding-top: 30px;
			}

			.block {
				position: absolute;
				bottom: 0;
				right: 0;
				display: block;
				width: 40%;
				height: 60%;
				background-color: $almost-white;

				@media #{$mq-xl-max} {
					height: 50%;
				}

				@media #{$mq-md-max} {
					display: none;
				}
			} // END BLOCK

			.container-big {
				position: relative;
				z-index: 2;

				.left {
					padding-top: 30px;

					@media #{$mq-lg-max} {
						padding-top: 0;
					}

					@media #{$mq-md-max} {
						padding-top: 40px;
						text-align: center;
					}

					@media #{$mq-xs-max} {
						padding-top: 30px;
					}

					.text-bigger {
						font-weight: $bold;
						color: $gray-medium;

						br {
							@media #{$mq-md-max} {
								display: none;
							}
						} // END BR
					} // END TEXT BIGGER

					.desc {
						display: block;
						color: $gray-medium;
						margin: 80px 0;

						@media #{$mq-xl-max} {
							margin: 60px 0;
						}

						@media #{$mq-md-max} {
							margin: 40px 0;
						}

						@media #{$mq-xs-max} {
							margin: 20px 0 30px 0;
						}
					} // END DESC

					.link {
						font-weight: $bold;
						color: $gray-medium;
						text-transform: lowercase;

						&:before {
							height: 3px;
							background-color: $gray-medium
						} // END BEFORE
					} // END LINK
				} // END LEFT

				.right {
					text-align: center;

					img {
						display: block;
						margin: 0 auto;
					} // END IMG
				} // END RIGHT
			} // END CONTAINER BIG
		} // END ANSWERS
	} // END CONTENT
} // END BODY / FAQ


#faq .questions .question .content {
    display: none;
    padding-top: 20px;
    padding-right: 50px;
}