html,
body,
div,
span,
object,
iframe,
h1,
h2,
h3,
h4,
h5,
h6,
p,
blockquote,
pre,
a,
abbr,
address,
code,
del,
em,
img,
ins,
kbd,
q,
s,
samp,
small,
strong,
sub,
sup,
b,
u,
i,
dl,
dt,
dd,
ol,
ul,
li,
fieldset,
form,
label,
legend,
table,
caption,
tbody,
tfoot,
thead,
tr,
th,
td,
article,
aside,
canvas,
details,
embed,
figure,
figcaption,
footer,
header,
hgroup,
menu,
nav,
output,
section,
summary,
time,
mark,
audio,
video,
input,
textarea,
button {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font-style: inherit
}

article,
aside,
details,
figcaption,
figure,
footer,
header,
main,
hgroup,
menu,
nav,
section,
ul,
li {
	display: block
}

ol,
ul {
	list-style: none
}

blockquote,
q {
	quotes: none
}

table {
	border-collapse: collapse;
	border-spacing: 0
}

body {
	min-height: 100vh;
	overflow-y: scroll
}

*,
*:before,
*:after {
	box-sizing: inherit
}

html {
	box-sizing: border-box;
	font-size: 62.5%;
	-moz-text-size-adjust: 100%;
	-ms-text-size-adjust: 100%;
	-webkit-text-size-adjust: 100%
}

img {
	max-width: 100%;
	vertical-align: top
}

a {
	text-decoration: none
}

button,
[type='submit'] {
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
	background: none;
	color: inherit;
	cursor: pointer;
	font-family: inherit;
	font-size: inherit;
	-webkit-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none
}

body [data-slide-me] {
	display: none
}

svg {
	fill: currentcolor
}

:root {
	--mobile-gutter: 40px;
	--push: 75px;
	--background: #fff;
	--color: #2d3640;
	--color-light: #8b9cae;
	--color-dark: #0d1013;
	--link: #0d1013;
	--link-hover: #000;
	--section--alt--background: #f4f6f7
}

@media (max-width: 860px) {
	:root {
		--push: 40px
	}
}

@media (min-width: 641px) {
	:root {
		--h1-size: 3.8rem;
		--h2-size: 3.4rem;
		--h3-size: 2rem;
		--h4-size: 1.6rem
	}
}

@media (max-width: 640px) {
	:root {
		--h1-size: 2.8rem;
		--h2-size: 2.4rem;
		--h3-size: 2rem;
		--h4-size: 1.6rem
	}
}

:root {
	--body-background: #1c2228;
	--background: #fff;
	--color: #2d3640;
	--color-light: #8b9cae;
	--color-dark: #0d1013;
	--mobile-gutter: 40px;
	--push: 75px
}

@media (max-width: 860px) {
	:root {
		--push: 40px
	}
}

body {
	background-color: #1c2228;
	color: #2d3640;
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
	font-size: 1.5rem;
	line-height: 1.7;
	-moz-osx-font-smoothing: grayscale;
	-webkit-font-smoothing: antialiased;
	text-rendering: optimizelegibility
}

a {
	color: #0d1013
}

a.blend {
	color: inherit !important;
	text-decoration: none !important
}

.width {
	max-width: 1360px;
	width: calc(100% - 60px);
	margin: 0 auto
}

@media (max-width: 860px) {
	.width {
		width: calc(100% - 40px)
	}
}

.width .width {
	width: auto
}

.width--narrow {
	max-width: 600px
}

.width--custom {
	max-width: 1100px
}

@supports (padding: 0px) {
	@media only screen and (min-device-width: 375px) and (max-device-width: 812px) and (-webkit-min-device-pixel-ratio: 3) and (orientation: landscape) {

		body .width,
		body .mobile-header,
		body .mobile-nav a,
		body .mobile-nav .navigation-parent ul a {
			padding-left: env(safe-area-inset-left);
			padding-right: env(safe-area-inset-right)
		}

		body .width {
			width: auto
		}

		body .width .width {
			padding-left: 0;
			padding-right: 0
		}
	}
}

@media (min-width: 901px) {
	.header\:mobile {
		display: none !important
	}
}

@media (max-width: 900px) {
	.header\:desktop {
		display: none !important
	}

	.mobile-nav-active body {
		overflow: hidden
	}
}

@media (max-width: 420px) {
	:root {
		--screen-size: 'Extra small'
	}
}

@media (min-width: 421px) and (max-width: 640px) {
	:root {
		--screen-size: 'Small'
	}
}

@media (min-width: 641px) and (max-width: 860px) {
	:root {
		--screen-size: 'Medium'
	}
}

@media (min-width: 861px) and (max-width: 1080px) {
	:root {
		--screen-size: 'Large'
	}
}

@media (min-width: 1081px) {
	:root {
		--screen-size: 'Above large'
	}
}

p {
	margin-top: 1.02em;
	margin-bottom: 1.02em
}

p:first-child {
	margin-top: 0
}

p:last-child {
	margin-bottom: 0
}

.h1 {
	font-weight: bold;
	line-height: 1.2;
	font-size: 28px
}

@media only screen and (min-width: 640px) {
	.h1 {
		font-size: calc(28px + 10 * ((100vw - 640px) / 260))
	}
}

@media only screen and (min-width: 900px) {
	.h1 {
		font-size: 38px
	}
}

.h1 a {
	color: inherit;
	position: relative
}

.h1 a::before {
	content: '';
	position: absolute;
	left: 0;
	bottom: -2px;
	right: 0;
	height: 2px;
	background: currentColor;
	opacity: 0.2;
	transition: opacity 0.2s ease-in-out
}

.h1 a:hover::before {
	opacity: 0.6
}

.h1 span {
	font-weight: 400;
	color: #8b9cae
}

.h2 {
	font-weight: bold;
	line-height: 1.2;
	font-size: 24px
}

@media only screen and (min-width: 640px) {
	.h2 {
		font-size: calc(24px + 10 * ((100vw - 640px) / 260))
	}
}

@media only screen and (min-width: 900px) {
	.h2 {
		font-size: 34px
	}
}

.h2 a {
	position: relative
}

.h2 a::before {
	content: '';
	position: absolute;
	left: 0;
	bottom: -2px;
	right: 0;
	height: 2px;
	background: currentColor;
	opacity: 0.2;
	transition: opacity 0.2s ease-in-out
}

.h2 a:hover::before {
	opacity: 0.6
}

.h3 {
	font-size: 2rem;
	font-size: var(--h3-size);
	font-weight: bold;
	line-height: 1.2
}

.h4 {
	font-size: 1.6rem;
	font-size: var(--h4-size);
	font-weight: bold;
	line-height: 1.2
}

.minor-header {
	text-transform: uppercase;
	font-weight: bold;
	font-size: 1.3rem
}

.c\:reset {
	color: #2d3640
}

.c\:light {
	color: #8b9cae
}

.c\:dark {
	color: #0d1013
}

.c\:primary {
	color: #2f3647
}

.a\:inherit a {
	color: inherit
}

.ta\:center {
	text-align: center
}

.ta\:left {
	text-align: left
}

.ta\:right {
	text-align: right
}

.tt\:uppercase {
	text-transform: uppercase
}

.tt\:lowercase {
	text-transform: lowercase
}

.fs\:smallest {
	font-size: .6em
}

.fs\:smaller {
	font-size: .75em
}

.fs\:small {
	font-size: .9em
}

.fs\:reset {
	font-size: 1.5rem
}

.fs\:large {
	font-size: 1.25em
}

.fs\:larger {
	font-size: 1.6em
}

.fs\:largest {
	font-size: 1.9em
}

.fw\:100 {
	font-weight: 100
}

.fw\:200 {
	font-weight: 200
}

.fw\:300 {
	font-weight: 300
}

.fw\:400,
.fw\:normal {
	font-weight: 400
}

.fw\:500 {
	font-weight: 500
}

.fw\:600 {
	font-weight: 600
}

.fw\:700,
.fw\:bold {
	font-weight: 700
}

.fw\:800 {
	font-weight: 800
}

.fw\:900 {
	font-weight: 900
}

[data-email] {
	white-space: nowrap
}

.format>* {
	margin-top: 1.02em;
	margin-bottom: 1.02em
}

.format>*:first-child {
	margin-top: 0
}

.format>*:last-child {
	margin-bottom: 0
}

.format figure {
	margin: 1.7em 0
}

.format figcaption {
	margin-top: 1.02em
}

.format h1,
.format h2,
.format h3,
.format h4,
.format h5,
.format h6 {
	line-height: 1.1;
	margin-top: 2em;
	margin-bottom: 0
}

.screen-reader {
	border: 0;
	clip: rect(1px, 1px, 1px, 1px);
	-webkit-clip-path: inset(50%);
	clip-path: inset(50%);
	height: 1px;
	margin: -1px;
	overflow: hidden;
	padding: 0;
	position: absolute !important;
	white-space: nowrap !important;
	width: 1px
}

.button {
	background-color: #2f3647;
	border-radius: 4px;
	border: 1px solid rgba(0, 0, 0, 0.15);
	color: #fff;
	cursor: pointer;
	display: inline-block;
	font-weight: bold;
	line-height: 1.1;
	padding: 1em 3em;
	position: relative;
	text-align: center;
	text-decoration: none;
	text-shadow: rgba(0, 0, 0, 0.2) 0px -1px 0px;
	vertical-align: middle
}

.button:hover {
	background-color: #3f4960;
	color: #fff
}

.button:active {
	top: 1px
}

.button:not(.button--ghost) {
	background-image: linear-gradient(to bottom, rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0));
	box-shadow: 0 4px 6px rgba(0, 0, 0, 0.07), 0 1px 2px rgba(0, 0, 0, 0.08);
	transition: all 0.15s ease-in-out
}

.button:not(.button--ghost):hover:not(:active) {
	box-shadow: 0 7px 14px rgba(0, 0, 0, 0.07), 0 3px 6px rgba(0, 0, 0, 0.08);
	-ms-transform: translateY(-1px);
	transform: translateY(-1px)
}

.button--alt {
	background-color: #5e7b94;
	border-color: rgba(0, 0, 0, 0.15);
	color: #fff
}

.button--alt:hover {
	background-color: #748fa7;
	color: #fff
}

.button--minimal {
	background-color: #fff;
	border-color: transparent;
	color: #2f3647;
	text-shadow: none
}

.button--minimal:hover {
	background-color: #fff;
	color: #252a38
}

.button--ghost {
	background-color: transparent;
	border-color: transparent;
	color: inherit;
	text-shadow: inherit
}

.button--ghost[type='submit'] {
	border-color: currentColor
}

.button--ghost::after {
	content: '';
	position: absolute;
	top: -1px;
	left: -1px;
	right: -1px;
	bottom: -1px;
	border-radius: inherit;
	border: 1px solid currentColor;
	opacity: 0.3;
	transition: opacity 0.15s ease-in-out
}

.button--ghost:hover::after {
	opacity: 1
}

.button--ghost:hover {
	background-color: var(--button-ghost-hover--background, transparent);
	color: var(--button-ghost-hover--color, inherit)
}

.button-row {
	align-items: center;
	display: flex;
	flex-wrap: wrap;
	margin: 0 -5px
}

.ta\:center .button-row {
	justify-content: center
}

.button-row .button {
	flex: 0 1 auto;
	margin: 5px
}

button.button:focus,
input.button[type='submit']:focus {
	text-decoration: underline
}

.button--custom {
	background: #63ba5f;
	width: 100%;
	max-width: 500px;
	padding: 1.7em 0
}

.button--custom:hover {
	background: #52b24d
}

.button--buy {
	background-color: #63ba5f
}

.button--buy:hover {
	background-color: #6DC56A
}

:root {
	--input--border-color: #a9b5c3;
	--input--border-color-active: currentColor;
	--input--border-radius: 4px;
	--input--placeholder: inherit;
	--input--placeholder-opacity: 0.4;
	--input--color: inherit
}

#unwanted {
	display: none
}

.form__row {
	margin-bottom: 10px
}

.form__row-color {
	position: relative;
	height: 80px
}

.form__row-color .sp-replacer {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	border: 0;
	background: none;
	padding: 0
}

.form__row-color .sp-preview {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	width: auto;
	height: auto;
	margin: 0;
	border: 0;
	background: none
}

.form__row-color .sp-preview-inner {
	box-shadow: inset rgba(0, 0, 0, 0.2) 0px 0px 0px 1px;
	border-radius: 5px
}

.form__row-color .sp-dd {
	display: none
}

.sp-container {
	background: #fff;
	border: 0;
	box-shadow: rgba(0, 0, 0, 0.3) 0px 8px 18px, rgba(0, 0, 0, 0.1) 0px 2px 3px;
	border-radius: 4px
}

.sp-picker-container {
	border: 0
}

.sp-container,
.sp-container button,
.sp-container input,
.sp-color,
.sp-hue,
.sp-clear {
	font-family: inherit
}

.sp-input {
	border: 1px solid #999
}

.sp-input:focus {
	border-color: #444
}

.sp-input-container {
	float: none
}

.sp-button-container {
	float: none;
	display: flex;
	justify-content: space-between;
	align-items: center
}

.sp-button-container::before,
.sp-button-container::after {
	display: none
}

.sp-cancel {
	font-weight: bold
}

.sp-container button,
.sp-container button:hover,
.sp-container button:active {
	background: #3cad44;
	color: #fff;
	text-shadow: none;
	font-weight: bold;
	border-color: rgba(0, 0, 0, 0.2);
	padding: 7px 10px;
	box-shadow: rgba(0, 0, 0, 0.2) 0px 4px 8px
}

.sp-container button:hover {
	background: #57c55f
}

.form\:horizontal .form__label {
	display: block;
	margin-bottom: 0.25em
}

@media (min-width: 641px) {

	.form\:horizontal .form__row,
	.form\:horizontal .form__submit {
		padding-left: 140px
	}

	.form\:horizontal .form__label {
		float: left;
		line-height: 50px;
		margin: 0;
		margin-left: -140px;
		padding-right: 10px;
		text-align: right;
		width: 140px
	}
}

.form\:vertical .form__label {
	display: block;
	margin-bottom: 0.25em
}

.form\:minimal .form__label {
	display: none
}

.form\:minimal .input\:check+.form__label {
	display: inline-block
}

[data-animate-label] {
	position: relative
}

[data-animate-label] input::-webkit-input-placeholder,
[data-animate-label] textarea::-webkit-input-placeholder {
	color: rgba(0, 0, 0, 0)
}

[data-animate-label] input::-moz-placeholder,
[data-animate-label] textarea::-moz-placeholder {
	color: rgba(0, 0, 0, 0)
}

[data-animate-label] input:-ms-input-placeholder,
[data-animate-label] textarea:-ms-input-placeholder {
	color: rgba(0, 0, 0, 0)
}

[data-animate-label] input::-ms-input-placeholder,
[data-animate-label] textarea::-ms-input-placeholder {
	color: rgba(0, 0, 0, 0)
}

[data-animate-label] input::placeholder,
[data-animate-label] textarea::placeholder {
	color: rgba(0, 0, 0, 0)
}

[data-animate-label] .form__label {
	color: inherit;
	color: var(--input--color);
	left: 1em;
	line-height: 50px;
	margin: 0;
	max-width: calc(100% - 2em);
	opacity: 0.4;
	opacity: var(--input--placeholder-opacity);
	overflow: hidden;
	pointer-events: none;
	position: absolute;
	text-overflow: ellipsis;
	top: 0%;
	transition: all 0.2s linear;
	-ms-transform-origin: 0% 50%;
	transform-origin: 0% 50%;
	white-space: nowrap;
	z-index: 1
}

[data-animate-label] .form__label i {
	margin-right: .2em
}

.translate-label[data-animate-label] .form__label {
	color: inherit;
	color: var(--input--color);
	font-weight: bold;
	opacity: 1;
	-ms-transform: translateY(-12px) scale(0.8);
	transform: translateY(-12px) scale(0.8)
}

.translate-label[data-animate-label] .input\:text {
	border-color: currentColor;
	border-color: var(--input--border-color-active)
}

.form\:animate-contain [data-animate-label] .input\:text {
	line-height: 38px;
	padding-top: 12px
}

.form\:animate-contain [data-animate-label] textarea.input\:text {
	padding-top: 20px
}

.form\:animate-break [data-animate-label] .form__label {
	left: .5em;
	padding: 0 .5em
}

.form\:animate-break .translate-label[data-animate-label] .form__label {
	-ms-transform: translateY(-50%) scale(0.8);
	transform: translateY(-50%) scale(0.8)
}

.form\:animate-break .translate-label[data-animate-label] .form__label:before {
	background: #fff;
	bottom: calc(50% - 5px);
	content: '';
	display: block;
	left: 0;
	position: absolute;
	right: 0;
	top: calc(50% - 5px);
	z-index: -1
}

@supports (display: grid) and (--css: variables) {
	.form__grid {
		--gap: 10px;
		--width: 240px;
		--fit: auto-fit;
		display: grid;
		grid-gap: var(--gap);
		grid-template-columns: repeat(var(--fit), minmax(var(--width), 1fr));
		margin-bottom: 10px
	}

	.form__grid>* {
		margin: 0;
		max-width: calc(100vw - 40px);
		min-width: 0
	}

	.form__row .form__grid {
		margin-bottom: 0
	}

	.form__grid>.form__check-wrap {
		margin: 0 !important
	}

	.form__grid--fill {
		--fit: auto-fill
	}
}

.form__group {
	border-top: 1px solid rgba(45, 54, 64, 0.1);
	padding: 20px 0
}

.form__group:first-child {
	border-top-width: 0
}

.form__group .form__grid:last-child,
.form__group .form__group-inputs .form__row:last-child {
	margin-bottom: 0
}

.form__group .form__group-text {
	padding-bottom: 20px
}

.form__group .form__group-title {
	font-weight: bold
}

.form__group .form__group-desc {
	color: #8b9cae
}

@media (min-width: 641px) {
	.form__group {
		display: flex
	}

	.form__group .form__group-text {
		flex: 0 0 33%;
		padding-bottom: 0;
		padding-right: 20px
	}

	.form__group .form__group-inputs {
		flex: 1 1 100px
	}
}

.form__submit {
	padding-top: 10px
}

@media (min-width: 641px) {
	.form__group+.form__submit {
		padding-left: 33%
	}
}

.input\:reset,
.input\:text,
.select select {
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
	background: none;
	border: 0;
	box-shadow: none;
	color: inherit;
	display: block;
	font-family: inherit;
	font-size: inherit;
	min-width: 0;
	outline: none;
	text-align: inherit;
	width: 100%
}

.input\:text,
.select {
	background: #fff;
	border: 1px solid #a9b5c3;
	border-color: var(--input--border-color);
	border-radius: 4px;
	border-radius: var(--input--border-radius);
	box-shadow: none;
	color: inherit;
	color: var(--input--color);
	height: 50px;
	line-height: calc(50px - 1px * 2);
	padding: 0 1em;
	transition: border-color 0.2s linear
}

.select:focus-within,
.input\:text:focus {
	background-color: #fff;
	border-color: currentColor;
	border-color: var(--input--border-color-active);
	outline: none
}

::-webkit-input-placeholder {
	color: inherit;
	color: var(--input--placeholder);
	opacity: 0.4;
	opacity: var(--input--placeholder-opacity)
}

::-moz-placeholder {
	color: inherit;
	color: var(--input--placeholder);
	opacity: 0.4;
	opacity: var(--input--placeholder-opacity)
}

:-ms-input-placeholder {
	color: inherit;
	color: var(--input--placeholder);
	opacity: 0.4;
	opacity: var(--input--placeholder-opacity)
}

::-ms-input-placeholder {
	color: inherit;
	color: var(--input--placeholder);
	opacity: 0.4;
	opacity: var(--input--placeholder-opacity)
}

::placeholder {
	color: inherit;
	color: var(--input--placeholder);
	opacity: 0.4;
	opacity: var(--input--placeholder-opacity)
}

input:focus::-webkit-input-placeholder,
textarea:focus::-webkit-input-placeholder {
	opacity: 0.1
}

input:focus::-moz-placeholder,
textarea:focus::-moz-placeholder {
	opacity: 0.1
}

input:focus:-ms-input-placeholder,
textarea:focus:-ms-input-placeholder {
	opacity: 0.1
}

input:focus::-ms-input-placeholder,
textarea:focus::-ms-input-placeholder {
	opacity: 0.1
}

input:focus::placeholder,
textarea:focus::placeholder {
	opacity: 0.1
}

textarea.input\:text {
	height: auto;
	line-height: 1.7;
	padding: 1em;
	resize: vertical
}

.select {
	padding: 0;
	position: relative
}

.select::after {
	border: 2px solid currentColor;
	border-right-width: 0px;
	border-top-width: 0px;
	content: '';
	height: 6px;
	pointer-events: none;
	position: absolute;
	right: 20px;
	top: 50%;
	-ms-transform: rotate(-45deg);
	transform: rotate(-45deg);
	-ms-transform-origin: 0 0;
	transform-origin: 0 0;
	width: 6px
}

.select select {
	height: calc(50px - 1px * 2);
	padding: 0 1em
}

@media (max-width: 860px) {

	.input\:text,
	.input\:reset,
	.select {
		font-size: 16px
	}
}

.selectric-wrapper {
	position: relative;
	cursor: pointer;
	-ms-transform: translate(0, 0);
	transform: translate(0, 0)
}

.selectric-responsive {
	width: 100%
}

.selectric {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: flex-start;
	height: 50px;
	border-radius: inherit;
	border-width: 1px;
	border-style: solid;
	border-color: inherit
}

.label {
	display: block;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	margin: 0;
	padding: 0;
	padding-left: 1em;
	flex: 1 1 auto
}

.selectric-button {
	width: 38px;
	text-align: center;
	font-size: 0;
	flex: 0 0 auto
}

.selectric-button:after {
	content: "\f0d7";
	display: inline-block;
	font-family: 'Font Awesome 5 Free';
	font-style: normal;
	font-weight: 900;
	line-height: 1;
	font-size: 1.4rem;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	-ms-transform: translate(0, 0);
	transform: translate(0, 0)
}

.selectric-open {
	z-index: 9999
}

.selectric-open .selectric-items {
	display: block
}

.selectric-disabled {
	opacity: 0.45;
	cursor: default;
	-webkit-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none
}

.selectric-hide-select {
	position: relative;
	overflow: hidden;
	width: 0;
	height: 0
}

.selectric-hide-select select {
	position: absolute;
	left: -100%;
	display: none
}

.selectric-input {
	position: absolute !important;
	top: 0 !important;
	left: 0 !important;
	overflow: hidden !important;
	clip: rect(0, 0, 0, 0) !important;
	margin: 0 !important;
	padding: 0 !important;
	width: 1px !important;
	height: 1px !important;
	outline: none !important;
	border: none !important;
	font: 0 !important;
	background: none !important
}

.selectric-temp-show {
	position: absolute !important;
	visibility: hidden !important;
	display: block !important
}

.selectric-items {
	display: none;
	position: absolute;
	top: 100%;
	left: 0;
	margin-top: -1px;
	z-index: 10;
	border-width: 0px 1px 1px 1px;
	border-style: solid;
	border-color: inherit;
	border-radius: inherit
}

body .selectric-open:not(.selectric-above) .selectric,
body .selectric-open.selectric-above .selectric-items {
	border-bottom-left-radius: 0;
	border-bottom-right-radius: 0
}

body .selectric-open.selectric-above .selectric,
body .selectric-open:not(.selectric-above) .selectric-items {
	border-top-left-radius: 0;
	border-top-right-radius: 0
}

.selectric-scroll {
	border-radius: inherit
}

.selectric-items .selectric-scroll {
	height: 100%;
	overflow: auto
}

.selectric-above .selectric-items {
	top: auto;
	bottom: 100%;
	margin-top: auto;
	margin-bottom: -1px;
	border-width: 1px 1px 0px 1px
}

.selectric-items ul,
.selectric-items li {
	list-style: none;
	padding: 0;
	margin: 0;
	line-height: 20px;
	min-height: 20px
}

.selectric-items li {
	display: block;
	padding: 8px;
	cursor: pointer;
	background-clip: content-box;
	color: currentColor;
	padding-left: 1em;
	position: relative
}

.selectric-items .disabled,
.selectric-items .disabled:hover {
	opacity: 0.5;
	cursor: default;
	background: none;
	-webkit-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none
}

.selectric-items .selectric-group .selectric-group-label {
	font-weight: bold;
	padding-left: 10px;
	cursor: default;
	-webkit-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
	background: none
}

.selectric-items .selectric-group.disabled li {
	opacity: 1
}

.selectric-items .selectric-group li {
	padding-left: 25px
}

.selectric-items li:before {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background: currentcolor;
	z-index: -1;
	pointer-events: none;
	opacity: 0
}

.selectric-items li:not(.disabled):hover:before {
	opacity: 0.03
}

.selectric-items li.selected:before,
.selectric-items li.selected:not(.disabled):hover:before {
	opacity: 0.12
}

.selectric-items li.selected:not(.disabled):after {
	content: "\f00c";
	font-family: 'FontAwesome';
	display: inline-block;
	font-style: normal;
	font-weight: normal;
	line-height: 1;
	font-size: 14px;
	margin-left: 5px;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	-ms-transform: translate(0, 0);
	transform: translate(0, 0);
	opacity: 0.3
}

.selectric-items li.selected.disabled {
	display: none
}

.selectric-wrapper {
	color: inherit;
	color: var(--input--color);
	border-color: #a9b5c3;
	border-color: var(--input--border-color);
	border-radius: 4px
}

.selectric-wrapper.selectric-open {
	border-color: currentColor;
	border-color: var(--input--border-color-active)
}

.selectric-wrapper:not(.selectric-chosen) .label {
	color: inherit;
	color: var(--input--placeholder);
	opacity: 0.4;
	opacity: var(--input--placeholder-opacity)
}

.selectric {
	background: #fff
}

.selectric-items,
.selectric-open .selectric {
	background: #fff
}

.selectric-items {
	box-shadow: rgba(0, 0, 0, 0.06) 0px 10px 10px
}

.selectric-above .selectric-items {
	box-shadow: rgba(0, 0, 0, 0.06) 0px -10px 10px
}

.form__check-wrap {
	align-items: center;
	display: flex
}

.form__check-wrap>* {
	flex: 0 0 auto
}

.form__check-wrap>*:not(:first-child) {
	padding-left: 8px
}

.form__check-wrap+.form__check-wrap {
	margin-top: 10px
}

.input\:check {
	color: inherit;
	display: inline-block;
	font-size: 16px;
	height: 1em;
	position: relative;
	vertical-align: middle;
	width: 1em
}

.input\:check input {
	cursor: pointer;
	height: 100%;
	left: 0;
	opacity: 0;
	position: absolute;
	top: 0;
	width: 100%;
	z-index: 1
}

.input\:check input:disabled {
	cursor: default
}

.input\:check input~i {
	background: #fff;
	border-color: currentColor;
	display: block;
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	display: flex;
	align-items: center;
	justify-content: center
}

.input\:check input~i:after {
	opacity: 0.4;
	transition: opacity 0.1s ease-in-out;
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	border-radius: inherit;
	border-width: 1px;
	border-style: solid;
	border-color: inherit
}

.input\:check input:not(:disabled):hover~i:after,
.input\:check input:not(:disabled):focus~i:after,
.input\:check input:checked~i:after {
	opacity: 1
}

.input\:check input:not(:disabled):focus~i:after {
	box-shadow: rgba(45, 54, 64, 0.2) 0px 0px 0px 3px
}

.input\:check input:disabled~i {
	opacity: 0.4
}

.input\:check input[type='checkbox']~i {
	border-radius: 3px;
	transition: background 0.15s ease-in-out
}

.input\:check input[type='checkbox']~i:before {
	color: #fff;
	content: "\f00c";
	display: inline-block;
	font-family: 'Font Awesome 5 Free';
	font-style: normal;
	font-variant: normal;
	font-weight: 900;
	text-rendering: auto;
	vertical-align: middle;
	-webkit-font-smoothing: antialiased;
	-ms-transform: translate(0, 0) scale(0);
	transform: translate(0, 0) scale(0);
	opacity: 0;
	transition: all 0.15s ease-in-out;
	font-size: 0.6em;
	line-height: 1
}

.input\:check input[type='checkbox']:checked~i {
	background: currentColor
}

.input\:check input[type='checkbox']:checked~i:before {
	-ms-transform: translate(0, 0) scale(1);
	transform: translate(0, 0) scale(1);
	opacity: 1
}

.input\:check input[type='radio']~i {
	border-radius: 50%
}

.input\:check input[type='radio']~i:before {
	content: "";
	background: currentcolor;
	box-shadow: inset rgba(255, 255, 255, 0.4) 0px 1px 1px;
	border-radius: inherit;
	border: 1px solid transparent;
	width: calc(100% - 6px);
	height: calc(100% - 6px);
	-ms-transform: scale(0);
	transform: scale(0);
	transition: transform 0.15s ease-in-out;
	display: block
}

.input\:check input[type='radio']:checked~i:before {
	-ms-transform: scale(1);
	transform: scale(1)
}

.input-inherit .input\:text,
.input-inherit .input\:text:focus,
.input-inherit .select,
.input-inherit .select:focus {
	border-color: currentcolor;
	color: currentcolor
}

.input-inherit ::-webkit-input-placeholder {
	color: currentcolor;
	opacity: 0.6
}

.input-inherit ::-moz-placeholder {
	color: currentcolor;
	opacity: 0.6
}

.input-inherit :-ms-input-placeholder {
	color: currentcolor;
	opacity: 0.6
}

.input-inherit ::-ms-input-placeholder {
	color: currentcolor;
	opacity: 0.6
}

.input-inherit ::placeholder {
	color: currentcolor;
	opacity: 0.6
}

.input-inherit .selectric-wrapper {
	color: currentcolor;
	border-color: currentcolor
}

.input-inherit .selectric-wrapper.selectric-open {
	border-color: currentcolor
}

.input-inherit .selectric-wrapper:not(.selectric-chosen) .label {
	color: currentcolor;
	opacity: 0.6
}

.input-inherit .input\:check input~i,
.input-inherit .input\:check input:not(:disabled):hover~i,
.input-inherit .input\:check input:not(:disabled):focus~i,
.input-inherit .input\:check input:checked~i {
	box-shadow: none
}

.input-inherit input[type='checkbox']~i:before {
	color: #2d3640
}

.input-transparent .input\:text,
.input-transparent .input\:text:focus,
.input-transparent .select,
.input-transparent .select:focus,
.input-transparent .selectric-wrapper:not(.selectric-open) .selectric,
.input-transparent .input\:check input~i {
	background: transparent
}

[data-modal] {
	display: flex;
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	z-index: 100;
	align-items: center;
	justify-content: center;
	visibility: hidden;
	opacity: 0
}

.modal-visible[data-modal] {
	visibility: visible;
	opacity: 1
}

.modal-overlay {
	background: rgba(13, 16, 19, 0.8);
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	-webkit-backdrop-filter: blur(3px);
	backdrop-filter: blur(3px)
}

.modal {
	background: #fff;
	position: relative;
	width: 98%;
	max-width: 800px;
	max-height: 90vh;
	display: flex;
	flex-direction: column;
	box-shadow: 0 20px 50px rgba(0, 0, 0, 0.15), 0 5px 5px rgba(0, 0, 0, 0.1);
	border-radius: 4px
}

.modal-close {
	position: relative;
	cursor: pointer;
	width: 40px;
	height: 40px;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 3px;
	color: inherit
}

.modal-close svg {
	color: currentColor;
	width: 14px
}

.modal-close svg line {
	fill: none;
	stroke: currentColor;
	stroke-width: 2
}

.modal-close:after {
	content: '';
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	border-radius: inherit;
	transition: background-color 0.1s linear
}

.modal-close:hover:after {
	background-color: rgba(45, 54, 64, 0.05)
}

.modal>.modal-close {
	position: absolute;
	top: 5px;
	right: 5px
}

.modal-header {
	flex: 0 0 auto;
	padding: 15px;
	padding-left: 30px;
	font-size: 1.5em;
	display: flex;
	justify-content: space-between;
	align-items: center;
	border-bottom: 1px solid rgba(45, 54, 64, 0.1)
}

.modal-content {
	flex: 0 1 auto;
	padding: 30px;
	overflow: auto
}

.modal-footer {
	flex: 0 0 auto;
	padding: 15px;
	text-align: right;
	border-top: 1px solid rgba(45, 54, 64, 0.1)
}

[data-modal],
.modal {
	transition: all .25s ease-in-out
}

.modal {
	-ms-transform: translateY(-50px);
	transform: translateY(-50px)
}

.modal-visible .modal {
	-ms-transform: translateY(0px);
	transform: translateY(0px)
}

.no-grid .grid,
.no-grid .fluid-grid {
	display: flex;
	flex-wrap: wrap;
	margin-right: 0 !important;
	margin-top: 0 !important;
	padding-right: 0 !important;
	padding-top: 0 !important
}

.no-grid .grid>* {
	flex: 0 0 auto;
	padding: inherit
}

.no-grid .fluid-grid>*,
.no-grid .fluid-grid::before,
.no-grid .fluid-grid::after {
	flex: 1 0 auto;
	flex-basis: inherit;
	padding: inherit
}

.no-grid .fluid-grid>:empty,
.no-grid .fluid-grid::before,
.no-grid .fluid-grid::after {
	content: '';
	order: 1;
	padding-bottom: 0 !important
}

@supports (display: grid) {

	.grid,
	.fluid-grid {
		display: grid;
		grid-gap: var(--gap, 0);
		gap: var(--gap, 0);
		grid-template-columns: repeat(var(--columns, 1), 1fr);
		margin: 0 !important;
		padding: 0 !important
	}

	.grid>*,
	.fluid-grid>* {
		max-width: calc(100vw - var(--mobile-gutter));
		min-width: 0;
		width: auto !important
	}

	.fluid-grid>:empty {
		display: none
	}
}

.fluid-grid {
	--width: 250px;
	flex-basis: 250px;
	grid-template-columns: repeat(auto-fill, minmax(var(--width), 1fr))
}

.grid\:1 {
	--columns: 1
}

.grid\:1>* {
	width: 100%
}

.grid\:2 {
	--columns: 2
}

.grid\:2>* {
	width: 50%
}

.grid\:3 {
	--columns: 3
}

.grid\:3>* {
	width: 33.3333333333%
}

@media (min-width: 421px) {
	.sm\:grid\:1 {
		--columns: 1
	}

	.sm\:grid\:1>* {
		width: 100%
	}

	.sm\:grid\:2 {
		--columns: 2
	}

	.sm\:grid\:2>* {
		width: 50%
	}

	.sm\:grid\:3 {
		--columns: 3
	}

	.sm\:grid\:3>* {
		width: 33.3333333333%
	}
}

@media (min-width: 641px) {
	.md\:grid\:1 {
		--columns: 1
	}

	.md\:grid\:1>* {
		width: 100%
	}

	.md\:grid\:2 {
		--columns: 2
	}

	.md\:grid\:2>* {
		width: 50%
	}

	.md\:grid\:3 {
		--columns: 3
	}

	.md\:grid\:3>* {
		width: 33.3333333333%
	}
}

@media (min-width: 861px) {
	.lg\:grid\:1 {
		--columns: 1
	}

	.lg\:grid\:1>* {
		width: 100%
	}

	.lg\:grid\:2 {
		--columns: 2
	}

	.lg\:grid\:2>* {
		width: 50%
	}

	.lg\:grid\:3 {
		--columns: 3
	}

	.lg\:grid\:3>* {
		width: 33.3333333333%
	}
}

@media (min-width: 1081px) {
	.xl\:grid\:1 {
		--columns: 1
	}

	.xl\:grid\:1>* {
		width: 100%
	}

	.xl\:grid\:2 {
		--columns: 2
	}

	.xl\:grid\:2>* {
		width: 50%
	}

	.xl\:grid\:3 {
		--columns: 3
	}

	.xl\:grid\:3>* {
		width: 33.3333333333%
	}
}

.flex,
.flex-inline {
	display: flex
}

.flex[class*='gap:'],
.flex-inline[class*='gap:'] {
	padding-right: 0 !important;
	padding-top: 0 !important;
	margin-right: 0 !important;
	margin-top: 0 !important
}

.flex>*,
.flex-inline>* {
	flex: 0 1 auto;
	min-width: 0;
	padding: inherit
}

.flex-inline {
	display: inline-flex
}

.ai\:start {
	align-items: flex-start
}

.ai\:center {
	align-items: center
}

.ai\:end {
	align-items: flex-end
}

.ai\:stretch {
	align-items: stretch
}

.jc\:start {
	justify-content: flex-start
}

.jc\:center {
	justify-content: center
}

.jc\:end {
	justify-content: flex-end
}

.jc\:around {
	justify-content: space-around
}

.jc\:between {
	justify-content: space-between
}

.fd\:column {
	flex-direction: column
}

.fd\:row {
	flex-direction: row
}

.fw\:wrap {
	flex-wrap: wrap
}

.fw\:no-wrap {
	flex-wrap: no-wrap
}

.flex\:00,
.flex-c\:00>* {
	flex: 0 0 auto
}

.flex\:10,
.flex-c\:10>* {
	flex: 1 0 auto
}

.flex\:11,
.flex-c\:11>* {
	flex: 1 1 auto
}

.flex\:01,
.flex-c\:01>* {
	flex: 0 1 auto
}

.flex\:99 {
	flex: 9999 1 auto
}

.flex-gap-wrap::before,
.flex-gap-wrap::after {
	content: '';
	display: block;
	height: 0.01px
}

.gap\:push {
	--gap: 75px;
	padding: 75px;
	padding: var(--push);
	margin: calc(75px * -2);
	margin: calc(var(--push) * -2)
}

.gap\:30 {
	--gap: 30px;
	margin: calc(30px * -2);
	padding: 30px
}

.gap\:20 {
	--gap: 20px;
	margin: calc(20px * -2);
	padding: 20px
}

.gap\:10 {
	--gap: 10px;
	margin: calc(10px * -2);
	padding: 10px
}

.margins\:0>*,
body .mt\:0 {
	margin-top: 0
}

.margins\:0>*,
body .mb\:0 {
	margin-bottom: 0
}

.margins\:em>*,
body .mt\:em {
	margin-top: 1em
}

.margins\:em>*,
body .mb\:em {
	margin-bottom: 1em
}

.margins\:push>*,
body .mt\:push {
	margin-top: 75px;
	margin-top: var(--push)
}

.margins\:push>*,
body .mb\:push {
	margin-bottom: 75px;
	margin-bottom: var(--push)
}

.margins\:1>*,
body .mt\:1 {
	margin-top: 1rem
}

.margins\:1>*,
body .mb\:1 {
	margin-bottom: 1rem
}

.margins\:2>*,
body .mt\:2 {
	margin-top: 2.5rem
}

.margins\:2>*,
body .mb\:2 {
	margin-bottom: 2.5rem
}

.margins\:3>*,
body .mt\:3 {
	margin-top: 4rem
}

.margins\:3>*,
body .mb\:3 {
	margin-bottom: 4rem
}

.margins\:4>*,
body .mt\:4 {
	margin-top: 6rem
}

.margins\:4>*,
body .mb\:4 {
	margin-bottom: 6rem
}

.margins\:5>*,
body .mt\:5 {
	margin-top: 9rem
}

.margins\:5>*,
body .mb\:5 {
	margin-bottom: 9rem
}

.margins\:0>*:first-child,
.margins\:em>*:first-child,
.margins\:push>*:first-child,
.margins\:1>*:first-child,
.margins\:2>*:first-child,
.margins\:3>*:first-child,
.margins\:4>*:first-child,
.margins\:5>*:first-child {
	margin-top: 0
}

.margins\:0>*:last-child,
.margins\:em>*:last-child,
.margins\:push>*:last-child,
.margins\:1>*:last-child,
.margins\:2>*:last-child,
.margins\:3>*:last-child,
.margins\:4>*:last-child,
.margins\:5>*:last-child {
	margin-bottom: 0
}

body .pt\:0,
body .p\:0 {
	padding-top: 0
}

body .pb\:0,
body .p\:0 {
	padding-bottom: 0
}

body .pt\:em,
body .p\:em {
	padding-top: 1em
}

body .pb\:em,
body .p\:em {
	padding-bottom: 1em
}

body .pt\:push,
body .p\:push {
	padding-top: 75px;
	padding-top: var(--push)
}

body .pb\:push,
body .p\:push {
	padding-bottom: 75px;
	padding-bottom: var(--push)
}

body .pt\:1,
body .p\:1 {
	padding-top: 1rem
}

body .pb\:1,
body .p\:1 {
	padding-bottom: 1rem
}

body .pt\:2,
body .p\:2 {
	padding-top: 2.5rem
}

body .pb\:2,
body .p\:2 {
	padding-bottom: 2.5rem
}

body .pt\:3,
body .p\:3 {
	padding-top: 4rem
}

body .pb\:3,
body .p\:3 {
	padding-bottom: 4rem
}

body .pt\:4,
body .p\:4 {
	padding-top: 6rem
}

body .pb\:4,
body .p\:4 {
	padding-bottom: 6rem
}

body .pt\:5,
body .p\:5 {
	padding-top: 9rem
}

body .pb\:5,
body .p\:5 {
	padding-bottom: 9rem
}

.focus-device {
	position: relative;
	margin: 0 auto;
	z-index: 0
}

.focus-device::after {
	content: '';
	display: block;
	position: relative;
	z-index: 20;
	background-repeat: no-repeat;
	background-position: 50% 50%;
	background-size: 100% 100%
}

.focus-device .screen {
	position: absolute;
	z-index: 10;
	overflow: hidden;
	font-size: 30px;
	color: #fff;
	text-align: center;
	background-color: #000;
	background-position: 50% 0;
	background-repeat: no-repeat;
	background-size: 100% 100%;
	box-shadow: #000 0px 0px 0px 1px;
	pointer-events: none
}

.focus-device .screen::after {
	background: rgba(0, 0, 0, 0.6);
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	bottom: 0;
	right: 0;
	z-index: 25;
	opacity: 0;
	transition: opacity 0.1s linear;
	display: flex;
	justify-content: center;
	align-items: center;
	overflow: hidden
}

.focus-device .screen[data-screenText]:after {
	content: attr(data-screenText)
}

.focus-device img,
.focus-device video {
	width: 100%;
	position: absolute;
	top: 0;
	left: 0
}

.focus-device img:nth-of-type(2) {
	-webkit-animation-name: pro-thumbnail;
	animation-name: pro-thumbnail;
	-webkit-animation-duration: 12s;
	animation-duration: 12s;
	-webkit-animation-iteration-count: infinite;
	animation-iteration-count: infinite
}

.focus-device video {
	position: absolute;
	top: 0;
	left: 0
}

@media (max-width: 900px) {
	.focus-device video {
		display: none
	}
}

.focus-device:hover .screen::after {
	opacity: 1
}

.iframePreview {
	-ms-transform-origin: 0 0;
	transform-origin: 0 0;
	overflow: hidden
}

.macbook .iframePreview {
	width: 1440px;
	height: 900px
}

.ipad .iframePreview {
	width: 768px;
	height: 1024px
}

.iphone .iframePreview {
	width: 320px;
	height: 568px
}

.macbook::after {
	background-image: url("../images/macbook.png");
	padding-bottom: calc(100% * 529 / 920)
}

.macbook .screen {
	top: calc(100% * 31 / 529 - 1px);
	left: calc(100% * 114 / 920 - 1px);
	width: calc(100% * 687 / 920 + 2px);
	height: calc(100% * 430 / 529 + 2px)
}

.ipad::before {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	border-radius: 15px;
	background: linear-gradient(135deg, #222, #111);
	border: 2px outset #bbb
}

.ipad::after {
	padding-bottom: calc(100% * 1300 / 1000)
}

.ipad .screen {
	top: 2.8%;
	left: 3.5%;
	right: 3.5%;
	bottom: 7%;
	border-radius: 6px
}

@media (max-width: 800px) {
	.ipad::before {
		border-radius: 5px
	}

	.ipad .screen {
		border-radius: 3px
	}
}

.iphone::after {
	background-image: url("../images/iphonex-300.png");
	padding-bottom: calc(100% * 1026 / 500)
}

.iphone .screen {
	top: calc(100% * 29 / 1026 - 1px);
	left: calc(100% * 33 / 500 - 1px);
	right: calc(100% * 33 / 500 - 1px);
	bottom: calc(100% * 55 / 1026 - 1px);
	font-size: 20px;
	padding-top: 15%;
	border-radius: 10px
}

.iphone .screen::before {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	background: url("../images/iphonex-bar-light.png");
	background-size: cover;
	padding-bottom: 17%
}

.iphone img {
	top: 8%
}

.iphone--dark .screen::before,
[data-theme-colour='dark'] .iphone .screen::before {
	background-image: url("../images/iphonex-bar-dark.png")
}

.iphone--dark .screen::before,
[data-theme-colour='dark'] .iphone .screen::before,
[data-theme-colour='dark'] .iphone-shadow .screen::before {
	background-image: url("../images/iphonex-bar-dark.png")
}

a.focus-device-link {
	overflow: hidden;
	text-indent: -9999px;
	position: absolute;
	top: 0;
	left: 0;
	bottom: 0;
	right: 0;
	outline: none;
	z-index: 5
}

a.focus-device-link:hover~.focus-device .screen:after {
	opacity: 1
}

.focus-devices-wrap {
	padding: 60px 0
}

.focus-devices {
	position: relative;
	margin: 0 auto
}

.focus-devices::after {
	padding-top: 41%;
	display: block;
	content: ''
}

.focus-devices .focus-device {
	pointer-events: none;
	position: absolute
}

.focus-devices .macbook {
	width: 70%;
	bottom: 2%;
	left: 8.5%;
	z-index: 1
}

.focus-devices .ipad {
	z-index: 2;
	width: 25%;
	bottom: 0;
	right: 0
}

.focus-devices .iphone {
	z-index: 3;
	width: 12%;
	bottom: 0;
	left: 0
}

.theme-hero {
	position: relative
}

.theme-hero>* {
	position: relative
}

.theme-hero .focus-devices {
	width: 90%;
	max-width: 1200px
}

.theme-hero-background {
	position: absolute;
	top: 0;
	right: 0;
	left: 0;
	bottom: 0;
	pointer-events: none;
	background-position: 50% 0%;
	background-size: cover
}

.theme-hero-background:after {
	content: '';
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	background-image: linear-gradient(to bottom, rgba(255, 255, 255, 0.5) 0%, #fff 75%)
}

.outer-width {
	background: #fff;
	margin: 0 auto;
	max-width: 1700px
}

.site-wrap {
	display: flex;
	flex-direction: column
}

@media (min-width: 861px) {
	.site-wrap {
		min-height: 100vh
	}
}

.site-main {
	flex: 1 0 auto
}

.site-header-position {
	position: absolute;
	left: 0;
	right: 0;
	top: 20px;
	z-index: 10
}

.site-header {
	background: rgba(34, 35, 40, 0.9);
	background-image: linear-gradient(to bottom, rgba(34, 35, 40, 0) 0%, rgba(34, 35, 40, 0.4) 100%), linear-gradient(to right, rgba(34, 35, 40, 0.4) 0%, rgba(34, 35, 40, 0) 50%, rgba(34, 35, 40, 0.4) 100%);
	border-radius: 4px;
	box-shadow: rgba(0, 0, 0, 0.3) 0px 10px 40px, inset rgba(0, 0, 0, 0.1) 0px 0px 0px 1px;
	flex: 0 0 auto;
	position: relative
}

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

.logo {
	align-items: center;
	color: #fff;
	display: inline-flex;
	flex: 0 0 auto;
	font-size: 2.4rem;
	font-weight: 700;
	justify-content: center
}

.logo a {
	color: inherit;
	display: block;
	line-height: 75px;
	padding: 0 30px
}

.logo span {
	opacity: 0.6
}

.logo img {
	max-height: 75px
}

@media (min-width: 901px) {
	.header-push::before {
		content: '';
		display: block;
		height: 95px
	}

	.header-push+.header-push::before,
	.header-push+* .header-push::before {
		display: none
	}
}

.site-navigation {
	color: #fff;
	flex: 0 1 auto;
	font-size: 1.2rem;
	line-height: 75px
}

.site-navigation .nav {
	display: flex
}

.site-navigation .nav__item {
	flex: 0 0 auto;
	position: relative;
	transition: opacity 0.2s linear
}

.site-navigation .nav:hover .nav__item:not(:hover) {
	opacity: 0.6
}

.site-navigation .nav:not(:hover) .nav__item.is-active,
.site-navigation .nav__item:hover {
	opacity: 1;
	background: rgba(255, 255, 255, 0.05)
}

.site-navigation .nav__link {
	color: currentColor;
	display: block;
	font-weight: bold;
	padding: 0 20px;
	position: relative;
	text-transform: uppercase
}

.site-navigation .customer-only {
	color: #ddf7aa;
	opacity: 1
}

.site-navigation .nav__link--icon {
	padding: 0 16px
}

.site-navigation .nav__link--icon svg {
	height: 20px;
	max-width: 30px;
	vertical-align: middle
}

.mobile-header-wrap {
	flex: 0 0 auto;
	order: -1;
	position: -webkit-sticky;
	position: sticky;
	top: 0;
	z-index: 10
}

.mobile-header {
	align-items: center;
	background: #222328;
	box-shadow: rgba(0, 0, 0, 0.15) 0px 1px 5px;
	color: #fff;
	display: flex;
	height: 55px;
	justify-content: space-between;
	padding: 0 10px;
	position: relative;
	transform-style: preserve-3d;
	z-index: 20
}

.mobile-header a {
	color: currentColor
}

.mobile-logo {
	display: block;
	flex: 0 0 auto;
	font-size: 1.6rem;
	font-weight: bold;
	line-height: 55px
}

.mobile-logo span {
	opacity: 0.6
}

.mobile-nav-toggle {
	align-items: center;
	background: rgba(255, 255, 255, 0.1);
	border-radius: 3px;
	cursor: pointer;
	display: flex;
	flex: 0 0 auto;
	font-size: 1.1rem;
	font-weight: bold;
	height: 40px;
	justify-content: center;
	padding: 0 15px;
	text-transform: uppercase
}

.mobile-nav-toggle .mobile-nav-toggle__icon {
	margin-right: 10px
}

.mobile-nav-toggle__icon {
	font-size: 2px;
	color: inherit;
	width: 19px;
	height: 19px;
	position: relative;
	display: inline-block;
	vertical-align: middle;
	cursor: pointer
}

.mobile-nav-toggle__icon:before,
.mobile-nav-toggle__icon:after,
.mobile-nav-toggle__icon>i:before,
.mobile-nav-toggle__icon>i:after {
	content: '';
	display: block;
	width: 100%;
	height: 1em;
	background: currentColor;
	border-radius: 2px;
	position: absolute;
	top: 50%;
	left: 0;
	transition: all 0.2s ease-in-out
}

.mobile-nav-toggle__icon:before {
	margin-top: -3.5em
}

.mobile-nav-toggle__icon:after {
	margin-top: 2.5em
}

.mobile-nav-toggle__icon>i:before,
.mobile-nav-toggle__icon>i:after {
	-ms-transform: rotate(0deg);
	transform: rotate(0deg);
	margin-top: -0.5em
}

.mobile-nav-active .mobile-nav-toggle__icon:before {
	-ms-transform: translateY(-5px);
	transform: translateY(-5px);
	opacity: 0
}

.mobile-nav-active .mobile-nav-toggle__icon:after {
	-ms-transform: translateY(5px);
	transform: translateY(5px);
	opacity: 0
}

.mobile-nav-active .mobile-nav-toggle__icon>i:before {
	-ms-transform: rotate(45deg);
	transform: rotate(45deg)
}

.mobile-nav-active .mobile-nav-toggle__icon>i:after {
	-ms-transform: rotate(-45deg);
	transform: rotate(-45deg)
}

.mobile-nav-panel {
	background: #303139;
	color: #fff;
	height: 100%;
	left: 0;
	padding-top: 55px;
	overflow: auto;
	position: fixed;
	top: 0;
	-ms-transform: translateY(-100%);
	transform: translateY(-100%);
	transition: transform ease-in-out 0.3s;
	width: 100%;
	z-index: 15;
	-webkit-backface-visibility: hidden;
	backface-visibility: hidden;
	-webkit-overflow-scrolling: touch
}

@supports ((-webkit-backdrop-filter: blur(10px)) or (backdrop-filter: blur(10px))) {
	.mobile-nav-panel {
		background: rgba(48, 49, 57, 0.94);
		-webkit-backdrop-filter: blur(10px);
		backdrop-filter: blur(10px)
	}
}

.mobile-nav-panel a {
	color: inherit
}

.mobile-nav-active .mobile-nav-panel {
	overflow: auto;
	-ms-transform: translateY(0);
	transform: translateY(0)
}

.mobile-nav-panel::after {
	content: '';
	display: block;
	height: 90px
}

.mobile-nav .nav__item {
	border-bottom: 1px solid rgba(255, 255, 255, 0.15)
}

.mobile-nav .nav__link {
	display: block;
	padding: 15px;
	position: relative
}

.mobile-nav svg {
	height: 30px
}

.site-footer {
	border-top: 1px solid rgba(45, 54, 64, 0.1);
	color: #8b9cae;
	flex: 0 0 auto;
	font-size: 1.3rem;
	font-weight: 600;
	padding: 18px 0
}

.site-footer a {
	color: inherit
}

.site-footer a:hover {
	color: #000
}

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

@media (max-width: 840px) {
	.site-footer__align {
		flex-direction: column
	}
}

.site-footer__align>* {
	flex: 0 1 auto
}

.footer-links {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	justify-content: center;
	max-width: 100%
}

.footer-links a {
	display: block;
	min-width: 48px;
	text-align: center
}

.footer-links a,
.footer-links .footer-links__text {
	line-height: 48px;
	padding: 0 5px;
	margin: 0 4px
}

.footer-links li:first-child .footer-links__text {
	padding-left: 0
}

.footer-links a:hover {
	text-decoration: underline
}

.footer-links svg {
	height: 20px;
	vertical-align: middle;
	max-width: 30px
}

.footer-links__card {
	margin-left: 10px;
	display: block
}

.footer-links__card svg {
	height: 30px;
	max-width: 34px
}

.section {
	padding-top: 75px;
	padding-top: var(--push);
	padding-bottom: 75px;
	padding-bottom: var(--push)
}

.section--alt {
	background-color: #f4f6f7
}

.section--dark {
	background-color: #2f3647;
	color: #fff
}

.section--shadow {
	border-bottom: 1px solid rgba(139, 156, 174, 0.3);
	box-shadow: rgba(139, 156, 174, 0.1) 0px 40px 40px
}

.header-coupon {
	color: #fff;
	background: #424956;
	padding: 15px 0;
	text-align: center;
	font-weight: 500
}

.header-coupon svg {
	width: 14px;
	margin-right: 6px
}

.header-coupon a:not([class]) {
	color: inherit;
	border-bottom: 1px solid currentColor
}

.header-coupon__title {
	margin-right: 6px
}

.header-coupon__text {
	opacity: 0.8
}

.header-coupon__button {
	color: #fff;
	display: inline-block;
	padding: 8px 20px;
	border-radius: 3px;
	background: #63ba5f;
	margin-left: 6px;
	font-weight: bold;
	text-transform: uppercase;
	font-size: 0.8em;
	border: 1px solid #78c374;
	border-top-color: #a8d9a6;
	text-shadow: #418f3e 0px -1px 0px;
	box-shadow: rgba(99, 186, 95, 0) 0px 3px 20px;
	transition: all 0.3s ease-in-out
}

.header-coupon__button:hover {
	box-shadow: rgba(99, 186, 95, 0.5) 0px 3px 20px;
	-ms-transform: translateY(-2px);
	transform: translateY(-2px)
}

.header-coupon__message {
	background: #63ba5f;
	border-radius: 4px;
	padding: 10px
}

.page-title {
	background-color: #e2e6ef;
	box-shadow: inset rgba(0, 0, 0, 0.08) 0px -1px 0px;
	padding: 50px 0;
	margin-bottom: 25px
}

@media (max-width: 860px) {
	.page-title {
		padding: 20px 0
	}
}

.index-hero {
	background: #e2e6ef;
	overflow: hidden;
	position: relative
}

.index-hero::after {
	position: absolute;
	bottom: 0;
	left: 0;
	right: 0;
	height: 1px;
	background: rgba(45, 54, 64, 0.15);
	content: ''
}

.index-hero .minor-header {
	opacity: 0.4;
	margin-bottom: 4px
}

.index-hero .h1 {
	color: rgba(45, 54, 64, 0.6);
	text-align: center;
	font-weight: 400
}

.index-hero .h1 a {
	font-weight: 700;
	color: #2d3640
}

.index-hero p {
	font-size: 2rem
}

.index-hero .width {
	position: relative
}

.index-hero__align {
	display: flex;
	flex-wrap: wrap;
	margin-right: 0 !important;
	margin-top: 0 !important;
	padding-right: 0 !important;
	padding-top: 0 !important;
	align-items: center
}

.index-hero__align>* {
	flex: 1 0 auto;
	padding: inherit;
	width: 100%
}

.index-hero__align>*:empty {
	padding-bottom: 0 !important
}

@media (min-width: 861px) {
	.index-hero__left {
		width: 60%;
		align-self: flex-end
	}

	.index-hero__right {
		width: 40%;
		padding-left: 75px;
		padding-bottom: 30px;
	}
}

@media (max-width: 860px) {
	.index-hero__right {
		padding: 40px 0
	}
}

.index-hero__link {
	display: block;
	position: relative;
	z-index: 1
}

.index-hero__link::before {
	content: '';
	display: block;
	padding-bottom: 50%
}

@media (max-width: 860px) {
	.index-hero__link {
		max-height: 300px;
		overflow: hidden
	}
}

.index-hero__desktop {
	width: 80%;
	height: 100%;
	position: absolute;
	top: 0;
	left: 0;
	box-shadow: rgba(0, 0, 0, 0.2) 0px 10px 20px;
	border-radius: 4px 4px 0px 0px
}

.index-hero__desktop::before {
	content: '';
	border: 1px solid rgba(0, 0, 0, 0.3);
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 2;
	border-radius: inherit
}

.index-hero__desktop img {
	width: 100%;
	position: absolute;
	top: 0;
	left: 0;
	z-index: 1;
	border-radius: inherit
}

.index-hero__mobile {
	width: 24%;
	height: 100%;
	overflow: hidden;
	position: absolute;
	z-index: 3;
	right: 0;
	top: 16%;
	border-radius: 10px;
	background: #111;
	box-shadow: rgba(0, 0, 0, 0.2) 0px 10px 20px;
	padding: 4% 1%
}

@media (max-width: 860px) {
	.index-hero__mobile {
		bottom: auto;
		top: 40px
	}
}

.index-hero__mobile img {
	border-radius: 3px;
	width: 100%
}

.theme-grid {
	--gap: 60px;
	margin: calc(60px * -2);
	padding: 60px;
	--columns: 1
}

.theme-grid>* {
	width: 100%
}

@media (min-width: 555px) {
	.theme-grid {
		--columns: 2
	}

	.theme-grid>* {
		width: 50%
	}
}

@media (min-width: 910px) {
	.theme-grid {
		--columns: 3
	}

	.theme-grid>* {
		width: 33.3333333333%
	}
}

@-webkit-keyframes filter-animation {

	0%,
	100% {
		opacity: 1;
		transform: translateY(0px)
	}

	50% {
		opacity: 0.3;
		transform: translateY(20px)
	}
}

@keyframes filter-animation {

	0%,
	100% {
		opacity: 1;
		transform: translateY(0px)
	}

	50% {
		opacity: 0.3;
		transform: translateY(20px)
	}
}

@-webkit-keyframes pro-thumbnail {

	0%,
	47% {
		opacity: 1
	}

	52%,
	95% {
		opacity: 0
	}
}

@keyframes pro-thumbnail {

	0%,
	47% {
		opacity: 1
	}

	52%,
	95% {
		opacity: 0
	}
}

.filter-in-progress {
	-webkit-animation-name: filter-animation;
	animation-name: filter-animation;
	-webkit-animation-duration: 0.6s;
	animation-duration: 0.6s
}

.theme-grid li {
	position: relative
}

.theme-grid__thumbnail {
	box-shadow: rgba(45, 54, 64, 0.15) 0px 10px 20px;
	position: relative;
	border-radius: 5px;
	z-index: 1
}

.theme-grid__thumbnail::before {
	content: '';
	display: block;
	padding-bottom: 60%
}

@media (max-width: 554px) {
	.theme-grid__thumbnail::before {
		padding-bottom: 50%
	}
}

.theme-grid__thumbnail a {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	overflow: hidden;
	border-radius: inherit
}

.theme-grid__thumbnail a::before {
	content: 'More information';
	display: flex;
	align-items: center;
	justify-content: center;
	background: rgba(45, 54, 64, 0.85);
	color: #fff;
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	font-size: 2.4rem;
	opacity: 0;
	transition: opacity 0.2s ease-in-out;
	z-index: 10
}

.theme-grid__thumbnail a:hover::before {
	opacity: 1
}

.theme-grid__thumbnail a::after {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	border: 1px solid rgba(45, 54, 64, 0.2);
	border-radius: inherit;
	z-index: 20
}

.theme-grid__thumbnail img {
	width: 100%;
	position: absolute;
	top: 0;
	left: 0;
	z-index: 5
}

.theme-grid__thumbnail img:nth-child(2) {
	-webkit-animation-name: pro-thumbnail;
	animation-name: pro-thumbnail;
	-webkit-animation-duration: 7s;
	animation-duration: 7s;
	-webkit-animation-iteration-count: infinite;
	animation-iteration-count: infinite
}

.theme-grid__text {
	color: #8b9cae;
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex-wrap: wrap;
	margin-top: 18px;
	padding: 0 18px
}

.theme-grid__name {
	color: #0d1013 !important;
	font-weight: bold;
	flex: 0 0 auto;
	font-size: 2rem
}

.theme-grid__name:hover {
	text-decoration: underline
}

.theme-grid__name::before {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0
}

.theme-grid__price,
.theme-grid__sale {
	flex: 0 0 auto;
	background: #dd7237;
	background: #63ba5f;
	color: #fff;
	text-transform: uppercase;
	padding: 0.3em 0.5em;
	border-radius: 3px;
	font-weight: bold;
	font-size: 0.8em
}

.theme-grid__price {
	background: #8b9cae
}

.filter-pro .theme-grid__price {
	background: #63ba5f
}

.theme-grid__desc {
	flex: 0 0 100%;
	color: #8b9cae;
	margin-top: 15px;
	padding-bottom: 40px
}

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

@media (max-width: 800px) {
	.theme-filter-align {
		flex-direction: column
	}

	.theme-filter-align .theme-filter {
		margin-top: 10px
	}
}

.theme-filter {
	display: flex;
	flex-wrap: wrap
}

.theme-filter li {
	flex: 0 0 auto;
	padding: 10px 15px;
	border-radius: 40px;
	cursor: pointer;
	text-align: center;
	margin: 0 1px
}

.theme-filter li:not(.active):hover {
	background: rgba(255, 255, 255, 0.5)
}

@media (min-width: 420px) {
	.theme-filter li {
		width: 9em;
		padding: 10px 0
	}
}

.theme-filter .active {
	background: #fff;
	font-weight: bold
}

#theme-grid[data-filter='filter-light'] .theme-grid__item:not(.filter-light),
#theme-grid[data-filter='filter-dark'] .theme-grid__item:not(.filter-dark),
#theme-grid[data-filter='filter-both'] .theme-grid__item:not(.filter-both),
#theme-grid[data-filter='filter-pro'] .theme-grid__item:not(.filter-pro) {
	display: none
}

.index-benefits {
	text-align: center
}

.index-benefits svg {
	height: 32px;
	max-width: 40px
}

.index-benefits h3 {
	margin: .5em 0
}

.index-benefits p {
	margin-top: 0;
	color: #8b9cae
}

.index-benefits a {
	color: inherit;
	text-decoration: underline
}

@supports ((position: -webkit-sticky) or (position: sticky)) {
	@media (min-width: 1081px) {
		.theme-title-wrap {
			padding: 10px 0;
			position: -webkit-sticky;
			position: sticky;
			top: 0;
			z-index: 5;
			background: #fff
		}
	}
}

.theme-title {
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex-wrap: wrap;
	position: relative;
	text-align: center
}

.theme-title>* {
	flex: 0 1 auto;
	max-width: 100%
}

@media (max-width: 860px) {
	.theme-title {
		flex-direction: column
	}
}

.theme-title__buttons .button {
	line-height: 36px;
	padding: .6em 2em
}

@media (max-width: 860px) {
	.theme-title__buttons .button {
		margin-top: 1.5em
	}
}

.theme-title__buttons .button.button--buy {
	padding-right: 0.5em;
	margin-left: 8px
}

.theme-title__buttons .button span {
	display: inline-block;
	background: rgba(70, 152, 67, 0.5);
	border-radius: 3px;
	padding: 0 0.5em;
	margin-left: 18px
}

.theme-info {
	border-bottom: 1px dashed rgba(139, 156, 174, 0.6);
	padding: 30px 0 45px 0
}

.theme-stats {
	display: flex;
	flex: 1 1 auto
}

.theme-stats li {
	flex: 0 1 270px;
	padding-right: 20px
}

@media (max-width: 500px) {
	.theme-stats li:first-child {
		display: none
	}
}

.theme-stats strong {
	display: block
}

.theme-description {
	flex: 1 1 10%;
	color: #2d3640;
	font-size: 1.8rem;
	line-height: 1.8
}

@media (max-width: 860px) {
	.theme-description {
		font-size: 1.65rem
	}
}

.theme-terms {
	line-height: 1.8;
	color: #8b9cae
}

.theme-terms a {
	color: inherit;
	border-bottom: 1px solid rgba(45, 54, 64, 0.4)
}

.theme-terms a:hover {
	border-color: #2d3640
}

.theme-screenshots {
	--gap: 40px;
	margin: calc(40px * -2);
	padding: 40px;
	--columns: 1
}

.theme-screenshots>* {
	width: 100%
}

@media (min-width: 731px) {
	.theme-screenshots {
		--columns: 2
	}

	.theme-screenshots>* {
		width: 50%
	}
}

@media (min-width: 930px) {
	.theme-screenshots {
		--columns: 3
	}

	.theme-screenshots>* {
		width: 33.3333333333%
	}
}

@media (max-width: 730px) {
	@supports (display: grid) {
		.theme-screenshots {
			max-width: 430px;
			margin: 0 auto !important
		}
	}
}

.theme-screenshots .screenshot {
	background: #fff;
	background-size: cover;
	background-position: 50% 50%;
	position: relative;
	display: block;
	border-radius: 4px;
	pointer-events: none;
	box-shadow: rgba(0, 0, 0, 0.25) 0px 15px 30px;
	overflow: hidden
}

.theme-screenshots .screenshot:before {
	content: '';
	display: block;
	padding-bottom: 56.1%
}

.theme-screenshots .screenshot>img {
	border-radius: inherit;
	width: 100%;
	height: 100%;
	position: absolute;
	top: 0;
	left: 0
}

.theme-screenshots .screenshot:after {
	content: "";
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	border-radius: inherit;
	box-shadow: inset rgba(0, 0, 0, 0.3) 0px 0px 0px 1px;
	z-index: 1
}

.theme-screenshots p {
	padding: 0px 4px 40px 24px;
	margin: 0;
	color: #8b9cae;
	line-height: 1.8
}

.theme-screenshots h4 {
	color: #0d1013;
	display: block;
	padding-left: 24px;
	font-size: 1.1em;
	font-weight: bold;
	margin: 20px 0 6px 0;
	position: relative
}

.theme-screenshots svg {
	width: 100%;
	max-width: 14px;
	max-height: 16px;
	position: absolute;
	left: 0;
	top: 50%;
	-ms-transform: translateY(-50%);
	transform: translateY(-50%);
	fill: #8b9cae
}

.pseudo-screenshot {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	overflow: hidden;
	border-radius: inherit;
	z-index: 1
}

.pseudo-screenshot>* {
	z-index: 2
}

.pseudo-screenshot--background {
	background-size: cover;
	background-position: 50% 0%
}

.pseudo-screenshot--background:before {
	content: '';
	background: inherit;
	position: absolute;
	top: -20px;
	right: -20px;
	bottom: -20px;
	left: -20px;
	-webkit-filter: blur(10px);
	filter: blur(10px)
}

.pseudo-screenshot--background:after {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background: rgba(13, 16, 19, 0.3)
}

.theme-screenshots-holiday {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	overflow: hidden
}

.theme-screenshots-holiday:before,
.theme-screenshots-holiday:after {
	content: '';
	width: 500px;
	height: 500px;
	position: absolute;
	left: 50%;
	margin-left: -250px;
	bottom: 0;
	background: url("../images/theme-screenshots-snow.png") repeat;
	background-size: 410px auto
}

.theme-screenshots-holiday:before {
	-ms-transform: translate(-20px, -230px);
	transform: translate(-20px, -230px);
	opacity: 0.7;
	-webkit-animation: theme-screenshots-holiday 12s 3s linear infinite;
	animation: theme-screenshots-holiday 12s 3s linear infinite
}

.theme-screenshots-holiday:after {
	-webkit-animation: theme-screenshots-holiday2 6s 0s linear infinite;
	animation: theme-screenshots-holiday2 6s 0s linear infinite
}

@-webkit-keyframes theme-screenshots-holiday {
	0% {
		transform: translate(-20px, -230px)
	}

	100% {
		transform: translate(20px, 100%)
	}
}

@keyframes theme-screenshots-holiday {
	0% {
		transform: translate(-20px, -230px)
	}

	100% {
		transform: translate(20px, 100%)
	}
}

@-webkit-keyframes theme-screenshots-holiday2 {
	0% {
		transform: translate(10px, -230px)
	}

	100% {
		transform: translate(-30px, 100%)
	}
}

@keyframes theme-screenshots-holiday2 {
	0% {
		transform: translate(10px, -230px)
	}

	100% {
		transform: translate(-30px, 100%)
	}
}

.pseudo-screenshot\:responsive::before {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background: rgba(255, 255, 255, 0.75)
}

.pseudo-screenshot\:responsive span {
	display: block;
	position: absolute;
	width: 60%;
	padding-top: 100%;
	left: 20%;
	top: 10px;
	-ms-transform: rotate(-7deg);
	transform: rotate(-7deg)
}

.pseudo-screenshot\:responsive span::before {
	content: '';
	position: absolute;
	background: url("../images/iphonex-bar-dark.png");
	background-size: cover;
	left: 6.3%;
	right: 6.3%;
	top: 3.1%;
	height: 8.8%
}

.pseudo-screenshot\:responsive span i {
	background-position: 50% 0;
	background-size: 100% auto;
	position: absolute;
	top: 11.5%;
	left: 6.3%;
	right: 6.3%;
	height: 100%
}

.pseudo-screenshot\:responsive span:after {
	content: '';
	display: block;
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background: url("../images/iphonex-200.png") no-repeat;
	background-size: 100% auto
}

@-webkit-keyframes theme-screenshots-countdown {
	0% {
		content: '10'
	}

	9% {
		content: '09'
	}

	18% {
		content: '08'
	}

	27% {
		content: '07'
	}

	36% {
		content: '06'
	}

	45% {
		content: '05'
	}

	54% {
		content: '04'
	}

	63% {
		content: '03'
	}

	72% {
		content: '02'
	}

	81% {
		content: '01'
	}

	90% {
		content: '00'
	}
}

@keyframes theme-screenshots-countdown {
	0% {
		content: '10'
	}

	9% {
		content: '09'
	}

	18% {
		content: '08'
	}

	27% {
		content: '07'
	}

	36% {
		content: '06'
	}

	45% {
		content: '05'
	}

	54% {
		content: '04'
	}

	63% {
		content: '03'
	}

	72% {
		content: '02'
	}

	81% {
		content: '01'
	}

	90% {
		content: '00'
	}
}

.pseudo-screenshot\:countdown {
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 20px
}

@media (max-width: 1020px) {
	.pseudo-screenshot\:countdown {
		font-size: 14px
	}
}

.pseudo-screenshot\:countdown:before {
	content: '2 weeks, 3 days and 12:34:'
}

.pseudo-screenshot\:countdown:after {
	content: '10';
	width: 1em;
	-webkit-animation: theme-screenshots-countdown 11s ease-in-out 0s infinite;
	animation: theme-screenshots-countdown 11s ease-in-out 0s infinite
}

.pseudo-screenshot--editor-background::after {
	background: #000;
	background: var(--screenshot-editor-overlay, #000);
	opacity: 0.4;
	opacity: var(--screenshot-editor-overlay-opacity, 0.4)
}

.pseudo-screenshot\:editor {
	background: #fff;
	position: absolute;
	top: 30px;
	left: 30px;
	border-radius: 5px;
	width: 200%;
	height: 200%;
	box-shadow: rgba(0, 0, 0, 0.4) 0px 10px 20px;
	overflow: hidden;
	-ms-transform: scale(0.6);
	transform: scale(0.6);
	z-index: 2;
	-ms-transform-origin: 0 0;
	transform-origin: 0 0
}

.pseudo-screenshot\:editor li {
	display: block;
	padding: 20px;
	position: relative
}

.pseudo-screenshot\:editor li:not(:first-child) {
	padding-left: 95px
}

.pseudo-screenshot\:editor li:before {
	font-weight: bold;
	display: block
}

.pseudo-screenshot\:editor li:after {
	display: block;
	opacity: 0.5;
	white-space: nowrap;
	margin-top: 5px
}

.pseudo-screenshot\:editor li:first-child {
	background: rgba(34, 34, 34, 0.08);
	border-bottom: 1px solid rgba(34, 34, 34, 0.15)
}

.pseudo-screenshot\:editor li:first-child:before {
	content: 'Customize layout';
	font-weight: bold
}

.pseudo-screenshot\:editor li:nth-child(2):before {
	content: 'Fluid width?'
}

.pseudo-screenshot\:editor li:nth-child(2):after {
	content: 'Enabling this will increase the width of the site so it occupies the entire width of your browser.'
}

.pseudo-screenshot\:editor li:nth-child(3):before {
	content: 'Grid layout?'
}

.pseudo-screenshot\:editor li:nth-child(3):after {
	content: 'If enabled, the forums will be displayed as a grid instead of a table.'
}

.pseudo-screenshot\:editor li:nth-child(4):before {
	content: 'Sticky sidebar?'
}

.pseudo-screenshot\:editor li:nth-child(4):after {
	content: 'If enabled, the sidebar will stick to the top of the screen for easy access.'
}

.pseudo-screenshot\:editor i {
	background: #e5e5e5;
	display: block;
	border-radius: 15px;
	position: absolute;
	z-index: 0;
	width: 50px;
	height: 30px;
	left: 20px;
	top: 50%;
	-ms-transform: translateY(-50%);
	transform: translateY(-50%);
	box-shadow: inset rgba(0, 0, 0, 0.15) 0px 0px 0px 2px;
	padding: 2px
}

.pseudo-screenshot\:editor i:before {
	content: '';
	width: 26px;
	height: 26px;
	background: #fff;
	display: block;
	border-radius: 50%;
	box-shadow: rgba(0, 0, 0, 0.25) 0px 3px 6px
}

.pseudo-screenshot\:editor li:nth-child(2) i {
	-webkit-animation: screenshot-editor 5s linear 0s alternate infinite;
	animation: screenshot-editor 5s linear 0s alternate infinite
}

.pseudo-screenshot\:editor li:nth-child(2) i:before {
	-webkit-animation: screenshot-editor-toggle 5s linear 0s alternate infinite;
	animation: screenshot-editor-toggle 5s linear 0s alternate infinite
}

.pseudo-screenshot\:editor li:nth-child(3) i {
	-webkit-animation: screenshot-editor 5s linear 1.5s alternate infinite;
	animation: screenshot-editor 5s linear 1.5s alternate infinite
}

.pseudo-screenshot\:editor li:nth-child(3) i:before {
	-webkit-animation: screenshot-editor-toggle 5s linear 1.5s alternate infinite;
	animation: screenshot-editor-toggle 5s linear 1.5s alternate infinite
}

@-webkit-keyframes screenshot-editor {

	0%,
	50% {
		background: #e5e5e5
	}

	52%,
	100% {
		background: #2aad55
	}
}

@keyframes screenshot-editor {

	0%,
	50% {
		background: #e5e5e5
	}

	52%,
	100% {
		background: #2aad55
	}
}

@-webkit-keyframes screenshot-editor-dark {

	0%,
	50% {
		background: #3d3d3d;
		background: var(--screenshot-editor-toggle)
	}

	52%,
	100% {
		background: #2aad55
	}
}

@keyframes screenshot-editor-dark {

	0%,
	50% {
		background: #3d3d3d;
		background: var(--screenshot-editor-toggle)
	}

	52%,
	100% {
		background: #2aad55
	}
}

@-webkit-keyframes screenshot-editor-toggle {

	0%,
	50% {
		transform: translateX(0px)
	}

	52%,
	100% {
		transform: translateX(20px)
	}
}

@keyframes screenshot-editor-toggle {

	0%,
	50% {
		transform: translateX(0px)
	}

	52%,
	100% {
		transform: translateX(20px)
	}
}

.pseudo-screenshot\:minimal {
	background: #fff
}

.pseudo-screenshot\:minimal ul {
	position: absolute;
	top: 0;
	left: 0;
	width: 110%;
	-ms-transform: rotate(-3deg) translate(-10px, -12px);
	transform: rotate(-3deg) translate(-10px, -12px)
}

.pseudo-screenshot\:minimal li {
	display: block;
	border-bottom: 1px solid #e7e7e7;
	padding: 10px 0 10px 45px;
	font-weight: bold;
	color: #aaa
}

.pseudo-screenshot\:minimal li:nth-child(1):before {
	content: 'online_list'
}

.pseudo-screenshot\:minimal li:nth-child(2):before {
	content: 'online_user_ip'
}

.pseudo-screenshot\:minimal li:nth-child(3) {
	color: #62ae38
}

.pseudo-screenshot\:minimal li:nth-child(3)::before {
	content: 'PAGE_CONTAINER ✓'
}

.pseudo-screenshot\:minimal li:nth-child(4):before {
	content: 'page_nav'
}

.pseudo-screenshot\:minimal li:nth-child(5):before {
	content: 'page_view'
}

.pseudo-screenshot\:minimal li:nth-child(6):before {
	content: 'payment_cancel_recurring'
}

.pseudo-screenshot\:fluid {
	background: #374048
}

.screenshot-fluid-browser {
	position: absolute;
	top: 30px;
	left: 30px;
	width: 500px;
	height: 100%;
	background: #fff;
	border-radius: 3px;
	z-index: 1;
	box-shadow: rgba(0, 0, 0, 0.3) 0px 0px 20px
}

.screenshot-fluid-browser:after {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	border: 1px solid rgba(255, 255, 255, 0.3);
	border-radius: inherit
}

.screenshot-fluid-bar {
	height: 30px;
	border-radius: inherit;
	border-bottom-left-radius: 0;
	background: #edeced;
	box-shadow: rgba(0, 0, 0, 0.3) 0px 1px 0px 0px;
	overflow: hidden;
	padding-left: 9px;
	display: flex;
	align-items: center;
	position: relative
}

.screenshot-fluid-bar i {
	float: left;
	width: 12px;
	height: 12px;
	border-radius: 50%;
	box-shadow: inset rgba(0, 0, 0, 0.15) 0px 0px 0px 1px;
	background: #fc605b;
	border-color: #df4845;
	position: relative
}

.screenshot-fluid-bar i:before,
.screenshot-fluid-bar i:after {
	content: '';
	width: inherit;
	height: inherit;
	border-radius: inherit;
	position: absolute;
	box-shadow: inherit;
	top: 0;
	left: 16px;
	background: #fdbc40
}

.screenshot-fluid-bar i:after {
	background: #33c748;
	left: 32px
}

.screenshot-fluid-screen {
	height: 200px;
	background-size: 410px auto;
	background-position: 0 0
}

.pseudo-screenshot\:guest {
	display: flex;
	align-items: center
}

.pseudo-screenshot\:guest:after {
	background: rgba(13, 16, 19, 0.7)
}

.pseudo-screenshot\:guest .screenshot-guest-align {
	position: relative;
	color: #fff;
	font-size: 10px;
	padding: 0 20px
}

.pseudo-screenshot\:guest .screenshot-guest-text:before {
	content: 'Welcome to xenfocus';
	font-size: 1.45em;
	font-weight: bold;
	display: block;
	padding-bottom: 8px
}

.pseudo-screenshot\:guest .screenshot-guest-text:after {
	content: "Register a free account today to become a member! Once signed in, you'll be able to participate on this site by adding your own topics and posts, as well as connect with other members through your own private inbox!";
	display: block
}

.pseudo-screenshot\:guest .screenshot-guest-buttons {
	padding-top: 15px;
	font-size: 0.9em
}

.pseudo-screenshot\:guest .screenshot-guest-buttons span {
	text-transform: uppercase;
	display: inline-flex;
	align-items: center;
	border-radius: 3px;
	border: 1px solid rgba(255, 255, 255, 0.5);
	margin: 0 5px;
	padding: 3px 8px;
	font-weight: bold
}

.pseudo-screenshot\:guest .screenshot-guest-buttons span:after {
	content: '→ Login';
	flex: 0 0 auto
}

.pseudo-screenshot\:guest .screenshot-guest-buttons span:last-child:after {
	content: '+ Register'
}

[data-theme-colour='dark'] {
	--screenshot-background: #232323;
	--screenshot-text: #eee;
	--screenshot-editor-toggle: #3d3d3d;
	--screenshot-editor-overlay: rgba(255, 255, 255, 0.4)
}

[data-theme-colour='dark'] .screenshot {
	background: #232323;
	background: var(--screenshot-background);
	color: #eee;
	color: var(--screenshot-text)
}

[data-theme-colour='dark'] .pseudo-screenshot\:editor {
	background: #232323;
	background: var(--screenshot-background)
}

[data-theme-colour='dark'] .pseudo-screenshot\:editor li:first-child {
	background: rgba(238, 238, 238, 0.08);
	border-bottom: 1px solid rgba(238, 238, 238, 0.15)
}

[data-theme-colour='dark'] .pseudo-screenshot\:editor i {
	background: #3d3d3d;
	background: var(--screenshot-editor-toggle);
	box-shadow: inset rgba(255, 255, 255, 0.3) 0px 0px 0px 2px
}

[data-theme-colour='dark'] .pseudo-screenshot\:editor i:before {
	background: rgba(255, 255, 255, 0.3)
}

[data-theme-colour='dark'] .pseudo-screenshot\:editor li:nth-child(2) i,
[data-theme-colour='dark'] .pseudo-screenshot\:editor li:nth-child(3) i {
	-webkit-animation-name: screenshot-editor-dark;
	animation-name: screenshot-editor-dark
}

[data-modal="bundle"] .modal-content {
	background: #ebf1f8;
	border-radius: 0px 0px 5px 5px
}

.bundle {
	background: #fff;
	color: #8b9cae;
	border-radius: 5px;
	box-shadow: rgba(45, 54, 64, 0.1) 0px 10px 25px, rgba(45, 54, 64, 0.1) 0px 2px 1px;
	border: 3px solid transparent;
	padding: 20px;
	padding-bottom: 80px;
	height: 100%;
	cursor: pointer;
	text-align: center;
	position: relative
}

.bundle .button {
	padding-left: 0;
	padding-right: 0;
	width: 160px
}

.bundle.is-active {
	border-color: #8b9cae;
	color: #2d3640
}

.bundle.is-active .button {
	background-color: #2f3647;
	border-color: rgba(0, 0, 0, 0.15);
	color: #fff
}

.bundle.is-active .button::after {
	border-color: inherit
}

.bundle.is-active .bundle__button-text::after {
	content: "Selected"
}

.bundle .bundle__button-text::after {
	content: "Choose"
}

.bundle__thumb {
	position: relative;
	margin-bottom: 15px;
	border-radius: 5px;
	overflow: hidden;
	opacity: 0.6
}

.is-active .bundle__thumb {
	opacity: 1
}

.bundle__thumb::before {
	content: '';
	display: block;
	padding-bottom: 62.5%
}

.bundle__thumb img {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	-o-object-fit: cover;
	object-fit: cover;
	-o-object-position: 50% 0%;
	object-position: 50% 0%
}

.bundle__thumb::after {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	border-radius: inherit;
	border: 1px solid rgba(0, 0, 0, 0.2)
}

@-webkit-keyframes bundle-animate {

	0%,
	35% {
		opacity: 1
	}

	50%,
	85% {
		opacity: 0
	}
}

@keyframes bundle-animate {

	0%,
	35% {
		opacity: 1
	}

	50%,
	85% {
		opacity: 0
	}
}

.modal-visible .bundle__thumb--animate :last-child {
	-webkit-animation-name: bundle-animate;
	animation-name: bundle-animate;
	-webkit-animation-duration: 6s;
	animation-duration: 6s;
	-webkit-animation-iteration-count: infinite;
	animation-iteration-count: infinite
}

.bundle__name {
	font-size: 2rem
}

.bundle__price {
	font-size: 3rem;
	font-weight: 300;
	line-height: 1.2;
	margin: 10px 0
}

.bundle__price span {
	opacity: 0.3;
	position: relative;
	font-size: 0.8em
}

.bundle__price span::before,
.bundle__price span::after {
	content: '';
	background: currentColor;
	position: absolute;
	left: -4px;
	right: -4px;
	top: 50%;
	height: 2px;
	opacity: 0.6;
	-ms-transform: rotate(-10deg);
	transform: rotate(-10deg)
}

.bundle__price span::after {
	-ms-transform: rotate(10deg);
	transform: rotate(10deg)
}

.bundle__price+.bundle__price {
	margin-top: -10px
}

@media (min-width: 861px) {
	.bundle__button {
		position: absolute;
		left: 0;
		right: 0;
		bottom: 10px;
		text-align: center
	}
}

.bundle__best {
	display: inline-block;
	background: #ed7a16;
	color: #fff;
	font-weight: bold;
	font-size: 1rem;
	text-transform: uppercase;
	border-radius: 3px;
	padding: .6em 1em;
	margin: 1.5em 0 1em 0;
	position: absolute;
	white-space: no-wrap;
	top: -25px;
	right: -20px;
	z-index: 2;
	-ms-transform: rotate(6deg);
	transform: rotate(6deg)
}

@media (max-width: 860px) {
	.bundle {
		display: flex;
		align-items: center;
		text-align: left;
		padding: 10px
	}

	.bundle__thumb {
		flex: 0 0 auto;
		width: 80px;
		margin-right: 30px
	}

	.bundle__text {
		flex: 1 1 0%
	}

	.bundle__button {
		position: static
	}
}

@media (max-width: 640px) {
	.bundle {
		flex-direction: column
	}
}

.notice {
	padding: 15px;
	background: #fff0bc;
	border-top: 1px solid #f4d999;
	border-bottom: 1px solid #f4d999;
	color: #7c4e1c
}

.notice a {
	color: inherit;
	border-bottom: 1px solid #e1c88d
}

.notice a:hover {
	border-bottom-color: currentColor
}

.testimonials {
	padding-top: 40px
}

.testimonials blockquote {
	display: flex;
	align-items: flex-start;
	justify-content: flex-start;
	padding-bottom: 40px;
	margin-bottom: 40px;
	border-bottom: 1px solid rgba(139, 156, 174, 0.5)
}

.testimonials blockquote:last-of-type {
	border-bottom: 0;
	margin-bottom: 0
}

.testimonials .t-author {
	flex: 0 0 auto;
	padding: 5px 30px 0 0;
	font-weight: bold;
	text-align: center
}

.testimonials .t-author span:last-of-type {
	display: block;
	width: 90px;
	overflow: hidden;
	text-overflow: ellipsis
}

.testimonials .avatar {
	width: 90px;
	height: 90px;
	background: #d8dee6 no-repeat 50% 50%;
	background-size: cover;
	box-shadow: rgba(0, 0, 0, 0.1) 0px 0px 0px 2px inset;
	display: block;
	margin-bottom: 10px;
	border-radius: 2px;
	display: flex;
	align-items: center;
	justify-content: center
}

.testimonials .avatar:not([style]):before {
	content: '\f086';
	display: inline-block;
	font-family: 'Font Awesome 5 Free';
	font-style: normal;
	font-variant: normal;
	font-weight: 900;
	text-rendering: auto;
	vertical-align: middle;
	-webkit-font-smoothing: antialiased;
	font-size: 36px
}

.testimonials .t-content {
	flex: 1 1 auto
}

.testimonials .t-content>strong {
	font-size: 1.1em
}

.testimonials .t-content p {
	margin: 0.8em 0
}

.testimonials .t-title {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	color: #0d1013
}

.testimonials .t-title strong {
	margin-right: 15px
}

.testimonials .t-title a {
	color: inherit
}

.testimonials .t-rating {
	color: #f9c479;
	font-size: 14px
}

.testimonials .t-rating:before {
	display: inline-block;
	font-family: 'Font Awesome 5 Free';
	font-style: normal;
	font-variant: normal;
	font-weight: 900;
	text-rendering: auto;
	vertical-align: middle;
	-webkit-font-smoothing: antialiased
}

.testimonials .t-rating[data-rating='5']:before {
	content: '\f005 \f005 \f005 \f005 \f005'
}

.testimonials .t-rating[data-rating='4']:before {
	content: '\f005 \f005 \f005 \f005'
}

.testimonials .t-rating[data-rating='3']:before {
	content: '\f005 \f005 \f005'
}

.info-wrap {
	display: flex;
	align-items: flex-start
}

.info-navigation {
	position: -webkit-sticky;
	position: sticky;
	top: 0;
	width: 270px;
	flex: 0 0 auto;
	padding-top: 40px
}

.info-navigation a {
	display: block;
	padding: 8px 0;
	color: inherit
}

.info-navigation a.selected {
	font-weight: bold;
	color: #0d1013
}

.info-navigation a:hover {
	color: #0d1013
}

.info-content {
	flex: 1 1 auto;
	border-left: 1px solid rgba(45, 54, 64, 0.2);
	padding-left: 30px
}

.info-content a {
	text-decoration: underline
}

.info-group {
	padding-top: 20px;
	padding-bottom: 100px
}

.info-group h2 {
	font-weight: 600;
	margin-bottom: 0
}

.info-group li {
	border-top: 1px dashed rgba(45, 54, 64, 0.4);
	padding: 25px 0
}

.info-group li:first-child {
	border: 0
}

.info-group li>strong:first-child {
	font-size: 1.2em;
	display: block;
	margin-bottom: 0.6em;
	color: #0d1013
}

.info-content .info-group:last-of-type {
	min-height: calc(100vh - 61px)
}

@media (max-width: 860px) {
	.info-wrap {
		display: block
	}

	.info-navigation {
		display: none
	}

	.info-content {
		border: 0;
		padding: 0
	}
}

.theme-coupon {
	background: #66ae5e;
	color: #fff;
	text-align: center;
	padding: 40px 15px
}

.theme-coupon .button {
	background: rgba(255, 255, 255, 0.1)
}

.theme-coupon .button::after {
	border-width: 2px
}

.theme-coupon__text {
	font-size: 2rem;
	margin-bottom: 1.5em
}

.theme-coupon__coupon {
	display: inline-block;
	padding: 0px 10px;
	background: rgba(255, 255, 255, 0.2);
	border-radius: 3px;
	font-weight: bold
}

.page-title--custom {
	padding-bottom: 0;
	margin-bottom: 0;
	text-align: center
}

.custom-filter {
	display: flex;
	margin: 0 auto;
	max-width: 700px
}

.custom-filter li {
	padding: 1em 0;
	flex: 1 1 100px;
	cursor: pointer;
	margin: 0 5px;
	border-radius: 5px 5px 0px 0px;
	border: 1px solid transparent;
	border-bottom: 0
}

.custom-filter li:not(.is-active):hover {
	background: rgba(13, 16, 19, 0.03)
}

.custom-filter .is-active {
	background-clip: padding-box;
	background-color: #fff;
	border-color: rgba(0, 0, 0, 0.08);
	color: #2d3640
}

.custom-filter span {
	display: block;
	color: #8b9cae;
	font-size: 0.8em
}

@media (max-width: 500px) {
	.custom-filter span {
		display: none
	}
}

.form__header {
	font-size: 1.7rem;
	margin-bottom: 2em
}

.form__panel {
	padding: 4em 0;
	border-bottom: 1px dashed rgba(45, 54, 64, 0.2)
}

.form__panel:first-child {
	padding-top: 0
}

html:not(.focus-customer) .customer-only,
.focus-customer .guest-only {
	display: none !important
}