/* =========================================================
	RESET
	Modern reset:
	https://piccalil.li/blog/a-more-modern-css-reset/
========================================================= */

/* Box sizing rules */
*,
*::before,
*::after {
  box-sizing: border-box;
}

/* Prevent font size inflation */
html {
  -moz-text-size-adjust: none;
  -webkit-text-size-adjust: none;
  text-size-adjust: none;
}

/* Remove default margin in favour of better control in authored CSS */
:is( body, h1, h2, h3, h4, p, figure, blockquote, dl, dd) {
  margin-block: 0;
}

/* Remove list styles on ul, ol elements with a list role, which suggests default styling will be removed */
ul:is([role='list'], [role="navigation"]),
ol:is([role='list'], [role="navigation"]) {
  list-style: none;
}

/* Set core body defaults */
body {
  min-height: 100vh;
  line-height: 1.5;
}

/* Set shorter line heights on headings and interactive elements */
:is(h1, h2, h3, h4, button, input, label) {
  line-height: 1.1;
}

/* Balance text wrapping on headings */
:is(h1, h2, h3, h4) {
  text-wrap: balance;
}

/* A elements that don't have a class get default styles */
a:not([class]) {
  color: currentColor;
  -webkit-text-decoration-skip: ink;
          text-decoration-skip-ink: auto;
}

/* Make images easier to work with */
:is(img, picture) {
  display: block;
  max-width: 100%;
}

/* Inherit fonts for inputs and buttons */
:is(input, button, textarea, select) {
  font: inherit;
}

/* Make sure textareas without a rows attribute are not tiny */
textarea:not([rows]) {
  min-height: 10em;
}

/* Anything that has been anchored to should have extra scroll margin */
:target {
  scroll-margin-block: 5ex;
}

/* Improve media defaults */
img,
picture,
canvas,
svg,
video {
   display: block;
   max-width: 100%;
   height: auto;
}

iframe {
	border: 0;
	max-width: 100%;
}

/* =========================================================
	WEBFONTS FOR NATIONAL PARTITIONS
========================================================= */

/* MARK: Source Sans Pro
----------------------------------------------- */
@font-face {
	font-style: normal;
	font-weight: normal;
	src: url('../fonts/sourcesanspro-regular-webfont.eot');
	src: url('../fonts/sourcesanspro-regular-webfont.eot?#iefix') format('embedded-opentype'),
		url('../fonts/sourcesanspro-regular-webfont.woff2') format('woff2'),
		url('../fonts/sourcesanspro-regular-webfont.woff') format('woff'),
		url('../fonts/sourcesanspro-regular-webfont.ttf') format('truetype'),
		url('../fonts/sourcesanspro-regular-webfont.svg#source_sans_proregular') format('svg');
	font-family: 'source_sans_proregular';
}

@font-face {
	font-style: normal;
	font-weight: normal;
	src: url('../fonts/sourcesanspro-lightit-webfont.eot');
	src: url('../fonts/sourcesanspro-lightit-webfont.eot?#iefix') format('embedded-opentype'),
		url('../fonts/sourcesanspro-lightit-webfont.woff2') format('woff2'),
		url('../fonts/sourcesanspro-lightit-webfont.woff') format('woff'),
		url('../fonts/sourcesanspro-lightit-webfont.ttf') format('truetype'),
		url('../fonts/sourcesanspro-lightit-webfont.svg#source_sans_prolight_italic') format('svg');
	font-family: 'source_sans_prolight_italic';
}

@font-face {
	font-style: normal;
	font-weight: normal;
	src: url('../fonts/sourcesanspro-light-webfont.eot');
	src: url('../fonts/sourcesanspro-light-webfont.eot?#iefix') format('embedded-opentype'),
		url('../fonts/sourcesanspro-light-webfont.woff2') format('woff2'),
		url('../fonts/sourcesanspro-light-webfont.woff') format('woff'),
		url('../fonts/sourcesanspro-light-webfont.ttf') format('truetype'),
		url('../fonts/sourcesanspro-light-webfont.svg#source_sans_prolight') format('svg');
	font-family: 'source_sans_prolight';
}

@font-face {
	font-style: normal;
	font-weight: normal;
	src: url('../fonts/sourcesanspro-it-webfont.eot');
	src: url('../fonts/sourcesanspro-it-webfont.eot?#iefix') format('embedded-opentype'),
		url('../fonts/sourcesanspro-it-webfont.woff2') format('woff2'),
		url('../fonts/sourcesanspro-it-webfont.woff') format('woff'),
		url('../fonts/sourcesanspro-it-webfont.ttf') format('truetype'),
		url('../fonts/sourcesanspro-it-webfont.svg#source_sans_proitalic') format('svg');
	font-family: 'source_sans_proitalic';
}

/* MARK: Linear Icon
----------------------------------------------- */
@font-face {
	font-style: normal;
	font-weight: normal;
	src: url('../fonts/Linearicons.eot?iax6vc');
	src: url('../fonts/Linearicons.eot?iax6vc#iefix') format('embedded-opentype'),
		url('../fonts/Linearicons.ttf?iax6vc') format('truetype'),
		url('../fonts/Linearicons.woff?iax6vc') format('woff'),
		url('../fonts/Linearicons.svg?iax6vc#Linearicons') format('svg');
	font-family: 'Linearicons';
}

/* MARK: SSSocialCircle
----------------------------------------------- */
@font-face {
  font-style: normal;
  font-weight: normal;
  src: url('../fonts/ss-social-circle.eot');
  src: url('../fonts/ss-social-circle.eot?#iefix') format('embedded-opentype'),
       url('../fonts/ss-social-circle.woff') format('woff'),
       url('../fonts/ss-social-circle.ttf')  format('truetype'),
       url('../fonts/ss-social-circle.svg#SSSocialCircle') format('svg');
  font-family: "SSSocialCircle";
}

/* =========================================================
	VARIABLES / CUSTOM PROPERTIES
========================================================= */

:root {
	/* MARK: Fonts
	----------------------------------------------- */
   --font-body: "source_sans_prolight", "Helvetica Neue", Arial, Helvetica, Geneva, sans-serif;
	--font-body-regular: "source_sans_proregular", "Helvetica Neue", Arial, Helvetica, Geneva, sans-serif;
   --font-icon: "LinearIcons";


	/* MARK: Font sizes
	----------------------------------------------- */
	--fs--2: 0.75rem; /* 12px */
	--fs--1: 0.875rem; /* 14px */
	--fs-0: 1rem; /* 16px */
	--fs-1: 1.125rem; /* 18px */
	--fs-2: 1.25rem; /* 20px */
	--fs-3: 1.5rem; /* 24px */
	--fs-4: 1.75rem; /* 28px */
	--fs-5: 2rem; /* 32px */
	--fs-6: 2.5rem; /* 40px */
	--fs-7: 3rem; /* 48px */

	/* MARK: Spacing
	----------------------------------------------- */
	--ratio: 1.5;
   --s-5: calc(var(--s-4) / var(--ratio));
   --s-4: calc(var(--s-3) / var(--ratio));
   --s-3: calc(var(--s-2) / var(--ratio));
   --s-2: calc(var(--s-1) / var(--ratio));
   --s-1: calc( (var(--s0) * var(--ratio)) * -1 );
   --s0: 1rem;
   --s1: calc(var(--s0) * var(--ratio));
   --s2: calc(var(--s1) * var(--ratio));
   --s3: calc(var(--s2) * var(--ratio));
   --s4: calc(var(--s3) * var(--ratio));
   --s5: calc(var(--s4) * var(--ratio));

	/* MARK: Colors
	----------------------------------------------- */
   --blue: hsl(207, 100%, 73%);
	--red: #E9726C;
	--gray: hsla(206, 11%, 30%, 1);
	--orange: hsla(30, 92%, 56%, 1); /* #F6902A */
	--green: hsla(160, 100%, 37%, 1); /* #00bd7e */
	--gold: #D4BF71;

	/* New colors */
	--orange-50: #fff9ed;
	--orange-100: #fef1d6;
	--orange-200: #fddeab;
	--orange-300: #fbc676;
	--orange-400: #f8a33f;
	--orange-500: #f6902a; /* base */
	--orange-600: #e66c10;
	--orange-700: #bf520f;
	--orange-800: #984114;
	--orange-900: #7a3714;
	--orange-950: #421a08;

	--blue-50: #eff7ff;
	--blue-100: #daedff;
	--blue-200: #bee0ff;
	--blue-300: #77c2ff; /* base */
	--blue-400: #5db2fd;
	--blue-500: #3791fa;
	--blue-600: #2172ef;
	--blue-700: #195cdc;
	--blue-800: #1b4bb2;
	--blue-900: #1c428c;
	--blue-950: #162955;

	--green-50: #eafff5;
	--green-100: #cdfee5;
	--green-200: #a0fad1;
	--green-300: #63f2b9;
	--green-400: #25e29d;
	--green-500: #00bd7e; /* base */
	--green-600: #00a46e;
	--green-700: #00835c;
	--green-800: #00674a;
	--green-900: #00553e;
	--green-950: #003024;

	--red-50: #FDF3F3;
	--red-100: #FBE6E5;
	--red-200: #F9D1CF;
	--red-300: #F4B0AD;
	--red-400: var(--red);
	--red-500: #DF5B54;
	--red-600: #CB3E37;
	--red-700: #AB302A;
	--red-800: #8D2C27;
	--red-900: #762A26;
	--red-950: #40110F;

	--purple: #9175d6;
	--purple-50: #f7f5fd;
	--purple-100: #fOedfa;
	--purple-200: #e2def6;
	--purple-300: #cbc3ef;
	--purple-400: #b1a1e4;
	--purple-500: var(--purple); /* base */
	--purple-600: #835dca;
	--purple-700: #734bb6;
	--purple-800: #603e99;
	--purple-900: #50357d;
	--purple-950: #322154;

	--gold-50: #FBF8EF;
	--gold-100: #F2EDD3;
	--gold-200: #E3D8A4;
	--gold-300: var(--gold);
	--gold-400: #CBAD54;
	--gold-500: #C1943F;
	--gold-600: #AA7735;
	--gold-700: #8E5A2F;
	--gold-800: #75492B;
	--gold-900: #613C26;
	--gold-950: #361F12;

	--gray-light: #E3E8EC;
	--gray-light-mid: #AFB8C4;
	--gray-mid: #6D747A;
	--gray-mid-dark: #525050;
	--gray-dark: #444D54;

	--gray-blue: hsla(214, 15%, 73%, 1);
	--gray-blue--1: hsla(214, 14%, 66%, 1);
	--gray-light--1: hsla(205, 16%, 79%, 1);
	--gray-extra-light: hsla(195, 25%, 97%, 1); /* #f5f8f9 */

	/* Formstack colors */
	--fstack-gray-100: #EFF2F4;
	--fstack-gray-200: #EAEAEA;
	--fstack-gray-300: #D4D4D4;
	--fstack-gray-400: #CFD4D8;
	--fstack-gray-500: #808080;
	--fstack-gray-600: #595D64;

	/* Random colors - need to be cleaned up */
	--random-gray-1: #abb3c7;
	--random-gray-2: #f2f4f5;
	--random-gray-3: #bbc1c8;
	--random-gray-4: #9cafbd;
	--random-gray-5: var(--fstack-gray-100); /* used in Formstack forms */

	/* MARK: z-index
	----------------------------------------------- */
   --z-below: -1; /* and this for all values below the base */
   --z-base: 0;
   --z-above: 1; /* use this for all values above the base */
   --z-navigation: calc(var(--z-above) + var(--z-base));
   --z-modal: calc(var(--z-above) + var(--z-navigation));

	/* MARK: Transitions
	----------------------------------------------- */
	--transition-specs: 0.3s ease-in-out;
}

/* =========================================================
   BASE STYLES FOR HTML ELEMENTS
========================================================= */

/* MARK: Body
----------------------------------------------- */
body {
	margin: 0;
   height: 100%;
	overflow-x: hidden;
	color: var(--gray-mid);
   font-size: 1rem; /* 16px, controlled by browser */
   line-height: 1.5;
   font-family: var(--font-body);
}

/* MARK: Tables
----------------------------------------------- */
table {
	border-collapse: collapse;
	border-spacing: 0;
	width: 100%;
}

table :is(th, td) {
	vertical-align: top;
	border: 1px solid var(--gray-blue);
	padding-inline: 0.75rem;
}

table :is(th, td):first-child { padding-inline-start: 0; }
table :is(th, td):last-child { padding-inline-end: 0; }

td > .cluster > label { width: auto; }

/* MARK: Form bits
----------------------------------------------- */
form {
	font-family: var(--font-body-regular);
}

/* input[type="password"], */
input[type="tel"],
/* input[type="file"], */
input[type="text"],
input[type="email"],
textarea,
select {
	border: 1px solid var(--gray-blue);
	border-radius: 0;
	background-color: white;
	padding-inline: 0.5rem;
	padding-block: 0.5rem;
	width: 100%;
	color: var(--gray-mid);
	font-size: var(--fs-0);
	font-family: var(--font-body);
}

textarea:not([rows]),
input[type="text"].textarea {
	border-radius: 0;
	min-height: 10rem;
}

input[type="file"] {
	border-radius: 0;
}

form .field-row {
	display: flex;
	gap: 2rem;
	max-width: 400px;
}

label {
	width: 100%;
	font-weight: 700;
	font-size: var(--fs-0) !important;
}

label span.label {
	display: flex;
	-moz-column-gap: 0.5rem;
	     column-gap: 0.5rem;
	justify-content: space-between;
	width: 100%;
	font-weight: 700;
}

label span.label i {
	font-style: normal;
	font-weight: 400;
	font-size: var(--fs--1);
}

/* MARK: Video
----------------------------------------------- */
video {
	display: block;
	max-width: 100%;
}

video.local-video {
	border: 1px solid var(--gray-light);
	/* background-color: var(--gray-light-mid); */
}

/* MARK: Horizontal rule <hr>
----------------------------------------------- */
hr {
	display: block;
	margin: 1rem 0;
	border: 1px solid #ccc;
	border-width: 1px 0 0 0;
	padding: 0;
	height: 1px;
}

/* =========================================================
	TEMPORARY CSS STYLES
	Additional styles for temporary use until CSS can
	be reorganized.

	TODO: Clean up all temporary styles (duh)
========================================================= */

form button.button.temp {
	margin-top: 1.2rem;
	width: 100%;
}

.t-cart table p,
.t-cart table h2,
.t-checkout h2,
.t-checkout p,
.temp p { margin: 0; }

form#paymentForm > * + * {
	margin-block-start: var(--flow-space, 1rem);
}

/* =========================================================
	LEGACY
	These styles were written by previous dev.
	They still work but are not grouped in any specific
	order.
========================================================= */

.form-wrapper {
	background-color: #eef1f4;
}

.form-header h2 {
	color: #f58f29;
	font-style: normal;
	font-weight: normal;
	font-size: 2em;
	text-align: center;
}

/* MARK: Typography
----------------------------------------------- */
a:link,
a:visited,
input[type="submit"],
button[type="submit"] {
	color: #F6902A;
	text-decoration: none;
	transition: 0.4s all ease;
}

a:hover,
a:focus {
	color: #444D54;
}

a:focus,
button:focus {
	outline: 0;
}

.content p a:link {
	text-decoration: underline;
}

.content h1 {
	color: #444D54;
	font-style: normal;
	font-weight: 300;
	font-size: 1.9em;
	line-height: 1em;
}


.content h2 {
	margin-top: 1.5em;
	color: #F6902A;
	font-style: normal;
	font-weight: 300;
	font-size: 1.7em;
	line-height: 1em;
}

.content h3 {
	margin-top: 1.3em;
	color: #AFB8C4;
	font-weight: 300;
	font-size: 1.3em;
	letter-spacing: 2px;
	text-transform: uppercase;
}

.content blockquote {
	position: relative;
	clear: both;
	margin: 0 0 0 1em;
	border-left: 4px solid #B5C3CD;
}

.content blockquote p {
	margin-top: 1.8em;
	margin-bottom: 1.6em;
	padding-top: .5em;
	padding-bottom: .5em;
	padding-left: .9em;
	color: #444D54;
	font-size: 1.3em;
	line-height: 1.3em;
}

.content blockquote p:before {
	content: "\201C";
}

.content blockquote p:after {
	content: "\201D";
}


strong {
	font-style: normal;
	font-weight: normal;
	font-family: "source_sans_proregular", "Helvetica Neue", Arial, Helvetica, Geneva, sans-serif;
}

.content strong,
.content b {
	color: #444D54;
}

em {
	font-style: normal;
	font-weight: normal;
	font-family: "source_sans_prolight_italic", "Helvetica Neue", Arial, Helvetica, Geneva, sans-serif;
}

.content em,
.content i {
	color: #AFB8C4;
}

.content ul,
.content ol,
.modal-box.modal-product article ul,
.modal-box.modal-product article ol {
	margin-top: 2em;
	margin-bottom: 2em;
	padding-left: 1em;
	color: #666;
}

.content li,
.modal-box.modal-product article li {
	margin-bottom: 1em;
	line-height: 1.2em;
}

.content ul li {
	position: relative;
	list-style-type: none;
}

.content ul li:before {
	position: absolute;
	left: -1.8em;
	content: '\e934';
	color: #F6902A;
	font-size: 9px;
	font-family: Linearicons;
}

.content ol,
.modal-box.modal-product article ol {
	counter-reset: li;
	/* Initiate a counter */
	padding-left: 1.5em;
}

.content ol>li,
.modal-box.modal-product article ol>li {
	position: relative;
	/* Give each list item a left margin to make room for the numbers */
	margin-top: 0;
	margin-right: 0;
	list-style: none;
}

.content ol>li:before,
.modal-box.modal-product article ol>li:before {
	/* Position and style the number */
	position: absolute;
	top: 0;
	left: -2em;
	counter-increment: li;
	/* Increment the counter by 1 */
	box-sizing: border-box;
	border-radius: 12px;
	background-color: #AFB8C4;
	width: 16px;
	height: 16px;
	content: counter(li);
	/* Use the counter as content */
	color: #fff;
	font-style: normal;
	font-variant: normal;
	font-size: 12px;
	line-height: 16px;
	text-align: center;
}

p.intro {
	font-size: 1.1em;
	text-align: center;
}

.content .embed,
.modal-box .embed {
	position: relative;
	margin-bottom: 2em;
	padding-top: 30px;
	/* IE6 workaround*/
	padding-bottom: 56.25%;
	/* 16/9 ratio */
	height: 0;
	overflow: hidden;
}

.content .formstack-iframe .embed {
	display: block;
	padding-top: 0;
	padding-bottom: 0;
	height: 100%;
	overflow: visible;
}

.page-blog .content .embed {
	clear: both;
}

.embed iframe,
.embed_media iframe,
.embed object {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}

.formstack-iframe .embed iframe {
	display: block;
	position: relative;
}

.content table {
	border: none;
	width: 100% !important;
	color: #6c737a;
}

.content .company-timeline table {
	border: 1px solid #fff;
	color: #fff;
}

.content table thead tr th {
	background-color: #bbc1c8;
	padding: .7em;
	color: #fff;
	font-weight: 600;
	text-align: left;
}

.content table tr {
	border-bottom: 1px solid #bbc1c8;
}

.content table td {
	border: none;
	padding: .7em;
}

/* MARK: Columns/grids
----------------------------------------------- */
.col-wrapper {
	overflow: hidden;
	text-align: center;
}

.modal-gallery-wrapper.col-wrapper,
.landing-gallery-wrapper.col-wrapper {
	margin-right: 0;
	margin-bottom: 3px;
	margin-left: 0;
}

.landing-gallery-wrapper.col-wrapper {
	margin-top: 2em;
	margin-bottom: 3em;
}

.col-wrapper .col {
	display: inline-block;
	vertical-align: top;
	box-sizing: border-box;
	margin-bottom: 2.5em;
	width: 100%;
}

.col-wrapper .col.callout {
	width: 90%;
}

.col-wrapper.col5 .col,
.col-wrapper.col6 .col,
.col-wrapper.col7 .col {
	margin-right: 3%;
	margin-left: 3%;
	width: 43%;
}

.modal-gallery-wrapper.col-wrapper.col4 .col,
.landing-gallery-wrapper.col-wrapper.col4 .col {
	float: left;
	margin: 0%;
	width: 50%;
}

.logo-proof .col-wrapper.col7 .col,
.logo-proof .col-wrapper.col6 .col {
	margin: 0 1%;
	width: 30%;
}

/* MARK: Page Landing (whatever that means)
	Legacy / from previous dev
----------------------------------------------- */
.page-resources-list .isotope-container.col4 .col a {
	border: 1px solid #e3e8ec;
	-webkit-transition: 0.4s all ease;
	-moz-transition: 0.4s all ease;
	-ms-transition: 0.4s all ease;
	-o-transition: 0.4s all ease;
	display: block;
	transition: 0.4s all ease;
}

.page-resources-list .isotope-container.col4 .col a:hover {
	border-color: #f6902a;
}

.page-resources-list .isotope-container.col-wrapper.col4 .col article {
	padding-right: 6%;
	padding-left: 6%;
	text-align: left;
}

.page-resources-list .isotope-container.col4 .col h2 {
	margin: 3em 4em .5em 6%;
	font-size: 1.2em;
	line-height: 1em;
	text-align: left;
}

.page-resources-list .isotope-container.col4 .col a h2 {
	color: #fff;
}

.page-resources-list .isotope-container.col4 .col article p {
	margin-top: 1em;
	margin-bottom: 1em;
	font-size: .9em;
	line-height: 1.2em;
}

.page-resources-list .isotope-container.col4 .col a article p {
	color: #afb8c4;
}

.page-resources-list .isotope-container.col4 .col a p.more {
	color: #f6902a;
	text-transform: uppercase;
}

.page-resources-list .isotope-container.col4 .col a p.more:before,
.page-resources-list .action-bar button:before,
.page-landing .content h1:before,
.page-product-detail .action-bar i:before {
	vertical-align: middle;
	margin-right: .4em;
	/*content: '\e671';*/
	font: normal normal 1.1em LinearIcons;
}

.page-resources-list .action-bar button:before {
	position: relative;
	top: -2px;
	margin-right: .2em;
	color: #afb8c4;
}

.page-landing .content h1:before {
	position: relative;
	top: -3px;
	margin-right: .2em;
	color: #f6902a;
	font-size: .9em;
}

.page-landing.page-landing-longform .content h1:before {
	margin-right: 0;
	content: '';
}

.landing-gallery-wrapper .col {
	position: relative;
}

.landing-gallery-wrapper a.modal i.magnifier,
li.lslide a.openmodal i.magnifier {
	display: block;
	position: absolute;
	right: 0;
	bottom: 0;
	background: url(/uploads/design-assets/zoom-corner.png) right bottom no-repeat;
	background-size: 75px;
	padding-right: 10px;
	width: 75px;
	height: 75px;
	color: #fff;
	font-size: 1.3em;
	line-height: 110px;
	text-align: right;
}

.landing-gallery-wrapper a.modal i.magnifier:hover {}

.page-resources-list .isotope-container.col4 .col.brochures a p.more:before,
.page-resources-list .action-bar button.brochures:before,
.page-landing .content h1.brochures:before,
.page-product-detail .action-bar i.brochures:before {
	content: '\e714';
}

.page-resources-list .isotope-container.col4 .col.videos a p.more:before,
.page-resources-list .action-bar button.videos:before,
.page-landing .content h1.videos:before,
.page-product-detail .action-bar i.videos:before {
	content: '\e96a';
}

.page-resources-list .isotope-container.col4 .col.presentations a p.more:before,
.page-resources-list .action-bar button.presentations:before,
.page-landing .content h1.presentations:before,
.page-product-detail .action-bar i.presentations:before {
	content: '\e6f6';
}

.page-resources-list .isotope-container.col4 .col.documents a p.more:before,
.page-resources-list .action-bar button.documents:before,
.page-landing .content h1.documents:before,
.page-product-detail .action-bar i.documents:before {
	content: '\e6d8';
}

.page-resources-list .isotope-container.col4 .col.manuals a p.more:before,
.page-resources-list .action-bar button.manuals:before,
.page-landing .content h1.manuals:before,
.page-product-detail .action-bar i.manuals:before {
	content: '\e712';
}

.page-resources-list .isotope-container.col4 .col.stores a p.more:before,
.page-resources-list .action-bar button.stores:before,
.page-landing .content h1.stores:before,
.page-product-detail .action-bar i.stores:before {
	content: '\e74d';
}


.page-product-detail .action-bar i.photo-gallery:before {
	content: '\e704';
}


.page-landing .content h1 a.modal-youtube {
	position: relative;
	top: 5px;
	float: right;
	background-color: #f58f29;
	padding: .8em;
	color: #fff;
	font-size: .4em;
	line-height: .6em;
}

.page-landing .content h1 a.modal-youtube i {
	color: #fff;
}

.page-landing .content h1 a.modal-youtube:hover {
	background-color: #6b7279;
}

.landing-feature i {
	float: left;
	margin-right: .3em;
	border: 2px solid #f58f29;
	border-radius: 50%;
	padding: .4em;
	color: #f58f29;
	font-size: 2.5em;
}

.landing-feature article {
	margin-bottom: 1em;
	overflow: hidden;
}

.landing-feature article h2 {
	margin-top: 0;
	margin-bottom: 0;
	color: #444D54;
	font-size: 1.4em;
}

.landing-feature article p {
	margin-top: .3em;
	color: #ABB4C0;
	font-size: 1.1em;
}

.page-landing .logo-proof {
	border-top: 1px solid #DFE4E8;
	border-bottom: 1px solid #DFE4E8;
	padding-bottom: 1.5em;
}

.page-resources-list .action-bar button.showall:before {
	content: '\e880';
}

.page-product-detail .action-bar i.icon-photo:before {
	content: '\e66e';
}

.page-landing .sidebar .contact form.infield img.full {
	margin-bottom: 0;
}

.resource-listing-img {
	position: relative;
	height: 180px;
	overflow: hidden;
}

.resource-listing-img i {
	position: absolute;
	right: -.3em;
	bottom: .4em;
	color: rgba(255, 255, 255, 0.14);
	font-size: 6em;
}

/* MARK: Misc
----------------------------------------------- */
.hide-gallery .modal-gallery-wrapper {
	display: none;
}

/* MARK: Media queries
----------------------------------------------- */
@media only screen and (min-width: 560px) {

	a.button,
	form button[type="submit"],
	input[type="submit"] {
		width: auto;
	}

	.page-landing.page-form form a.button,
	.page-landing.page-form form button[type="submit"],
	.page-landing.page-form input[type="submit"],
	.page-landing form a.button,
	.modal-box form button {
		width: 100%;
	}

	form.infield {
		padding: 2.2em 2.2em 1.2em;
	}

	/* footer .utility .copyright {
		float: left;
		width: 55%;
		font-size: .9em;
		text-align: left;
	} */

	.page-landing-longform footer .utility .copyright {
		float: none;
		width: auto;
	}

	/* footer .social {
		float: right;
		margin-top: .8em;
		width: 35%;
		text-align: right;
	} */

	.col-wrapper {
		margin-right: -3%;
		margin-left: -3%;
	}

	.col-wrapper .col {
		margin-right: 3%;
		margin-left: 3%;
	}

	.col-wrapper.col2 .col {
		width: 43%;
	}

	.col-wrapper.col3 .col {
		width: 43%;
	}

	.page-home .banner .col-wrapper.col3 .col {
		margin: 0;
		width: 100%;
	}

	.col-wrapper.col4 .col {
		margin-right: 2%;
		margin-left: 2%;
		width: 45%;
	}

	.isotope-container.col4 .col {
		width: 46%;
	}

	.col-wrapper.col5 .col {
		width: 26%;
	}

	.modal-gallery-wrapper.col-wrapper.col4 .col,
	.landing-gallery-wrapper.col-wrapper.col4 .col {
		width: 25%;
	}

	.col-wrapper.col7 .col,
	.col-wrapper.col6 .col {
		width: 18%;
	}

	.logo-proof .col-wrapper.col7 .col {
		width: 22%;
	}


	.page-blog .sidebar .subscribe input.action {
		position: absolute;
		right: 0;
		padding-top: 1.1em;
		padding-bottom: 1em;
	}

	section.action form.subscribe input[type="submit"] {
		position: absolute;
		right: 0;
		padding-top: 1.1em;
		padding-bottom: 1em;
	}

	.page-product-detail .banner .overlay img.product-illus {
		float: left;
	}

	.page-product-detail .banner .overlay {
		top: 50%;
		margin-top: -7em;
		height: auto;
	}

	.page-product-detail .banner .overlay article {
		padding-left: 1em;
	}

	.page-store-list .filters .button-col2 button {
		float: left;
		width: 50%;
		text-align: left;
	}

	.store-option-item i {
		display: block;
		float: left;
		border: 1px solid #444D54;
		border-radius: 50%;
		padding: .5em;
		font-size: 1.4em;
	}

	.store-option-item article {
		padding-left: 1em;
		overflow: hidden;
	}

	.page-home .banner a.button.alt {
		margin-left: 1em;
	}

	/* .page-blog-list .content article img {
		float: left;
		margin-right: 1.3em;
	}

	.page-blog-list .content .article-content {
		overflow: hidden;
	}

	.page-blog-list .content .article-content h2 {
		margin-top: 0;
	} */


}

@media only screen and (min-width: 650px) {




	.col-wrapper.col7 .col {
		width: 13%;
	}

	/* .logo-proof .col-wrapper.col7 .col {
		width: 17%;
	}

	.logo-proof .col-wrapper.col6 .col {
		width: 14%;
	} */

	/* footer {
		text-align: left;
	} */

	/* footer .info h5 {
		margin-left: 0;
	} */

	/* footer .info {
		float: left;
		width: 30%;
	} */

	/* footer nav {
		float: left;
		margin-right: 5%;
		margin-left: 5%;
		padding-top: 4em;
		width: 30%;
	} */

	/* footer .search {
		float: right;
		padding-top: 4em;
		width: 30%;
	} */

	section.action form.infield {
		margin-right: auto;
		margin-left: auto;
		width: 60%;
	}

	.page-product-detail .banner .overlay img.product-illus {
		max-width: 120px;
	}

	.page-store-detail .store-gallery {
		float: left;
		margin-top: 2em;
		margin-bottom: 3em;
		width: 50%;
	}

	.page-store-detail .store-info {
		float: right;
		margin-top: 3em;
		width: 35%;
	}


}


@media only screen and (min-width: 768px) {

	header p.logo {
		float: left;
		margin-top: 1.7em;
	}





	/* .page-home .banner .overlay {
		padding-top: 6em;
	} */







	/* .page-home .banner h1 {
		margin-bottom: .5em;
		font-size: 2.9em;
	} */

	/* .page-home .banner article p {
		margin-top: .5em;
		margin-bottom: 3em;
		width: 65%;
		font-size: 1.3em;
	} */


	.content h1,
	.page-store-detail .store-gallery h1 {
		font-size: 2.3em;
	}


	.content h2 {
		font-size: 1.9em;
	}

	.content h3 {
		font-size: 1.3em;
	}

	.content blockquote {
		margin-right: 3em;
		margin-left: 2em;
	}

	.content blockquote p {
		font-size: 1.6em;
	}

	p.intro {
		margin-top: 0;
		margin-right: auto;
		margin-left: auto;
		width: 90%;
	}

	.no-nav header p.phone {
		display: block;
		position: relative;
		top: 15px;
		left: 0px;
		float: right;
		clear: none;
		margin-bottom: 0;
		font-size: 1.7em;
	}

	/* .js .nav-collapse {
		position: relative;
		overflow: visible;
	}

	.js .nav-collapse.closed {
		max-height: none;
	}

	.nav-toggle {
		display: none;
	}

	header .nav-collapse,
	header .nav-collapse.opened {
		display: block;
		position: relative;
		float: right;
		margin-top: 3.3em;
		margin-right: 0;
		margin-bottom: .7em;
		margin-left: 0;
		background-color: transparent;
		width: auto;
		-moz-box-shadow: none;
		box-shadow: none;
	}

	header .nav-collapse ul.secondary {
		position: absolute;
		top: -56px;
		right: 0;
		width: auto;
	}

	header .nav-collapse li {
		display: list-item;
		position: relative;
		float: left;
		margin-left: .3em;
		width: auto;
		white-space: nowrap;

	}


	header .nav-collapse ul li a {
		display: block;
		padding-right: .2em;
		padding-left: .2em;
		color: #444D54;
		font-size: .7em;
	}

	header .nav-collapse ul.secondary li a {
		color: #AFB8C4;
		font-size: .7em;
	} */

	/* header .nav-collapse ul.secondary li:first-child a { */
	/*	color: #f58f29; */
	/*        font-weight: 500; */
	/*} */


	/* header .nav-collapse li.cta a {
		border: 1px solid #AFB8C4;
		color: #444D54;
	}

	header .nav-collapse ul li a:hover,
	header .nav-collapse ul li:hover>a,
	header .nav-collapse ul li.current a {
		background-color: #fff;
		color: #f58f29;
		font-weight: 500;

	}

	header .nav-collapse ul li.current-contact a {
		border: 1px solid #AFB8C4;
		color: #f58f29;
		font-weight: 500;

	} */

	/* Change this in order to change the Dropdown symbol */
	/* header .nav-collapse ul li.dropdown a {
		padding-right: 1.4em;
	}

	li.dropdown a:after {
		position: absolute;
		top: 18px;
		margin-left: 3px;
		border-top: 3px solid #fff;
		border-right: 3px solid transparent;
		border-left: 3px solid transparent;
		width: 0;
		height: 0;
		content: '';
	}

	li.dropdown li a:after {
		border: none;
	}

	header.sticky li.dropdown a:after {
		border-top-color: #4d4d4d;
		content: '';
	} */



	.content {
		float: left;
		padding-top: 2em;
		padding-bottom: 2em;
		width: 60%;
	}

	.page-wide .content {
		width: 100%;
	}

	.page-landing.page-wide .content {
		float: none;
		margin-right: auto;
		margin-left: auto;
		width: 80%;
		text-align: center;
	}

	.page-landing.page-form .content {
		width: 55%;
	}

	/* .page-store-list .content {
		float: right;
		width: 70%;
	} */

	.page-product-detail .page-store-list .content {
		float: none;
		width: 100%;
	}

	.sidebar {
		float: right;
		padding-top: 7em;
		padding-bottom: 2em;
		width: 30%;
	}

	.page-store-list .sidebar {
		float: left;
		padding-top: 0;
		width: 25%;
	}

	.page-store-list .sidebar a.button.modal {
		display: block;
		margin-top: 10%;
		margin-right: 10%;
		margin-left: 10%;
		padding-right: 7%;
		padding-left: 7%;
		width: auto;
	}

	.page-blog .sidebar {
		width: 33%;
	}

	.page-landing .sidebar {
		padding-top: 1.5em;
		width: 38%;
	}

	.page-landing.page-form .sidebar {
		padding: 0;
	}

	.page-landing.page-form .sidebar:before {
		position: absolute;
		top: 0;
		right: 0;
		bottom: 0;
		z-index: -1;
		background: #eef1f4;
		width: 39%;
		content: '';
	}


	img.left,
	img.right,
	.content figure.left,
	.content figure.right {
		float: left;
		margin: auto;
		margin-right: 1em;
		margin-bottom: 1em;
		width: auto;
		max-width: auto;
	}

	img.right,
	.content figure.right {
		float: right;
		margin-right: 0;
		margin-left: 1em;
	}

	.content figure img {
		margin-bottom: 0;
	}

	.page-store-detail .modal-gallery img.full {
		margin: auto;
		width: auto;
		max-width: auto;
	}

	section.action {
		padding: 0;
	}


	.lt-ie9 section.action .overlay {
		background-color: #F6902A;
	}

	.col-wrapper.col3 .col {
		width: 27%;
	}

	.page-product-list .col-wrapper.col5 .col,
	.home-products .col-wrapper.col5 .col {

		width: 27%;
	}

	.page-home .banner .col-wrapper.col3 .col {
		float: left;
		width: 33.3%;
		min-height: 232px;
	}


	.col-wrapper.col4 .col {
		width: 20%;
	}

	.isotope-container.col4 .col {
		margin-right: 1.5%;
		margin-left: 1.5%;
		width: 22%;
	}

	.col-wrapper.col7 .col {
		width: 8%;
	}

	.logo-proof .col-wrapper.col7 .col {
		width: 11.8%;
	}


	.page-product-detail .banner {
		min-height: 470px;
	}

	.page-product-detail .banner h1 {
		margin-top: .6em;
		font-size: 2.4em;
	}

	.page-product-detail .banner p {
		font-size: 1.3em;
	}

	.action-bar a.button {
		margin-right: 1em;
	}



	.page-product-detail blockquote {
		padding-right: 12%;
		padding-left: 12%;
	}

	.page-product-detail blockquote p {
		font-size: 1.8em;
	}

	.page-product-detail blockquote p:before {
		left: -.4em;
	}

	.page-product-detail blockquote p:after {
		right: -.4em;
	}




	.page-home .banner {
		background-position: center center;
		background-size: cover;
	}

	.page-home .banner .col-wrapper {
		background-color: transparent;
	}

	.col-wrapper.landing-gallery-wrapper {
		margin-left: -6%;
		width: 120%;
	}

	.page-landing .content h1 a.modal-youtube {
		top: 4px;
		margin-right: -8%;
	}

	.page-store-detail .action-buy h2 {
		font-size: 2.5em;
	}


	.page-store-list .filters {
		display: block;
	}

	.page-store-list a.toggle-filter {
		display: none;
	}

	.page-store-list .filters button {
		display: block;
	}

	.page-store-order .contact {
		float: left;
		width: 70%;
	}

	/* .store-options-wrapper {
	 	float: left;
	 	width: 63%;
	 } */

	/* .order-details {
	 	width: 30%;
	 	float: right;
	 } */

	/* .page-store-order .order-details {
	 	width: 23%;
	 } */

	.page-store-order .contact .col2 button.action.large {
		width: 60%;

	}

	.page-home .banner .col-wrapper .col {
		border: none;

	}

	.page-blog-list .content article img {
		float: none;
		margin-right: 0;
	}

	.page-blog-list .content .article-content {
		overflow: visible;
	}

	.page-blog-list .content .article-content h2 {
		margin-top: 1em;
	}

	.store-cta {
		position: relative;
	}


	.store-cta .store-content {
		float: left;
		width: 50%;
	}

	.store-cta a.button {
		position: absolute;
		top: 50%;
		right: 5%;
		transform: translateY(-50%);
	}



}


@media only screen and (min-width: 850px) {

	header .nav-collapse ul li a {
		padding-right: .4em;
		padding-left: .4em;
		font-size: .8em;
	}


	.page-home .why-modular .col-wrapper {
		float: right;
		width: 58%;
	}

	.page-home .why-modular .col-wrapper.col5 .col,
	.home-products .col-wrapper.col5 .col {
		width: 25%;
	}

	/* footer .info {
		margin-bottom: 2em;
		width: 23%;
	} */

	/* footer nav {
		margin-bottom: 2em;
		width: 47%;
	} */

	/* footer nav ul {
		float: left;
		width: 33%;
	} */

	/* footer nav ul:last-child {
		margin-left: -1.4em;
	} */

	/* footer .search {
		width: 20%;
	} */

	/* .page-why-modular .content section img {
		position: absolute;
		width: 100%;
		max-width: 620px;
		right: 0;
		bottom: 0;
	} */

	/* .page-whynp .content section img {
		position: relative;
		float: right;
		margin-left: 2em;
		margin-top: 5em;
	} */

	/* .page-why-modular section.fire-rated img {
		top: -1.5em;
		margin-top: 0;
	} */

	/* .page-why-modular section.better-sound-reduction img {
		top: 50%;
		margin-top: -165px;
	} */

	/* .page-why-modular section.time-saving img {
		top: 50%;
		margin-top: -205px;
	} */

	/* .page-whynp section.company-history img,
	.page-whynp section.team img {
		max-width: 500px;
		margin-top: 3em;
	} */

	/* .page-why-modular section.alt img {
		left: 0;
	} */

	/* .page-whynp .content section.alt img {
		float: left;
		margin-left: 0;
		margin-right: 2em;
	} */

	/* .page-why-modular .content section article {
		margin-right: 600px;
		margin-bottom: 2em;
	} */

	/* .page-whynp .content section article {
		overflow: hidden;
	} */

	/* .page-why-modular .content section.alt article {
		margin-left: 600px;
		margin-right: 0;
	} */

	/* .page-whynp .content section.company-timeline article {
		max-width: 1000px;
		margin: 0;
		margin-left: auto;
		margin-right: auto;
		width: 100%;
		text-align: center;
	} */

	/* .page-whynp .content section.company-timeline article table {
		max-width: 800px;
		margin-left: auto;
		margin-right: auto;
	} */


	form.infield .col-float input[type="checkbox"],
	form.infield .col-float input[type="radio"] {
		position: relative;
		top: 3px;
		float: left;
		width: 20px;
	}

	form.infield .col-float {
		display: inline-block;
		vertical-align: top;
		padding-right: 3%;
		width: 46%;
		font-size: .9em;
		line-height: 1.2em;
	}

	form.infield .col-float span {
		float: left;
		margin-bottom: .8em;
		width: 80%;
	}



	.page-ezproduct-detail .design-options .col2 .col i,
	.page-ezproduct-detail .design-options .col4 .col i {

		float: left;
	}

	.page-ezproduct-detail .design-options .col2 .col article {
		padding-left: 1em;
		overflow: hidden;
		text-align: left;
	}

	.page-ezproduct-detail .design-options .col4 .col article {
		padding-left: .5em;
		overflow: hidden;
		text-align: left;
	}

	.page-ezproduct-detail .design-options.alt-layout .col2 .col article h4 {
		margin-top: 1.2em;
	}

	.page-ezproduct-detail .design-options.alt-layout .col4 .col article h4 {
		margin-top: 0;
	}

	.store-cta {
		padding-top: 2em;
		padding-bottom: 2em;
	}


}

@media only screen and (min-width: 940px) {

	header .nav-collapse ul li a {
		padding-right: .4em;
		padding-left: .4em;
		font-size: .9em;
	}

	header .nav-collapse ul.secondary li a {
		font-size: .8em;
	}

	.content {
		width: 65%;
	}

	/* .page-blog .content {
		width: 64%;
	} */

	.page-landing.page-form .content {
		width: 60%;
	}

	.sidebar {
		width: 25%;
	}

	.page-blog .sidebar {
		width: 28%;
	}

	.page-landing .sidebar {
		width: 30%;
	}

	/* .page-landing.page-form .sidebar {
		width: 35%;
		margin-right: -4%;
	} */

	/* .page-landing.page-form .sidebar:before {
		width: 33%;
	} */



	.page-home .why-modular .col-wrapper.col5 {
		margin-top: 2.5em;
	}

	.page-home .why-modular .col-wrapper.col5 .col {
		margin-right: 2%;
		margin-left: 2%;
		width: 15%;
	}

	.page-store-order .contact {
		width: 73%;
		/* padding-left: ; */
	}

	/* .order-details,
	 .page-store-order .order-details {
	 	width: 20%;
	 } */

	.page-product-detail .banner .overlay {
		margin-top: -9em;
		width: 50%;
	}


	.page-product-list .col-wrapper.col5 .col,
	.home-products .col-wrapper.col5 .col {
		margin-right: 2%;
		margin-left: 2%;
		width: 15%;
	}




	.page-blog-list .content article img {
		float: left;
		margin-right: 1.3em;
	}

	.page-blog-list .content .article-content {
		overflow: hidden;
	}

	.page-blog-list .content .article-content h2 {
		margin-top: 0;
	}

	.store-cta .store-content {
		width: 60%;
	}

	.store-cta article h2 {
		margin-top: 1.5em;
	}

	.store-cta .store-content img {
		float: left;
		margin-right: 2em;
	}

	.store-cta .store-content article {
		overflow: hidden;
	}

}

@media only screen and (min-width: 980px) {
	.page-home .why-modular .modular-bkg-illus {
		background-position-x: 170%;
	}
}


@media only screen and (min-width: 1024px) {
	.page-home .why-modular .modular-bkg-illus {
		background-position-x: 140%;
	}
}

@media only screen and (min-width: 1100px) {
	.page-home .why-modular .modular-bkg-illus {
		background-position-x: 130%;
	}
}


@media only screen and (min-width: 1140px) {

	header .nav-collapse ul li a {
		padding-right: 1em;
		padding-left: 1em;
		font-size: 1em;
	}

	.action-bar {
		text-align: left;
	}

	.action-bar a.button.action {
		float: right;
		margin-right: 0;
	}

	/* .store-options-wrapper form.infield {
		padding-left: 3em;
	} */

	.page-home .banner .col-wrapper .col {
		position: relative;
		height: 330px;
	}

	.page-home .banner .col-wrapper a.more {
		position: absolute;
		bottom: 2em;
		left: 50%;
		margin-left: -55px;
	}

	.page-home .why-modular .modular-bkg-illus {
		background-position-x: 115%;
	}

}

@media only screen and (min-width: 1200px) {
	.page-home .why-modular .modular-bkg-illus {
		background-position-x: right;
	}
}


@media only screen and (min-width: 2000px) {
	.page-landing.page-form .sidebar {
		margin-right: -6%;
	}
}

/* =========================================================
	ACTION BAR
========================================================= */

:is(.action-bar, .action-bar.new) {
	background-color: var(--gray);
	padding-block: 1.5rem;
	text-align: center;
}

@media (width >= 1140px) {
	.action-bar {
		text-align: left;
	}
}

:is(.action-bar, .action-bar.new) > div.container {
	display: grid;
	gap: 0.75rem;
}

@media (width >= 560px) {
	:is(.action-bar, .action-bar.new) > div.container {
		display: flex;
		flex-wrap: wrap;
		justify-content: center;
	}
}

:is(.action-bar, .action-bar.new) a {
	display: block;
	margin: 0 !important;
}

@media (width >= 560px) {
	:is(.action-bar, .action-bar.new) a {
		display: inline-block;
		width: auto;
	}
}

@media (width >= 1140px) {
	:is(.action-bar, .action-bar.new) a:last-child {
		margin-left: auto !important;
	}
}

/* MARK: Page-specific
----------------------------------------------- */
.page-resources-list .action-bar {
	margin-block-end: 1.5rem;
	background-color: #f6f8f9;
	padding-block: 0;
	text-align: center;
}

.page-resources-list .action-bar button {
	-webkit-appearance: none;
	   -moz-appearance: none;
	        appearance: none;
	margin-inline: 0.5rem;
	border: none;
	border-radius: 0;
	background-color: transparent;
	padding-inline: 0.8rem;
	padding-block: 1rem 0.8rem;
	color: #6d747a;
	font-weight: 300;
	font-family: var(--font-light);
}

.page-resources-list .action-bar button:hover {
	background-color: #e6ebee;
}

.page-resources-list .action-bar button.is-checked {
	background-color: #fff;
}

/* MARK: Button variants
----------------------------------------------- */

.action-bar a.button.alt {
	margin-inline: 0.2rem;
	padding: 0.7rem 1rem;
}

.action-bar a.button.alt.stores {
	border-color: #f58f29;
	background-color: #f58f29;
	color: #fff;
}

.action-bar a.button.icon i {
	top: 0;
	margin-right: 0;
	color: #6d747a;
}

.action-bar a.button.stores.icon i {
	color: rgba(255, 255, 255, 0.52);
}

.action-bar a.button.alt:hover {
	border-color: #fff;
	color: #fff;
}

.action-bar a.button.action:hover {
	background-color: #fff;
	color: #f6902a;
}

/* MARK: Icon pseudo-elements
----------------------------------------------- */

.page-resources-list .action-bar button::before,
.page-product-detail .action-bar i::before {
	vertical-align: middle;
	margin-right: 0.4rem;
	font: normal normal 1.1rem LinearIcons;
}

.page-resources-list .action-bar button::before {
	position: relative;
	top: -2px;
	margin-right: 0.2rem;
	color: #afb8c4;
}

.page-resources-list .action-bar button.brochures::before,
.page-product-detail .action-bar i.brochures::before {
	content: '\e714';
}

.page-resources-list .action-bar button.videos::before,
.page-product-detail .action-bar i.videos::before {
	content: '\e96a';
}

.page-resources-list .action-bar button.presentations::before,
.page-product-detail .action-bar i.presentations::before {
	content: '\e6f6';
}

.page-resources-list .action-bar button.documents::before,
.page-product-detail .action-bar i.documents::before {
	content: '\e6d8';
}

.page-resources-list .action-bar button.manuals::before,
.page-product-detail .action-bar i.manuals::before {
	content: '\e712';
}

.page-resources-list .action-bar button.stores::before,
.page-product-detail .action-bar i.stores::before {
	content: '\e74d';
}

.page-product-detail .action-bar i.photo-gallery::before {
	content: '\e704';
}

.page-resources-list .action-bar button.showall::before {
	content: '\e880';
}

.page-product-detail .action-bar i.icon-photo::before {
	content: '\e66e';
}

/* MARK: Responsive
----------------------------------------------- */

@media (width >= 880px) {
	.action-bar a.button {
		margin-right: 1rem;
	}
}

@media (width >= 1140px) {

	.action-bar a.button.action {
		float: right;
		margin-right: 0;
	}
}

/* =========================================================
	ALERTS
========================================================= */

.alert {
	background-color: var(--orange);
	color: black;
	font-family: var(--font-body-regular);
	font-weight: 400;
	padding-block: 1rem;
}

.alert.error {
	background-color: var(--red);
}

/* =========================================================
	BLOG
========================================================= */

/* MARK: Blog listing (main col)
----------------------------------------------- */
.blog-listing {
	container: blogListing / inline-size;
	padding-block: 4rem;
}

.blog-listing-inner {
	container: blogListingInner / inline-size;
}

@media (width < 768px) {
	.container.sidebar-layout:has(.blog-listing) {
		margin-block-end: 2rem;
	}
}

/* MARK: Blog excerpt block
----------------------------------------------- */
.blog-excerpt-block {
	display: grid;
	gap: 1.5rem;
	border-bottom: 1px solid var(--gray-light);
	padding-block: 2.5rem;
}

@container blogListingInner (width >=496px) {
	.blog-excerpt-block {
		grid-template-columns: 120px auto;
	}
}

.blog-excerpt-block:first-child {
	padding-block-start: 0;
}

.blog-excerpt-block h2 {
	font-weight: 300;
	font-size: 1.7rem;
}

.blog-excerpt-block h2 a {
	color: var(--gray-dark);
}

.blog-excerpt-block .button-group {
	--flow-space: 1.5rem;
}

/* MARK: Blog sidebar
----------------------------------------------- */
aside.blog-sidebar {
	--inline-padding: 1rem;
	background-color: #f6f8f9;
	padding-block: 3rem;
}

@media (width >=1024px) {
	aside.blog-sidebar {
		--inline-padding: 1.5rem;
	}
}

aside.blog-sidebar>div:not(:last-child) {
	border-bottom: 1px solid #e3e8ec;
}

aside.blog-sidebar>div:not(:first-child) {
	padding-block: 1.5rem;
}

/* Shared styles */
aside.blog-sidebar>div h3 {
	padding-inline: var(--inline-padding);
	color: var(--gray-mid);
	font-weight: 100;
	font-size: 1.3rem;
}

aside.blog-sidebar>div ul {
	margin-inline: 0;
	margin-block-end: 0;
	padding-inline: var(--inline-padding);
}

aside.blog-sidebar>div:is(.sections, .recent) ul {
	display: grid;
	gap: 1rem;
}

aside.blog-sidebar>div:is(.sections, .recent) ul li a {
	transition: all var(--transition-specs);
	color: var(--gray-mid);
}

aside.blog-sidebar>div:is(.sections, .recent) ul li a:hover {
	color: var(--orange);
}

/* Search form */
aside.blog-sidebar>.search form {
	margin-block-end: 0;
	background-color: transparent;
	padding: 0 var(--inline-padding) 2rem;
}

aside.blog-sidebar>.search form div {
	position: relative;
}

aside.blog-sidebar>.search form div i {
	position: absolute;
	top: 50%;
	left: 12px;
	transform: translateY(-50%);
}

aside.blog-sidebar>.search form input[name="q"] {
	padding-inline-start: 2rem;
}

/* Social */
aside.blog-sidebar>.social ul {
	display: flex;
	gap: 10px;
	font-size: 2rem;
	line-height: 1;
}

/* MARK: Blog entry
----------------------------------------------- */
.t-blog article.content {
	padding-block-start: 3rem;
	width: auto;
}

.t-blog article.content > * + p {
	margin-block-start: 1.5rem;
}

.t-blog article.content > * + h2 {
	margin-block-start: 2.8125rem !important;
}

.t-blog article.content > * + h3 {
	margin-block-start: 1.6875rem !important;
}

/* MARK: Blog category page
----------------------------------------------- */
.t-blogCategory .container.sidebar-layout > div {
	container: blogListing / inline-size;
	padding-block-start: 3rem;
}

.t-blogCategory .container.sidebar-layout > div > h2 {
	margin-block-end: 1.5rem;
	border-bottom: 1px solid var(--gray-light);
	padding-block-end: 1.5rem;
}








/* MARK: Legacy/previous dev
----------------------------------------------- */
.page-blog-detail .banner .overlay {
	padding-top: 6em;
	padding-bottom: 5em;
}

.page-blog-detail .banner h1 {
	margin-bottom: .2em;
	text-align: left;
}

p.meta {
	margin-top: 0;
	color: #afb8c4;
	font-style: italic;
	font-size: .9em;
}

.page-blog-list .content article {
	margin-bottom: 2.5em;
	border-bottom: 1px solid #e3e8ec;
	padding-bottom: 1.9em;
}

.page-blog-list .content article h2 {
	margin-top: 1em;
}

.page-blog-list .content h2 {
	margin-bottom: .2em;
}

.page-blog-list .content h2 a {
	color: #444d54;
}

.page-blog-list .content h2 a:hover {
	color: #f58f29;
}

.page-blog .sidebar {
	background-color: #f6f8f9;
	padding-top: 2em;
}

.page-blog hr {
	margin-top: 1.5em;
	margin-bottom: 1.5em;
	border-color: #e3e8ec;
}

.page-blog .sidebar h3 {
	margin-right: 7%;
	margin-left: 7%;
	color: #6d747a;
}

.page-blog .sidebar form.infield {
	background-color: transparent;
	padding: 0;
	padding-right: 7%;
	padding-left: 7%;
}

.page-blog .sidebar .search i {
	position: absolute;
	top: .8em;
	left: .8em;
	color: #AFB8C4;
}

.page-blog .sidebar .search input[type="text"] {
	padding-left: 1.8em;
	font-weight: 300;
}

.page-blog .sidebar .subscribe {
	position: relative;
}

.page-blog .sidebar ul {
	margin-right: 7%;
	margin-left: 7%;
	padding: 0;
	list-style-type: none;
}

.page-blog .sidebar ul li {
	margin-bottom: .9em;
	line-height: 1.2em;
}

.page-blog .sidebar ul li a {
	color: #afb8c4;
}

.page-blog .sidebar ul li a:hover {
	color: #6d747a;
}

/* =========================================================
	BREADCRUMB COMPONENT
========================================================= */

.breadcrumb {
	background-color: var(--gray-light);
	padding-block: 0.5rem;
	border-bottom: 1px solid white;
}

.breadcrumb :is(ul, ol) {
	margin-block: 0;
	padding-inline: 0;
	display: flex;
	flex-wrap: wrap;
	gap: 4px;
}

@media (width >= 1024px) {
	.breadcrumb :is(ul, ol) { flex-wrap: nowrap; }
}

.breadcrumb li {
	flex-basis: 100%;
	display: flex;
	gap: 6px;
	font-size: 0.75rem;
	text-transform: uppercase;
	color: var(--gray);
}

@media (width >= 1024px) {
	.breadcrumb li { flex-basis: auto; }
}

.breadcrumb li:is(:first-child, :nth-child(2) ) { flex-basis: auto; }

.breadcrumb li:first-child svg {
	fill: var(--orange);
		display: inline-block;
		width: 14px;
		height: 14px;
		margin-top: 1px;
}

.breadcrumb li:nth-child(2)::before {
	content: "/";
	color: var(--gray-mid);
}

.breadcrumb li:nth-child(n+3)::before {
	color: var(--gray-mid);
	content: "\221F";
	display: inline-block;
	position: relative;
	top: -3px;
}

@media (width >= 1024px) {
	.breadcrumb li:nth-child(n+3)::before {
		content: "/";
		position: unset;
		top: unset;
	}
}

.breadcrumb li:nth-child(3) { margin-inline-start: 2rem; }
.breadcrumb li:nth-child(4) { margin-inline-start: 3.25rem; }

@media (width >= 1024px) {
	.breadcrumb li:is(:nth-child(3), :nth-child(4) ) { margin-inline-start: 0; }
}

/* =========================================================
	BUTTONS
	TODO: refactor buttons classes
========================================================= */

/* MARK: Button group
----------------------------------------------- */
.button-set, /* will be phased out eventually in favor of .button-group */
.button-group {
	display: flex;
	align-items: baseline;
	gap: 0.5rem;
}

/* MARK: Primary (gray)
----------------------------------------------- */
:is(.btn, .btn.primary) {
	display: inline-block;
	transition: all var(--transition-specs);
	margin-bottom: 0; /* TODO: remove once replacement is done */
	border: 1px solid var(--gray);
	background-color: var(--gray);
	padding: 0.75rem 1.5rem;
	color: white;
	font-weight: 400;
	font-size: var(--fs--1);
	line-height: 1;
	font-family: var(--font-body-regular);
	text-align: center;
	text-transform: uppercase;
}

:is(.btn, .btn.primary):visited { color: white; }

:is(.btn, .btn.primary):hover {
	border-color: var(--gray-blue);
	background-color: var(--gray-blue);
}

:is(.btn, .btn.primary).cta {
	min-width: 140px;
	font-weight: 700;
}

:is(.btn, .btn.primary).large {
	padding: 1rem 2rem;
	font-size: var(--fs-1);
}

:is(.btn, .btn.primary).white {
	border-color: white;
	background-color: white;
	color: var(--orange);
}

:is(.btn, .btn.primary).white:hover {
	border-color: var(--gray);
	background-color: var(--gray);
	color: white;
}

/* MARK: Secondary (orange)
----------------------------------------------- */
.btn.secondary {
	border-color: var(--orange) !important;
	background-color: var(--orange) !important;
	color: white;
}

.btn.secondary:hover {
	border-color: var(--gray) !important;
	background-color: var(--gray) !important;
}

/* MARK: Tertiary (gray blue)
----------------------------------------------- */
.btn.tertiary {
	border-color: var(--gray-blue);
	background-color: var(--gray-blue);
	color: white;
}

.btn.tertiary:hover {
	border-color: var(--gray);
	background-color: var(--gray);
}

/* MARK: Outline (gray blue)
----------------------------------------------- */
.btn.outline {
	border-color: var(--gray-blue);
	background-color: transparent;
	color: var(--gray-blue);
}

.btn.outline:hover {
	border-color: var(--gray);
	color: var(--gray);
}

/* MARK: Alt
----------------------------------------------- */
.btn.alt {
	border-color: var(--gray-blue);
	background-color: transparent;
	color: var(--gray-blue);
}

.btn.alt:hover {
	border-color: var(--gray);
	color: var(--gray);
}

/* MARK: Text
----------------------------------------------- */
.btn.text {
	margin-block: 0.5rem 0;
	border: 0;
	background-color: transparent;
	padding: 0;
	color: var(--gray-blue);
}

.btn.text:visited { color: var(--gray); }

.btn.text:hover {
	background-color: transparent;
	color: var(--gray);
}

/* MARK: Modal close
----------------------------------------------- */
.modal-close {
	--size: 40px;
	position: absolute;
	top: calc( (var(--size) / 2) * -1);
	right: calc( (var(--size) / 2) * -1);
	transition: all var(--transition-specs);
	border: 0;
	border-radius: 500px;
	background-color: var(--gray-blue);
	width: var(--size);
	height: var(--size);
}

.modal-close .bar {
	position: absolute;
	top: 10px;
	left: 50%;
	transition: all var(--transition-specs);
	background-color: white;
	width: 1px;
	height: 20px;
}

.modal-close .bar:first-of-type { rotate: -45deg; }
.modal-close .bar:last-of-type { rotate: 45deg; }

.modal-close:hover { background-color: white; }
.modal-close:hover .bar { background-color: var(--orange); }

/* MARK: CSS from previous dev
----------------------------------------------- */
a.button,
form button[type="submit"],
input[type="submit"],
p.button {
	display: inline-block;
	background-color: #444D54;
	padding: .9em 1.8em .8em;
	color: #fff;
	text-transform: uppercase;
	box-sizing: border-box;
	/* margin-bottom: 1em; */
	border: 1px solid #444D54;
	border-radius: 0px;
	/* width: fit-content; */
	text-align: center;
	-webkit-appearance: none;
	font: .8em "source_sans_proregular", "Helvetica Neue", Arial, Helvetica, Geneva, sans-serif;
	line-height: 1em;
}

a p.button {
	transition: 0.4s all ease;
	margin-bottom: 0;
}

p.button {
	margin-top: 0;
}


a.button:hover,
form button[type="submit"]:hover,
input[type="submit"]:hover,
p.button:hover {
	border-color: #9DB0BD;
	background-color: #9DB0BD;
	color: #fff;
}

a.button.action,
form button[type="submit"].action,
input[type="submit"].action,
p.button.action {
	border-color: #F6902A;
	background-color: #F6902A;
}

a.button.action:hover,
form button[type="submit"].action:hover,
input[type="submit"].action:hover,
p.button.action:hover {
	border-color: #444D54;
	background-color: #444D54;
}

a.button.secondary,
form button[type="submit"].secondary,
input[type="submit"].secondary {
	border-color: #9DB0BD;
	background-color: #9DB0BD;
}

a.button.secondary:hover,
form button[type="submit"].secondary:hover,
input[type="submit"].secondary:hover {
	border-color: #444D54;
	background-color: #444D54;
}

a.button.alt,
form button[type="submit"].alt,
input[type="submit"].alt {
	border-color: #9DB0BD;
	background-color: transparent;
	color: #9DB0BD;
}

a.button.alt:hover,
form button[type="submit"].alt:hover,
input[type="submit"].alt:hover {
	border-color: #444D54;
	color: #444D54;
}

/* .banner a.button.alt:hover,
.banner form button[type="submit"].alt:hover,
.banner input[type="submit"].alt:hover {
	border-color: #fff;
	color: #fff;
} */

a.button.large,
form button[type="submit"].large,
input[type="submit"].large {
	font-weight: 400;
	font-size: 1.1em;
}

a.button.xlarge,
form button[type="submit"].xlarge,
input[type="submit"].xlarge {
	font-weight: 400;
	font-size: 1.4em;
}

a.button.icon,
form button[type="submit"].icon,
input[type="submit"].icon {
	padding-top: .6em;
}

a.button.icon i,
form button[type="submit"].icon i,
input[type="submit"].icon i {
	position: relative;
	top: 2px;
	margin-right: .2em;
	font-size: 1.2em;
}

a.more,
p.more {
	color: #9DB0BD;
	font-size: .9em;
	text-transform: uppercase;
}

p.more {
	margin: 0;
}

a.more:after,
p.more:after {
	margin-left: .3em;
	content: '\e93c';
	font-size: .8em;
	font-family: 'Linearicons';
}

a.more:hover
a:hover p.more {
	color: #444D54;
}

/* =========================================================
	CALLOUTS
	Legacy unless otherwise noted
========================================================= */

.callout {
	border: 1px solid #E3E8EC;
	padding: 2% 2% 3%;
	text-align: center;
}

.callout img {
	margin-inline: auto;
	max-width: 130px;
}

.callout h3,
.content .callout h3 {
	margin-top: 1em;
	margin-bottom: 0;
	color: #444D54;
	font-weight: 100;
	font-size: 1.2em;
	letter-spacing: 0;
	text-transform: capitalize;
}

.callout p {
	margin: .8em 0 1.5em;
	color: #AFB8C4;
	font-size: .9em;
	line-height: 1.2em;
}

.callout a.button {
	margin-top: 1em;
	margin-bottom: 0;
}

.sidebar .callout a.button {
	display: block;
}

/* .page-home .home-products .callout, */
.page-product-list .callout {
	border: none;
	padding-right: 0;
	padding-left: 0;
}



.store-cta {
	background: url(/uploads/design-assets/grid.png) repeat #f58f29;
	padding-top: 1em;
	padding-bottom: 1em;
}

.store-cta h2 {
	margin-bottom: .25em;
	color: #fff;
	font-size: 1.7em;
}

.store-cta p {
	margin-top: 0;
	color: rgba(255, 255, 255, 0.75);
	font-size: 1.2em;
}

/* =========================================================
	CARDS
========================================================= */

/* MARK: Product type
----------------------------------------------- */
.card-product-type {
	border: 1px solid var(--gray-light);
	padding: 1rem;
	text-align: center;
}

.card-product-type img {
	margin-inline: auto;
	max-width: 130px;
}

.card-product-type h2 {
	--flow-space: 1.25rem;
	margin-bottom: 0;
	color: var(--gray);
	font-weight: 100;
	font-size: var(--fs-2);
	text-transform: capitalize;
}

.card-product-type p {
	--flow-space: 0.75rem;
	margin-bottom: 0;
	color: var(--gray-blue);
	line-height: 1.2;
}

.card-product-type .button { --flow-space: 2.5rem; }

/* MARK: Resource category card
----------------------------------------------- */
.resource-category-card {
	--background-color: var(--gray-dark);
	--border-color: var(--gray-light);
	--border-hover-color: var(--gray-dark);
	--text-color: white;
	display: flex;
	position: relative;
	flex-direction: column;
	justify-content: space-between;
	border: 1px solid var(--border-color);
	background-color: var(--background-color);
}

.resource-category-card:hover {
	border-color: var(--border-hover-color);
}

.resource-category-card > i[class*="icon"] {
	position: absolute;
	top: 50px;
	right: -28.8px;
	color: rgba(255, 255, 255, 0.14);
	font-size: 96px;
}

.resource-category-card .content {
	z-index: var(--z-above);
	padding: 3.5rem 96px 0.625rem 1rem;
	height: 180px;
}

.resource-category-card .content h2 {
	margin: 0;
	color: var(--text-color);
	font-size: var(--fs-1);
}

.resource-category-card .link-text {
	display: flex;
	align-items: center;
	gap: 8px;
	z-index: var(--z-above);
	background-color: white;
	padding: 1rem;
	color: var(--orange-600);
}

.resource-category-card .link-text i:first-child { font-size: 1rem; }
.resource-category-card .link-text i:last-child { font-size: 0.75rem; }

.resource-category-card[data-color="product-color-green"] {
	--background-color: var(--green);
	--border-hover-color: var(--green);
	--text-color: var(--green-950);
}

.resource-category-card[data-color="product-color-yellow"],
.resource-category-card[data-color="product-color-gold"] {
	--background-color: var(--gold);
	--border-hover-color: var(--gold);
	--text-color: var(--gold-900);
}

.resource-category-card[data-color="product-color-navy"],
.resource-category-card[data-color="product-color-dark-gray"] {
	--background-color: var(--gray-dark);
	--border-hover-color: var(--gray-dark);
	--text-color: white;
}

.resource-category-card[data-color="product-color-blue"] {
	--background-color: var(--blue);
	--border-hover-color: var(--blue);
	--text-color: var(--blue-900);
}

.resource-category-card[data-color="product-color-orange"] {
	--background-color: var(--orange);
	--border-hover-color: var(--orange);
	--text-color: var(--orange-950);
}

.resource-category-card[data-color="product-color-red"] {
	--background-color: var(--red);
	--border-hover-color: var(--red);
	--text-color: var(--red-950);
}

.resource-category-card[data-color="product-color-purple"] {
	--background-color: var(--purple);
	--border-hover-color: var(--purple);
	--text-color: black;
}

/* =========================================================
	CTAs
========================================================= */

/* MARK: Page CTA
----------------------------------------------- */
.page-cta {
	position: relative;
	clear: both; /* TODO: remove this once all floats are removed; clears section.content */
	background-position: center;
	background-size: cover;
	background-color: var(--orange);
	padding-block: 3rem;
	text-align: center;
}

@media (width >= 640px) {
	.page-cta { padding-block: 5rem; }
}

@media (width >= 1024px) {
	.page-cta { padding-block: 7rem; }
}

.page-cta .overlay {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
}

.page-cta .overlay img {
	position: relative;
	width: 100%;
	height: 100%;
	-o-object-fit: cover;
	   object-fit: cover;
}

.page-cta .overlay::after {
	position: absolute;
	z-index: var(--z-above);
	inset: 0;
	background-color: rgba(246, 144, 41, 0.9);
	width: 100%;
	height: 100%;
	content: "";
}

.page-cta .container {
	z-index: var(--z-above);
	color: white;
	text-align: center;
}

/* TODO: to remove once main.css is fully replaced */
.page-cta .container > *:first-child { margin: 0; }
.page-cta .container > * { margin-bottom: 0; }

.page-cta .container h2 {
	font-weight: 100;
	font-size: var(--fs-5);
}

@media (width >= 1024px) {
	.page-cta .container h2 { font-size: var(--fs-6); }
}

.page-cta .container h3 {
	font-weight: 100;
	font-size: var(--fs-4);
}

@media (width >= 1024px) {
	.page-cta .container h3 { font-size: var(--fs-5); }
}

.page-cta .container h4 {
	font-weight: 100;
	font-size: var(--fs-3);
}

@media (width >= 1024px) {
	.page-cta .container h4 { font-size: var(--fs-4); }
}

.page-cta .container .button-group {
	--flow-space: 2rem;
	justify-content: center;
}

@media (width < 640px) {
	.page-cta .container .button-group .btn {
		display: block;
		width: 100%;
	}
}

/* MARK: Page-specific
----------------------------------------------- */
:is(.t-homePage, .t-productDetail, .t-graphicPage, .t-storeLandingPage) .page-cta {
	margin-top: 1.5rem;
}

@media (width >= 1024px) {
		:is(.t-homePage, .t-productDetail, .t-graphicPage, .t-storeLandingPage) .page-cta {
			margin-top: 3rem;
	}
}

/* =========================================================
	DESIGN OPTIONS BLOCK
========================================================= */

/* MARK: Block container & heading
----------------------------------------------- */
.design-options {
	background: url("/uploads/design-assets/grid.png") var(--gray-dark);
}

.design-options h2 {
	margin: 0;
	background-color: #323c44;
	padding: 2.5rem;
	color: white;
	font-weight: 300;
	font-size: 2.25rem;
	text-align: center;
}

/* MARK: Options grid
----------------------------------------------- */
.design-options .grid-constrained {
	--grid-gap: 5rem;
	padding-block: 3rem;
}

/* MARK: Grid content
----------------------------------------------- */
.design-options .grid-constrained h3 {
	color: white;
	font-weight: 300;
	font-size: 1.7rem;
	line-height: 1;
	text-align: center;
}

#whats-included.design-options .grid-constrained h3 {
	font-size: 1.5rem;
	text-align: left;
}

.design-options .grid-constrained h3 .counter {
	display: inline-block;
	display: inline-grid;
	place-content: center;
	margin-inline-end: 0.4rem;
	background-color: #323c44;
	width: 2rem;
	height: 2rem;
	color: var(--gray-light-mid);
	line-height: 1;
}

.design-options .grid-constrained ul {
	display: grid;
	row-gap: 2rem;
	margin: 3.5rem 0 0 0;
	padding: 0;
}

#whats-included.design-options .grid-constrained ul {
	margin-block-start: 0;
}

#whats-included.design-options .grid-constrained h3 + ul {
	margin-block-start: 1.5rem;
}

.design-options .grid-constrained ul li:has(i, img) {
	--icon-size: 2.2rem;
	display: grid;
	grid-template-columns: var(--icon-size) auto;
	gap: 0.75rem;
}

.design-options .grid-constrained ul li i {
	color: var(--orange);
	font-size: var(--icon-size);
}

.design-options .grid-constrained ul li:has(img) {
	--icon-size: 75px;
}

.design-options .grid-constrained ul h4 {
	color: white;
	font-weight: 300;
	font-size: 1.3rem;
}

.design-options .grid-constrained ul p {
	margin-block-start: 0.5rem;
	color: #99a2ae;
}

.design-options .grid-constrained ul.color-swatches {
	display: flex;
	-moz-column-gap: 0.75rem;
	     column-gap: 0.75rem;
	row-gap: 0.5rem;
	flex-wrap: wrap;
	margin-block-start: 0.5rem;
}

.design-options .grid-constrained ul.color-swatches li span {
	display: block;
	border: 1px solid rgba(255 255 255 / 0.44);
	border-radius: 50%;
	background-color: white;
	width: 1.875rem;
	height: 1.875rem;
}

.design-options .grid-constrained ul.color-swatches + p {
	margin-block-start: 0.5rem;
	color: #868e94;
	font-size: 0.9rem;
}

.design-options .grid-constrained ul.checklist {
	display: grid;
	gap: 1.5rem;
	margin-block-start: 2rem;
}

.design-options .grid-constrained ul.checklist li {
	display: grid;
	grid-template-columns: 24px auto;
	color: #99a2ae;
	line-height: 1.3;
}

.design-options .grid-constrained ul.checklist li::before {
	content: '\e959';
	color: var(--orange);
	font-family: LinearIcons;
}

/* =========================================================
	FILTERS
========================================================= */

/* MARK: Store filters
----------------------------------------------- */
.filter-toggle {
	display: flex;
	gap: 0.25rem;
	transition: color var(--transition-specs);
	border: 0;
	background-color: transparent;
	padding: 1rem;
	color: var(--gray-mid);
}

@media (width >= 768px) {
	.filter-toggle { display: none; }
}

.filter-toggle:hover { color: var(--gray); }

.filter-toggle::before {
	content: '\e95b';
	font-family: LinearIcons;
}

.filter-toggle.closed::before {
	content: '\e95a';
	font-family: LinearIcons;
}

.iso-filters { display: none; }

@media (width >= 768px) {
	.iso-filters { display: block; }
}

.iso-filters > div {
	border-top: 1px solid var(--gray-light);
	padding-block: 1.5rem;
}

@media (width >= 768px) {
	.iso-filters > div:first-child { border-top: 0; }
}

.iso-filters > div > * { padding-inline: 1.5rem; }

.iso-filters > div h3 {
	margin: 0 0 1.25rem;
	color: var(--gray);
	font-weight: 100;
	font-size: var(--fs-3);
	line-height: 1;
}

.iso-filters > div .iso-filters-button-group {
	display: flex;
	flex-wrap: wrap;
	gap: 0.75rem;
}

@media (width >= 768px) {
	.iso-filters > div .iso-filters-button-group {
		display: grid;
		grid-template-columns: repeat(2, 1fr);
	}
}

.iso-filters > div .iso-filters-button-group button {
	display: flex;
	align-items: center;
	gap: 0.25rem;
	border: 0;
	background-color: transparent;
	color: var(--gray-blue--1);
	font-weight: 300;
	font-size: var(--fs-1);
	font-family: var(--font-body-regular);
}

.iso-filters > div .iso-filters-button-group button::before {
	display: inline-block;
	border: 1px solid var(--gray-light--1);
	background-color: white;
	width: 1rem;
	height: 1rem;
	content: "";
	line-height: 1;
}

.iso-filters > div .iso-filters-button-group button.is-active::before {
	display: grid;
	justify-content: center;
	align-items: center;
	border-color: var(--green);
	content: '\e934';
	color: var(--green);
	font-size: 0.75rem;
	font-family: LinearIcons;
	text-align: center;
}

.iso-grid { background-color: white; }

/*
Because this uses Isotope, the grid has to be
styled/set up in more of an "old school" manner,
as oppsed to using CSS Grid. Dumb, but that's
what happens when libraries/plugins like Isotope
don't get updated after a while. :(
*/
.iso-grid article {
	margin-bottom: 2rem;
	width: 100%;
}

@media (width >= 560px) {
	.iso-grid article { width: calc(50% - 2rem); }
}

@media (width >= 1024px) {
	.iso-grid article { width: calc( (100% / 3) - 2rem); }
}

.iso-grid article:last-child { margin-bottom: 0; }

.iso-grid article > a {
	display: grid;
	gap: 0.5rem;
}

.iso-grid article figure {
	display: block;
	position: relative;
	margin: 0;
	padding-top: 76.25%;
	width: 100%;
	height: 0;
	overflow: hidden;
}

.iso-grid article figure img {
	display: block;
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	margin: auto;
	max-width: 100%;
	max-height: 100%;
}

.iso-grid article .content {
	width: 100%;
	text-align: center;
}

.iso-grid article .content h2 {
	display: grid;
	margin: 0;
	color: var(--gray);
	font-weight: 400;
}

.iso-grid article .content h2 span:first-child {
	order: 2;
	margin-top: 0.5rem;
	color: var(--gray-mid);
	font-size: var(--fs-2);
}

.iso-grid article .content h2 span:last-child {
	display: flex;
	justify-content: center;
	align-items: center;
	order: 1;
	font-size: var(--fs-4);
}

.iso-grid article .content h2 span:last-child::before {
	content: "$";
	font-size: var(--fs-2);
}

.iso-grid article .content p {
	--flow-space: 0.625rem;
	margin-bottom: 0;
	color: var(--gray-blue--1);
	font-weight: 400;
	line-height: 1.2;
	text-transform: uppercase;
}

.iso-grid article .content p span {
	display: block;
	margin-bottom: 0.25rem;
	margin-inline: auto;
	border: 1px solid var(--gray-blue);
	border-radius: 100px;
	padding-inline: 0.75rem;
	max-width: -moz-fit-content;
	max-width: fit-content;
	line-height: 1.4;
}

.iso-grid article .content .btn { display: block; }

.iso-content { position: relative; }

.iso-no-results {
	position: absolute;
	top: 2.5rem;
	z-index: var(--z-below);
	width: 100%;
	text-align: center;
}

.iso-no-results i { font-size: var(--fs-7); }

.iso-no-results h4 {
	margin: 0;
	font-weight: 300;
	font-size: var(--fs-3);
}

.iso-no-results p {
	margin-top: 0.5rem;
	margin-bottom: 0;
	color: var(--gray-light--1);
}

/* =========================================================
	FOOTER
========================================================= */

/* MARK: Container and links
----------------------------------------------- */
footer {
	margin-block-start: 1.5rem;
	color: var(--gray-light-mid);
	font-size: 0.9rem;
	line-height: 1.2em;
	text-align: center;
}

@media (width >= 650px) {
	footer {
		text-align: left;
	}
}

@media (width >= 1024px) {
	footer { margin-block-start: 3rem; }
}

footer :is(a:link, a:visited) {
	color: var(--gray-light-mid);
}

footer a:hover { color: var(--gray-dark); }

/* MARK: Logo
----------------------------------------------- */
footer .container > div:first-child img {
	display: block;
	margin-inline: auto;
}

@media (width >= 650px) {
	footer .container > div:first-child img {
		margin-inline: 0;
	}
}

/* MARK: Columns
----------------------------------------------- */
@media (width >= 650px) {
	footer .columns {
		display: grid;
		grid-template-columns: repeat(3, 1fr);
		gap: 2rem;
	}
}

@media (width >= 850px) {
	footer .columns {
		grid-template-columns: 23% auto 20%;
	}
}

/* MARK: Info
----------------------------------------------- */
footer .info {
	margin-block-start: 1rem;
}

footer .info > p:not(:first-child) {
	margin-block-start: 1.25rem;
}

/* MARK: Nav
----------------------------------------------- */
@media (width >= 850px) {
	footer nav {
		display: grid;
		grid-template-columns: repeat(3, 1fr);
		gap: 1rem;
	}
}

/* MARK: Utility
----------------------------------------------- */
footer .utility {
	display: grid;
	gap: 2rem;
	margin-block-start: 3rem;
	border-top: 1px solid var(--gray-light);
	padding-top: 1.5rem;
	padding-bottom: 2rem;
}

@media (width >= 650px) {
	footer .utility {
		grid-template-columns: repeat(2, 1fr);
	}
}

/* MARK: Copyright
----------------------------------------------- */
footer .copyright {
	font-size: 0.75rem;
	line-height: 1.2;
}

@media (width >= 650px) {
	footer .copyright {
		display: grid;
		grid-template-columns: 41px auto;
		align-items: center;
		gap: 10px;
	}

	footer .copyright span {
		margin-block-start: -0.5rem;
	}
}

footer .copyright img {
	margin-inline: auto;
	margin-block-end: 0.5rem;
}

/* .no-svg footer .utility .copyright {
	background: url(/uploads/design-assets/icon-footer.png) no-repeat;
} */

/* MARK: Social links
----------------------------------------------- */
footer .social ul {
	display: flex;
	justify-content: center;
	gap: 0.5rem;
	margin: 0;
	padding: 0;
}

@media (width >= 650px) {
	footer .social ul {
		justify-content: flex-end;
	}
}

footer .social ul li {
	display: grid;
	align-items: center;
	height: 2.25rem;
	font-size: 2.25rem;
}

footer .social ul li a {
	margin-block-start: 0.5rem;
}

/* MARK: Legacy/previous dev
----------------------------------------------- */
.page-store footer {
	padding-top: 3em;
}

.no-svg footer .info h5 {
	background: url(/uploads/design-assets/logotype-footer.png) no-repeat;
}

footer nav ul {
	padding: 0;
}

footer nav li {
	padding-bottom: .3em;
}

footer .search form.infield {
	position: relative;
	background-color: #fff;
	padding: 0;
}

footer .search input[type="text"] {
	background-color: #EFF2F4;
	padding-left: 2em;
	color: #AFB8C4;
	font-weight: 400;
}

footer .search form .form-item label {
	padding-left: 2.2em;
	color: #AFB8C4;
	font-weight: 400;
}

footer .search i {
	position: absolute;
	top: .8em;
	left: .8em;
	color: #AFB8C4;
}



.page-landing-longform footer .info,
.page-landing-longform footer nav,
.page-landing-longform footer .search,
.page-landing-longform footer .social {
	display: none;
}

.page-landing-longform footer .utility {
	border-top: none;
}

/* =========================================================
	FEATURE SECTION BLOCK
========================================================= */

/* MARK: Feature detail container
----------------------------------------------- */
.feature-detail { padding-block: 1rem; }

.feature-detail:nth-child(2n of .feature-detail) { background-color: #f6f8f9; }

.feature-detail .container {
	display: grid;
	gap: 1rem;
}

@media (width >= 860px) {
	.feature-detail { padding-block: 3rem; }

	.feature-detail .container {
		grid-template-columns: repeat(2, 1fr);
		gap: 3rem;
	}

	.feature-detail:nth-child(2n of .feature-detail) .container > img { order: 2; }
	.feature-detail:nth-child(2n of .feature-detail) .container > div { order: 1; }
}

@media (width >= 1100px) {
	.feature-detail .container { align-items: center; }
}


/* MARK: Content
----------------------------------------------- */
.feature-detail h2 {
	font-weight: 300;
	font-size: 2rem;
	line-height: 1;
}

/* Color variations */
.feature-detail[data-color="product-color-green"] h2 { color: var(--green); }
.feature-detail[data-color="product-color-red"] h2 { color: var(--red); }
.feature-detail[data-color="product-color-blue"] h2 { color: var(--blue); }
.feature-detail[data-color="product-color-purple"] h2 { color: var(--purple); }
.feature-detail[data-color="product-color-yellow"] h2 { color: var(--gold); }
.feature-detail[data-color="product-color-orange"] h2 { color: var(--orange); }

.feature-detail h3 {
	--flow-space: 1.75rem;
	font-weight: 300;
	font-size: 1.5rem;
}

.feature-detail ul {
	display: grid;
	gap: 0.8rem;
	padding: 0;
	list-style: none;
}

.feature-detail ul li {
	display: grid;
	grid-template-columns: 1.25rem auto;
}

.feature-detail ul li::before {
	margin-block-start: 0.2rem;
	content: '\e934';
	color: var(--green);
	font-size: 0.8rem;
	font-family: "LinearIcons";
}

/* =========================================================
	FORM EMBED BLOCK (Matrix)
========================================================= */

.form-block {
	border-block: 1px solid var(--gray-light);
	padding-block: var(--s2);
}

@media (width >= 768px) {
	.form-block { padding-block: var(--s4); }
}

.form-block > div.center :is(h2, .prose) {
	text-align: center;
	margin-inline: auto;
}

@media (width >= 768px) {
	.form-block > div.center :is(h2, .prose) { max-width: 70%; }
}

.form-block > div h2 {
	font-size: var(--fs-5);
	font-weight: 300;
	margin-top: 0;
	margin-bottom: 0;
}

.form-block > div .prose,
.form-block > div .prose p { margin-bottom: 0; }

.form-block > div .prose p:first-child { margin-top: 0; }

.form-block.fstack-gray-100 { background-color: var(--fstack-gray-100); }
.form-block.fstack-gray-100 > div h2,
.form-block.fstack-gray-100 > div .prose { color: var(--fstack-gray-600); }

.form-block.fstack-gray-200 { background-color: var(--fstack-gray-200); }
.form-block.fstack-gray-200 > div h2,
.form-block.fstack-gray-200 > div .prose { color: var(--fstack-gray-600); }

.form-block.fstack-gray-300 { background-color: var(--fstack-gray-300); }
.form-block.fstack-gray-300 > div h2,
.form-block.fstack-gray-300 > div .prose { color: black; }

.form-block.fstack-gray-400 { background-color: var(--fstack-gray-400); }
.form-block.fstack-gray-400 > div h2,
.form-block.fstack-gray-400 > div .prose { color: black; }

.form-block.fstack-gray-500 { background-color: var(--fstack-gray-500); }
.form-block.fstack-gray-500 > div h2,
.form-block.fstack-gray-500 > div .prose { color: white; }

.form-block.fstack-gray-600 { background-color: var(--fstack-gray-600); }
.form-block.fstack-gray-600 > div h2,
.form-block.fstack-gray-600 > div .prose { color: var(--fstack-gray-100); }

.form-block.orange { background-color: var(--orange);}
.form-block.orange > div h2,
.form-block.orange > div .prose { color: white; }

.form-block > div iframe {
	display: block;
	margin-inline: auto;
	max-width: 100%;
}

/* =========================================================
	FORMS
========================================================= */

:is(input, textarea)::-moz-placeholder {
	color: var(--gray-mid-light);
}

:is(input, textarea)::placeholder {
	color: var(--gray-mid-light);
}


/* MARK: Legacy (prev dev)
----------------------------------------------- */
form.infield {
	margin-bottom: 2em;
	background-color: #EFF2F4;
	padding: 1.8em 1.5em 1em;
}

.modal-form form.infield {
	margin-bottom: 0;
}

form.infield h3 {
	margin-top: 0;
	color: #444D54;
	font-size: 1.7em;
	letter-spacing: 0;
	text-transform: capitalize;
}

.page-landing-longform .sidebar form.infield h3 {
	margin-bottom: .5em;
	color: #808080;
	font-size: 1.2em;
}

.infield input[type="text"],
.infield textarea,
.infield input[type="file"],
.infield input[type="url"],
.infield input[type="email"],
.infield input[type="tel"],
.infield input[type="number"],
.infield input[type="date"] {
	border: none;
	border-left: 4px solid #BCC2C8;
	padding: .5em;
	width: 100%;
	color: #808080;
	font: 500 1.1em "source_sans_proregular", Helvetica, Helvetica;
	box-sizing: border-box;
	border-radius: 0px;
	-webkit-appearance: none;
	background-color: #fff;
}

.infield input[type="number"] {
	-moz-appearance:textfield;
}

.infield input[type=number]::-webkit-inner-spin-button,
.infield input[type=number]::-webkit-outer-spin-button {
  -webkit-appearance: none !important;
  margin: 0 !important;
}

.infield .store-option-action input[type="text"] {
	border: none;
	text-align: center;
}

.infield select {
	border: none;
	border-left: 4px solid #BCC2C8;
	padding: .5em;
	width: 100%;
	color: #808080;
	font: 500 1.1em "source_sans_proregular", Helvetica, Helvetica;
	box-sizing: border-box;
	border-radius: 0px;
	border-radius: 0px !important;
	background: url(/uploads/design-assets/select-arrow.png) right center no-repeat;
	background-size: 21px;
	-webkit-border-radius: 0px;
	-webkit-appearance: none;
	background-color: #fff;
	-webkit-border-radius: 0px;
	-webkit-appearance: none;
	-moz-appearance: none;
	  appearance: none;
	border-right: 10px solid #fff;
}

.infield .store-option-action select {
	margin-right: auto;
	margin-bottom: .5em;
	margin-left: auto;
	border: 1px solid #abb4c0;
	background: url(/uploads/design-assets/select-arrow3.png) right center no-repeat;
	background-size: 16px;
	padding-top: .1em;
	padding-right: 1.2em;
	padding-bottom: .1em;
	padding-left: .6em;
	width: auto;
	color: #99acb9;
	font-size: 1em;
}

.infield .store-option-action select.quantity {
	background: url(/uploads/design-assets/select-arrow2.png) right center no-repeat;
	background-size: 36px;
	padding-right: 2.4em;
	font-size: 1.2em;
}

.infield .active .store-option-action select {
	border-color: #00b97e;
	color: #00b97e;
}

.infield select.default-value {
	color: #99acb9 !important;
	font-weight: normal;
	font-family: "source_sans_prolight", "Helvetica Neue", Arial, Helvetica, Geneva, sans-serif;
}

/* select::-ms-expand {
    display: none;
} */

/* .lt-ie10 .infield select {
	background-image: none;
} */



/* .lt-ie10 .infield input[type="text"]:-ms-input-placeholder,
.lt-ie10 .infield textarea:-ms-input-placeholder,
.lt-ie10 .infield input[type="file"]:-ms-input-placeholder,
.lt-ie10 .infield input[type="url"]:-ms-input-placeholder,
.lt-ie10 .infield input[type="email"]:-ms-input-placeholder,
.lt-ie10 .infield input[type="tel"]:-ms-input-placeholder,
.lt-ie10 .infield input[type="number"]:-ms-input-placeholder,
.lt-ie10 .infield input[type="date"]:-ms-input-placeholder {
	   color: transparent;
} */


form .form-item { position: relative; clear: both; margin: 1.5em 0;
}


form .form-item-spacer {
	height: 2.5em;
}

.infield .required input[type="text"],
.infield .required textarea,
.infield .required input[type="file"],
.infield .required input[type="url"],
.infield .required input[type="email"],
.infield .required input[type="tel"],
.infield .required input[type="number"],
.infield .required input[type="date"],
.infield .required select {
	border-left-color: #6D747A;
}

.infield textarea {
	height: 150px;
}

.modal-box .infield textarea {
	height: 250px;
}

form .form-item.required:after {
	position: absolute;
	top: .4em;
	right: .5em;
	content: '\e646';
	color: #6D747A;
	font-family: 'LinearIcons';
}

form .form-item.required.select-field:after {
	content: '';
}

form .form-item.submit {
	margin-bottom: 0px;
}

.fields-float .form-item {
	float: left;
	clear: none;
	margin-top: 0;
	margin-left: 8%;
}

.fields-float .form-item:first-child {
	margin-left: 0;
}

.fields-float .col-50 {
	width: 46%;
}

.fields-float .col-20 {
	width: 20%;
}

.fields-float .col-30 {
	width: 28%;
}


form .form-item label {
	display: block;
	position: absolute;
	top: 0;
	left: 0px;
	margin: 0;
	padding: .6em;
	width: 100%;
	color: #99acb9;
	box-sizing: border-box;
	font-size: 1.1em;
	text-align: left;
}

form .store-option-action .form-item label {
	text-align: center;
}

form .store-option-action .form-item.shipping label {
	font-size: .9em;
}

form .store-option-action .form-item.shipping label:hover {
	cursor: pointer;
}

/* ::-webkit-input-placeholder {
   color: #979797;
} */

/* Firefox 18- */
/* :-moz-placeholder {
   color: #979797;
} */

/* Firefox 19+ */
/* ::-moz-placeholder {
   color: #979797;
} */

/* :-ms-input-placeholder {
   color: #979797;
} */

.bs-callout-warning {
	background-color: #e9726c;
	padding: 1em;
}

.bs-callout-info {
	background-color: #00bd7e;
	padding: 1em;
}

.bs-callout h4 {
	margin-top: 0;
	margin-bottom: .2em;
	color: #fff;
	font-style: normal;
	font-weight: normal;
	font-size: 1.4em;
}

.bs-callout p {
	opacity: 0.74;
	margin-top: 0 !important;
	margin-bottom: 0 !important;
	color: #fff;
	font-style: italic;
	font-size: 1em;
	line-height: 1.2em;
}

.modal-form .bs-callout p {
	font-size: 1em;
}


input.parsley-error,
select.parsley-error,
textarea.parsley-error {
  border-left-color: #e9726c !important;
  background-color: #fff !important;
  color: #e9726c !important;
}

.parsley-errors-list {
  opacity: 0;

  transition: all .3s ease-in;
	margin: 10px 0 0 !important;
	padding: 0;
  font-size: 0.9em;
  line-height: 0.9em;
  list-style-type: none;
  -o-transition: all .3s ease-in;
  -moz-transition: all .3s ease-in;
  -webkit-transition: all .3s ease-in;
  text-align: left;
}

.parsley-errors-list.filled {
  opacity: 1;
}

.content .parsley-errors-list {
	padding-left: 1.2em;
}

.content .parsley-errors-list li {
	color: #e9726c;
	font-style: italic;
}
.content .parsley-errors-list li:before {
	left: -1.3em;
	content: '\e955';
	color: #e9726c;
	font-style: normal;
	font-weight: normal;
	font-size: .8em;
}


/* MARK: Form width variations
----------------------------------------------- */
form.narrow { max-width: 500px; }

/* MARK: Field errors
----------------------------------------------- */
form input + .field-error {
	display: block;
	margin-top: 0.25rem;
	color: var(--red);
	font-style: italic;
	font-weight: 800;
}

/* MARK: Checkout form(s)
----------------------------------------------- */
form.custom-fields.narrow { margin-inline: auto; }

form.custom-fields input[type="text"],
form.custom-fields input[type="email"],
form.custom-fields select {
	border: 4px solid #BCC2C8; /* TODO: grays need to be set up */
	border-width: 0 0 0 4px;
}

form.custom-fields input[type="text"][required],
form.custom-fields input[type="email"][required],
form.custom-fields select[required] {
	border-color: var(--gray-mid);
}

form.custom-fields .field-row { max-width: unset; }

form.custom-fields .checkout-submit {
	--flow-space: 4rem;
}

form.custom-fields .checkout-submit button {
	margin-inline: auto;
	min-width: 30%;
}

form.custom-fields .radio-option { color: var(--gray); }
form.custom-fields .radio-option label { font-weight: 700; }

/* =========================================================
	GRAPHIC SECTIONS
========================================================= */

/* MARK: Base styles
----------------------------------------------- */
.graphic-section {
	background-color: var(--gray-dark);
	padding-block: 2rem;
	width: 100vw;
	color: white;
}

@media (width >= 680px) {
	.graphic-section { position: relative; }
}

.graphic-section .container {
	display: grid;
	gap: 3rem;
}

@media (width >= 680px) {
	.graphic-section .container {
		grid-template-columns: repeat(2, 1fr);
		align-items: center;
	}
}

.graphic-section .container .image {
	--container-width: calc(100vw - 2rem);
	order: 1;
}

@media (width < 680px) {
	.graphic-section .container .image img {
		position: relative;
		right: 50%;
		/* Expand the image beyond container */
		left: 50%;
		margin-right: -50vw;
		margin-left: -50vw;
		width: 100vw;
		max-width: 100vw;
	}
}

@media (width >= 680px) {
	.graphic-section .container .image img {
		position: relative;
		width: 100%;
	}
}

.graphic-section .container .text { order: 2; }

.graphic-section .container .text h2 {
	display: grid;
	grid-template-columns: 48px auto;
	gap: 0.5rem;
	color: inherit;
	font-size: var(--fs-4);
}

.graphic-section .container .text h2 i {
	border-radius: 50%;
	background-color: white;
	padding: 10px;
	color: var(--gray-dark);
}

.graphic-section .container .text .prose * { color: inherit; }
.graphic-section .container .text .prose strong { font-weight: 700; }
.graphic-section .container .text .prose ul li::before { color: inherit; }

.graphic-section .container .text .prose table {
	--table-color: white;
	border: 1px solid var(--table-color);
}

.graphic-section .container .text .prose table thead tr th {
	border-color: var(--table-color);
	background-color: var(--table-color);
	padding: 1rem;
	font-size: var(--fs-2);
	line-height: 1;
	text-align: center;
}

.graphic-section .container .text .prose table tbody tr,
.graphic-section .container .text .prose table tbody tr th {
	border-inline: none;
	border-block-end-color: var(--table-color);
}

.graphic-section .container .text .prose table tbody tr :is(td, th) {
	padding: 0.75rem;
	line-height: 1.2;
}

.graphic-section .container .text .prose table tbody tr th {
	width: 30%;
	font-weight: 700;
	text-align: left;
}

/* MARK: Reverse
----------------------------------------------- */
@media (width >= 1264px) {
	.graphic-section.reverse { overflow-x: hidden; }
}

.graphic-section.reverse .container .image { order: 2; }
.graphic-section.reverse .container .text { order: 1; }

/* MARK: Adjustments for Why Modular page
----------------------------------------------- */
@media (width >= 680px) {
	.graphic-section.why-modular .container { align-items: end; }

	.graphic-section.why-modular .container .image img {
		left: calc((100vw - var(--container-width)) * -1);
		width: calc(100% + 2rem);
	}

	.graphic-section.reverse.why-modular .container .image img {
		right: 0;
		left: unset;
	}
}

@media (width >= 1264px) {
	.graphic-section.why-modular .container .image img {
		bottom: -2rem;
		left: calc( ((100vw - 1200px) / 2) * -1);
	}

	.graphic-section.reverse.why-modular .container .image img {
		right: calc( ( (100vw - 1200px - 4rem) / 2) * -1);
	}
}

/* MARK: No image
----------------------------------------------- */
.graphic-section.no-image .container { display: block; }
.graphic-section.no-image .container .image { display: none; }

.graphic-section.no-image .container .text {
	margin-inline: auto;
	max-width: 1000px;
}

.graphic-section.no-image .container .text h2,
.graphic-section.no-image .container .text .prose > *:not(table) { text-align: center; }
.graphic-section.no-image .container .text h2 { justify-content: center; }

/* MARK: Colors
----------------------------------------------- */
.graphic-section.blue {
	background-color: var(--blue);
	color: var(--blue-950);
}

.graphic-section.blue i { color: var(--blue); }
.graphic-section.blue .container .text .prose table { --table-color: var(--blue-100); }

.graphic-section.green {
	background-color: var(--green);
	color: var(--green-950);
}

.graphic-section.green i { color: var(--green); }

.graphic-section.orange {
	background-color: var(--orange);
	color: black;
}

.graphic-section.orange i { color: var(--orange); }

.graphic-section.purple {
	background-color: var(--purple);
	color: black;
}

.graphic-section.purple i { color: var(--purple); }

/* .graphic-section.navy {} */
/* .graphic-section.red {} */
/* .graphic-section.yellow {} */

/* =========================================================
	HERO BANNERS
========================================================= */

/* MARK: Home hero
----------------------------------------------- */
.home-hero {
	position: relative;
	background-color: var(--gray);
	padding-block: 2rem;
	min-height: 800px;
}

@media (width >=768px) {
	.home-hero {
		padding-top: 5rem;
		min-height: 700px;
	}
}

@media (width >=1024px) {
	.home-hero {
		padding-top: 6rem;
		min-height: 600px;
	}
}

.home-hero>.overlay {
	position: absolute;
	inset: 0;
	background-color: var(--gray);
	width: 100%;
	height: 100%;
}

.home-hero>.overlay::after {
	position: absolute;
	inset: 0;
	background-color: hsla(206, 11%, 30%, 0.85);
	width: 100%;
	height: 100%;
	content: "";
}

.home-hero>.overlay img {
	width: 100%;
	height: 100%;
	-o-object-fit: cover;
	   object-fit: cover;
}

.home-hero>.container h1 {
	margin-block: 0;
	color: white;
	font-style: normal;
	font-weight: 300;
	font-size: var(--fs-5);
	line-height: 1;
	text-align: center;
}

@media (width >=640px) {
	.home-hero>.container h1 {
		text-align: left;
	}
}

@media (width >=768px) {
	.home-hero>.container h1 {
		font-size: var(--fs-7);
	}
}

.home-hero>.container .prose {
	color: white;
	text-align: center;
}

@media (width >=640px) {
	.home-hero>.container .prose {
		color: var(--gray-blue);
		text-align: left;
	}
}

.home-hero>.container .button-group {
	--flow-space: 1.75rem;
	display: grid;
	gap: 1rem;
}

@media (width >=640px) {
	.home-hero>.container .button-group {
		--flow-space: 3rem;
		display: flex;
		gap: 1.25rem;
	}
}

.home-hero>.container .button-group .btn {
	margin: 0;
}

.home-hero>.container .button-group .btn:hover {
	border-color: white;
	color: white;
}

.home-hero>.container .grid {
	--flow-space: 1.5rem;
	grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
	background-color: var(--gray);
}

@media (width >=768px) {
	.home-hero>.container .grid {
		--flow-space: 3.5rem;
		grid-template-columns: repeat(3, 1fr);
		gap: 1.25rem;
		background-color: transparent;
	}
}

.home-hero>.container .grid>div {
	border-bottom: 1px solid var(--gray-mid);
	padding-inline: 1rem;
	padding-block: 2rem;
	text-align: center;
}

@media (width >=768px) {
	.home-hero>.container .grid>div {
		border: 0;
		padding-inline: 0;
	}
}

.home-hero>.container .grid>div:last-child {
	border: 0;
}

.home-hero>.container .grid>div h3 {
	display: grid;
	gap: 0.5rem;
	color: white;
	font-weight: 300;
	font-size: var(--fs-4);
	text-align: center;
}

.home-hero>.container .grid>div h3 i {
	display: block;
	margin-inline: auto;
	margin-block-end: 0.5rem;
	border: 2px solid var(--orange);
	border-radius: 100%;
	width: 60px;
	height: 60px;
	color: var(--orange);
	line-height: 54px;
}

.home-hero>.container .grid>div p {
	margin-block-start: 2rem;
	color: var(--gray-blue);
	font-size: var(--fs-1);
}

.home-hero>.container .grid>div a {
	display: inline-block;
	margin-block-start: 1.5rem;
	color: white;
	font-size: var(--fs-0);
}

.home-hero>.container .grid>div a.more:hover {
	color: var(--gray-blue);
}

/* MARK: Page heroes
----------------------------------------------- */
.page-hero {
	display: grid;
	position: relative;
	place-items: center;
	background-position: center center;
	background-size: cover;
	background-repeat: no-repeat;
	padding-block: 1.5rem;
	min-height: 150px;
}

.page-hero::before {
	position: absolute;
	inset: 0;
	background-color: rgba(68, 77, 83, 0.85);
	width: 100%;
	height: 100%;
	content: "";
}

/* .page-hero .container {} */

.page-hero :is(h1, h2) {
	color: #fff;
	font-style: normal;
	font-weight: 300;
	font-size: 2.375rem;
	line-height: 1rem;
	text-align: center;
}

.page-hero p {
	color: var(--gray-light);
}

/* MARK: Product heroes
----------------------------------------------- */
.product-hero {
	--min-height: 350px;
	position: relative;
	padding-block: 2rem;
	min-height: var(--min-height);
}

.product-hero__bg {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	-o-object-fit: cover;
	   object-fit: cover;
	z-index: 0;
}

@media (width >=560px) {
	.product-hero {
		display: grid;
		align-items: center;
	}
}

@media (width >=768px) {
	.product-hero {
		--min-height: 470px;
	}
}

.product-hero .hero-content {
	position: relative;
	z-index: 1;
	--padding: 1.25rem;
	--margin-inline: 2rem;
	--heading-color: white;
	--heading-size: 2rem;
	--text-size: 1rem;
	--width: 90%;
	display: grid;
	row-gap: 2rem;
	margin-inline: var(--margin-inline);
	background-color: rgba(255 255 255 / 0.75);
	padding: var(--padding);
}

@media (width >=560px) {
	.product-hero .hero-content {
		--padding: 2rem;
		--margin-inline: 0 auto;
		grid-template-columns: 80px auto;
		-moz-column-gap: 1.5rem;
		     column-gap: 1.5rem;
		width: var(--width);
	}
}

@media (width >=650px) {
	.product-hero .hero-content {
		grid-template-columns: 120px auto;
	}
}

@media (width >=768px) {
	.product-hero .hero-content {
		--heading-size: 2.4rem;
		--text-size: 1.3rem;
	}
}

@media (width >=940px) {
	.product-hero .hero-content {
		--width: 50%;
	}
}

.product-hero .hero-content h1 {
	margin-block-start: 1.25rem;
	color: var(--heading-color);
	font-weight: 300;
	font-size: var(--heading-size);
	line-height: 1;
}

.product-hero .hero-content p {
	--flow-space: 0.5rem;
	color: rgba(255 255 255 / 0.7);
	font-size: var(--text-size);
}

/* Color variations */
.product-hero[data-color="product-color-orange"] .hero-content {
	background-color: rgba(246 144 41 / 0.89);
}

.product-hero[data-color="product-color-green"] .hero-content {
	background-color: rgba(0 189 126 / 0.89);
}

.product-hero[data-color="product-color-red"] .hero-content {
	background-color: rgba(233 113 107 / 0.89);
}

.product-hero[data-color="product-color-blue"] .hero-content {
	background-color: rgba(107 186 220 / 0.89);
}

.product-hero[data-color="product-color-purple"] .hero-content {
	background-color: rgba(145 117 214 / 0.89);
}

.product-hero[data-color="product-color-yellow"] .hero-content {
	background-color: rgba(212 191 112 / 0.89);
}

/* MARK: Blog hero
----------------------------------------------- */
.blog-hero {
	background-position: center;
	background-size: cover;
	background-repeat: no-repeat;
}

.blog-hero .hero-content {
	background-color: rgba(68 77 83 / 0.85);
	padding: 2rem 1.5rem;
}

@media (width >= 768px) {
	.blog-hero .hero-content {
		display: grid;
		align-items: center;
		margin-inline: auto 0;
		padding-inline-start: 5vw;
		padding-block: 3rem;
		width: 60%;
		min-height: 430px;
	}

	.blog-hero .hero-content-inner { max-width: 640px; }
}

@media (width >= 1280px) {
	.blog-hero .hero-content {
		padding-inline-start: 4.5rem;
	}
	.blog-hero .hero-content-inner { max-width: 780px; }
}

.blog-hero .hero-content h1 {
	color: white;
	font-weight: 300;
	line-height: 1;
}

.blog-hero .hero-content h1 .kicker {
	display: block;
	margin-block-end: 0.25rem;
	color: var(--gray-light-mid);
	font-size: 0.75rem;
	letter-spacing: 8%;
	text-transform: uppercase;
}

.blog-hero .hero-content .meta {
	--flow-space: 0.5rem !important;
	font-style: italic;
	letter-spacing: 4%;
}

.blog-hero .hero-content p:not(.meta) {
	color: var(--gray-light);
}

.blog-hero .hero-content .button-group {
	--flow-space: 1.5rem;
}

.t-blogListing a.button.action {
	width: auto;
}

/* MARK: Blog entry hero
----------------------------------------------- */
.blog-entry-hero {
	--min-height: 294px;
	position: relative;
	background-size: cover;
	background-repeat: no-repeat;
	min-height: var(--min-height);
}

.blog-entry-hero .hero-content {
	display: grid;
	align-items: center;
	background-color: rgba(68 77 83 / 0.85);
	padding-inline: 1.5rem;
	padding-block: 6rem;
	min-height: var(--min-height);
}

.blog-entry-hero .hero-content h1 {
	color: white;
	font-weight: 300;
	font-size: 2rem;
	line-height: 1;
}

@media (width >= 768px) {
	.blog-entry-hero .hero-content h1 {
		font-size: 2.5rem;
		text-wrap: unset;
	}
}

.blog-entry-hero .hero-content .meta {
	margin-block-start: 0.5rem;
}



/* .banner p.featured {
	margin-bottom: -1em;
	color: #afb8c4;
	font-size: .8em;
	letter-spacing: 1px;
	text-transform: uppercase;
} */

/* .page-ezproduct-detail .banner {
	text-align: center;
}

.page-ezproduct-detail .banner article {
	margin-right: auto;
	margin-left: auto;
	max-width: 868px;
} */

/* .page-home .banner {
	background-position: 70% top;
	background-size: 280%;
} */



/* .page-home .banner .overlay {
	padding-bottom: 0;
} */

/* .lt-ie9 .banner .overlay {
	background-color: #444D54;
} */



/* .page-blog-list .banner h1 {
	margin-bottom: .2em;
	text-align: left;
} */

/* .page-blog-list.page-blog-category .banner h1 {
	text-align: center;
} */

/* .page-home .banner h1 {
	text-align: left;
} */



/* .page-home .banner article p {
	color: #afb8c4;
	line-height: 1.3em;
	font-size: 1.2em;
} */

/* .page-home .banner .col-wrapper p {
	margin-top: 1em;
	padding-right: 4%;
	padding-left: 4%;
	color: #a8b1bd;
	font-size: 1.1em;
} */

/* .page-home .banner .col-wrapper a.more {
	color: #fff;
	font-size: 1em;
} */

/* .page-home .banner .col-wrapper a.more:hover {
	color: #a8b1bd;
} */

/* .page-home .banner .wrapper {
	margin-right: auto;
	margin-left: auto;
} */

/* .page-ezproduct-detail .banner .col {
	border: 1px solid #96a9b6;
	padding: .6em 1em;
}

.page-ezproduct-detail .banner .col i {
	display: inline-block;
	vertical-align: top;
	color: #96a9b6;
	font-size: 2.5em;
}

.page-ezproduct-detail .banner .col p {
	display: inline-block;
	margin: 0;
	margin-top: .5em;
	margin-bottom: .5em;
	font-size: 1.3em;
} */

@media (width >=768px) {
	.banner .overlay {
		padding-top: 2em;
		padding-bottom: 2em;
	}

	.page-blog-detail .banner h1 {
		font-size: 2.5em;
	}
}


.page-blog-detail .banner .overlay  {
	padding-top: 6em;
	padding-bottom: 5em;
}


.banner h2,
.banner h1 {
	font-size: 2.4em;
	line-height: 1em;
}

.page-blog-list .banner h1 {
	margin-bottom: .2em;
	text-align: left;
}

.page-blog-list.page-blog-category .banner h1 {
	text-align: center;
}

.page-blog-detail .banner h1 {
	font-size: 2.5em;
}

/* =========================================================
	HOME PAGE BLOCKS
========================================================= */

/* MARK: "Why Modular" section
----------------------------------------------- */
.page-home .why-modular {
	--block-spacing: 3rem;
	position: relative;
	background-image: url(/uploads/design-assets/grid.png);
	background-repeat: repeat;
	background-color: #444d54;
}

@media (width >= 960px) {
	.page-home .why-modular { --block-spacing: calc(5rem + 10px) 4.5rem; }
}

/* .page-home .why-modular .illustration {} */

@media (width >= 640px) {
	.page-home .why-modular .illustration {
		position: absolute;
		background-image: url(/uploads/design-assets/illus-modular-home.svg);
		background-position: bottom 0.5rem left 150px;
		background-size: auto 450px;
		background-repeat: no-repeat;
		width: 100%;
		height: 100%;
	}
}

@media (width >= 960px) {
	.page-home .why-modular > .illustration { display: none; }
}

/* .page-home .why-modular .container {} */

@media (width >= 640px) {
	.page-home .why-modular .container {
		display: grid;
	}
}

@media (width >= 960px) {
	.page-home .why-modular .container {
		grid-template-columns: 30% auto;
		gap: 2rem;
	}
}

.page-home .why-modular article {
	padding-block: var(--block-spacing);
	max-width: 75ch;
}


.page-home .why-modular article h2 {
	color: var(--gold);
	font-weight: 300;
	font-size: 2rem;
}

.page-home .why-modular article p {
	margin-block-start: 1rem;
	color: var(--gray-light-mid);
}

.page-home .why-modular article a.more {
	display: inline-block;
	margin-block-start: 1.5rem;
	color: #fff;
	font-size: 1rem;
}

.page-home .why-modular article a.more:hover {
	color: var(--gray-light-mid);
}

/* .page-home .why-modular .reasons {} */

@media (width < 960px) {
	.page-home .why-modular .reasons .illustration { display: none; }
}

@media (width >= 960px) {
	.page-home .why-modular .reasons .illustration {
		background-position: top 10px left 90px;
	}
}

.page-home .why-modular .reasons ul {
	--icon-size: 54px;
	display: grid;
	gap: 0.875rem;
	margin: 0;
	padding-inline: 0;
	padding-block: var(--block-spacing);
}

.page-home .why-modular .reasons ul li a {
	display: grid;
	grid-template-columns: var(--icon-size) auto;
	align-items: center;
	gap: 0.5rem;
	color: #cdb871;
}


.page-home .why-modular .reasons ul li a i {
	border: 2px solid #cdb871;
	border-radius: 50%;
	width: var(--icon-size);
	height: var(--icon-size);
	font-size: calc(var(--icon-size) - 1.5rem);
	line-height: var(--icon-size);
	text-align: center;
}

.page-home .why-modular .reasons ul li a h3 {
	/* padding-left: .5em; */
	/* color: #fff; */
	font-weight: 300;
	font-size: 1rem;
	letter-spacing: 3%;
	/* line-height: 35px; */
	text-transform: uppercase;
}

/* @media (width >= 850px) { */
	/* .page-home .why-modular .bg-illustration { */
		/* margin-inline: auto;
		background-image: url(/uploads/design-assets/illus-modular-home.svg);
		background-position: bottom right 2rem;
		background-size: auto 300px;
		background-repeat: no-repeat; */
		/* background: url(/uploads/design-assets/illus-modular-home.svg) 90% bottom no-repeat; */
		/* padding-block: 4rem; */
		/* max-width: 1200px; */
		/* min-height: 482px; */
	/* } */
/* } */




.page-home .why-modular .modular-reasons {
	/* clear: both;
	width: auto; */
}

.page-home .why-modular .modular-reasons .col {
	/* clear: both; */
}

.page-home .why-modular .modular-reasons a i,
.page-home .why-modular .modular-reasons a h3 {
	/* -webkit-transition: 0.4s all ease;
	-moz-transition: 0.4s all ease;
	-ms-transition: 0.4s all ease;
	-o-transition: 0.4s all ease;
	transition: 0.4s all ease; */
}

.page-home .why-modular .modular-reasons i {
	/* display: inline-block;
	float: left;
	margin-bottom: .4em;
	border: 2px solid #cdb871;
	border-radius: 50%;
	width: 54px;
	height: 54px;
	color: #cdb871;
	font-size: 35px;
	line-height: 54px;
	text-align: center; */
}

.page-home .why-modular .modular-reasons a:hover i {
	/* border-color: #fff;
	color: #fff; */
}

.page-home .why-modular .modular-reasons h3 {
	/* float: left;
	padding-left: .5em;
	color: #fff;
	font-weight: 300;
	font-size: .9em;
	line-height: 35px;
	text-transform: uppercase; */
}


/* .page-home .why-modular article {
		float: left;
		width: 30%;
	}


	.page-home .why-modular .modular-reasons {
		float: left;
		clear: none;
		margin-top: 1.6em;
		margin-left: 3%;
		width: 200px;
	}


	.page-home .why-modular .bg-illustration {
		background-position: 190% -27px;
	} */

/* =========================================================
	IMAGES
	Legacy unless otherwise noted
========================================================= */

img { -ms-interpolation-mode: bicubic; }/*Fixes IE scaling issues*/

img.full,
img.left,
img.right,
.content figure img {
	display: block;
	float: none;
	margin-right: 0;
	margin-bottom: 1.5em;
	margin-left: 0;
	width: 100%;
	max-width: 100%;
	height: auto;
	box-sizing: border-box;
}

.logo-proof img.full,
.modal-gallery-wrapper img.full,
.landing-gallery-wrapper img.full,
.modal-gallery img.full {
	margin-bottom: 0;
}

.content figure {
	margin-bottom: 1.5em;
}

.content figure img {
	margin-bottom: 0;
}

.content figure figcaption {
	background-color: #9DB0BD;
	padding: 1.5em;
	color: #fff;
}

img.circle {
	border-radius: 50%;
}

/* =========================================================
	LOGOS
========================================================= */

.logo-proof {
	--column-gap: 1.5rem;
	--row-gap: 1.5rem;
}

.logo-proof .logos {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	align-items: center;
	gap: var(--column-gap);
	margin-inline: auto;
	margin-block-start: 3rem
}

.logo-proof .logos picture {
	display: grid;
	flex-basis: 150px;
	place-content: center;
	width: 100%;
}

.logo-proof .logos img {
	width: 100%;
	height: auto;
}

/* =========================================================
	MODAL STYLES
========================================================= */

.npx-modal.uk-modal {
	padding: 1.5rem !important; /* overrides UIKit */
}

.npx-modal .uk-modal-dialog {
	padding: 0;
	width: 950px !important; /* overrides UIKit */
}

.npx-modal .uk-modal-dialog.video {
	top: 50% !important; /* overrides UIKit by centering modal dialog */
	transform: translateY(-50%) !important; /* overrides UIKit by centering modal dialog */
	background-color: transparent;
	width: 1024px !important;
}

.npx-modal .uk-modal-dialog .grid {
	grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); /* overrides default .grid */
}

.npx-modal .uk-modal-dialog .grid > div.flow { padding: 2rem; }

/* TODO: Delete these after full refactor is done */
.npx-modal .uk-modal-dialog .grid > div.flow :is(h2, h3, h4, p) { margin-bottom: 0; }

.npx-modal .uk-modal-dialog .grid > div.flow :is(h2, h3, h4) { color: var(--orange); }
.npx-modal .uk-modal-dialog .grid > div.flow img + :is(h2, h3, h4, p) { --flow-space: 2rem; }

.npx-modal .uk-modal-dialog .grid > div.flow h2 { font-size: var(--fs-4); }
.npx-modal .uk-modal-dialog .grid > div.flow h3 { font-size: var(--fs-2); }
.npx-modal .uk-modal-dialog .grid > div.flow :is(p, li) { font-size: var(--fs-1); }

@media (width >= 1024px) {
	.npx-modal .uk-modal-dialog .grid > div.flow h2 { font-size: var(--fs-5); }
	.npx-modal .uk-modal-dialog .grid > div.flow h3 { font-size: var(--fs-3); }
	.npx-modal .uk-modal-dialog .grid > div.flow :is(p, li) { font-size: var(--fs-2); }
}

.npx-modal .uk-modal-dialog .grid > div:last-child { background-color: var(--random-gray-5); }
.npx-modal .uk-modal-dialog .grid > div:last-child.with-padding { padding: 1rem; }



.npx-modal .uk-modal-dialog.image figure {
	margin: 0;
}

.npx-modal .uk-modal-dialog.image figcaption {
	background-color: var(--orange);
	padding: 1rem;
	color: white;
}

/* =========================================================
	NAVIGATION
========================================================= */

/* MARK: Parent container
----------------------------------------------- */
header.site-nav {
	--container-margin: 1.25rem;
	--nav-padding-top: 0.75rem;
	--nav-padding-bottom: 1.25rem;
	display: flex;
	-moz-column-gap: 1rem;
	     column-gap: 1rem;
	flex-wrap: wrap;
	justify-content: space-between;
	align-items: center;
	background-color: white;
}

@media (width < 1080px) {
	header.site-nav { width: 100%; }
}

@media (width >= 1080px) {
	header.site-nav {
		--nav-padding-top: 1.25rem;
		--nav-padding-bottom: 1.75rem;
		-moz-column-gap: 2rem;
		     column-gap: 2rem;
		flex-wrap: nowrap;
	}
}

/* MARK: Logo
----------------------------------------------- */
header.site-nav .logo {
	flex-shrink: 0;
	flex-basis: 230px;
	margin-left: var(--container-margin);
	padding-top: var(--nav-padding-top);
	padding-bottom: var(--nav-padding-bottom);
	width: 100%;
	max-width: 230px;
}

@media (width >= 1080px) {
	header.site-nav .logo { margin-left: 0; }
}

header.site-nav .logo img[data-type="animated"] { max-width: 100%; }
header.site-nav .logo img[data-type="animated"] + img[data-type="static"] { display: none; }

@media (prefers-reduced-motion) {
	header.site-nav .logo img[data-type="static"],
	header.site-nav .logo img[data-type="animated"] + img[data-type="static"] { display: block; }
	header.site-nav .logo img[data-type="animated"] { display: none; }
}

/* MARK: Harmburger button
----------------------------------------------- */
header.site-nav button {
	margin-right: var(--container-margin);
	border: 0;
	background-color: transparent;
}

@media (width >= 1080px) {
	header.site-nav button { display: none; }
}

header.site-nav button > .hamburger {
	display: grid;
	gap: 6px;
}

header.site-nav button > .hamburger div {
	transition: background-color 0.25s ease-in-out;
	border-radius: 50px;
	background-color: var(--gray);
	width: 24px;
	height: 2px;
}

header.site-nav button:hover { cursor: pointer; }

header.site-nav button:hover > .hamburger div { background-color: var(--orange); }


/* MARK: Nav @ mobile
----------------------------------------------- */
@media (width < 1080px) {
	header.site-nav nav {
		flex-basis: 100%;
		transition: all 0.5s ease-in-out;
		background-color: var(--gray);
		overflow: hidden;
	}

	header.site-nav nav:not(.is-open) { display: none; }

	header.site-nav nav > ul {
		margin: 0;
		padding: 0;
		font-size: var(--fs-1);
	}

	header.site-nav nav > ul.primary { margin-top: 1rem; }
	header.site-nav nav > ul.secondary { margin-bottom: 1rem; }

	header.site-nav nav > ul li a {
		display: block;
		background-color: transparent;
		padding-inline: var(--container-margin);
		padding-block: 0.5rem;
		color: white;
	}

	header.site-nav nav > ul li a:hover {
		background-color: white;
		color: var(--orange);
	}

	header.site-nav nav > ul li.cart a { background-color: var(--gray-mid); }
	header.site-nav nav > ul li.cart a:hover { background-color: white; }

	header.site-nav nav > ul li.cart a svg { display: none; }

	header.site-nav nav > ul li.cart a .badge-count::before { content: "("; }
	header.site-nav nav > ul li.cart a .badge-count::after { content: ")"; }
}

/* MARK: Nav @ desktop
----------------------------------------------- */
@media (width >= 1080px) {
	header.site-nav nav {
		display: grid;
		gap: 1.5rem;
		padding-top: var(--nav-padding-top);
		padding-bottom: var(--nav-padding-bottom);
	}

	header.site-nav nav > ul {
		display: flex;
		-moz-column-gap: 1.5rem;
		     column-gap: 1.5rem;
		justify-content: flex-end;
		align-items: center;
		margin: 0;
		padding: 0;
		font-size: var(--fs-0);
	}

	header.site-nav nav > ul.primary { order: 2; }

	header.site-nav nav > ul.secondary {
		order: 1;
		font-size: var(--fs--1);
	}

	header.site-nav nav > ul li a:hover { color: var(--orange); }
	header.site-nav nav > ul.primary li a { color: var(--gray); }

	header.site-nav nav > ul.primary li.store a {
		display: flex;
		align-items: center;
		gap: 0.5rem;
		transition: all .5s ease-out;
		border: 1px solid var(--orange);
		background: linear-gradient(to right, #F6F8F9 50%, white 50%);
		background-position: right bottom;
		background-size: 201% 100%;
		padding-inline: 1.25rem;
		padding-block: 0.5rem;
		color: var(--orange-600);
		font-weight: 700;
		font-size: var(--fs--1);
		font-family: var(--font-body-regular);
		letter-spacing: 6%;
		text-transform: uppercase;
	}

	header.site-nav nav > ul.primary li.store a:hover { background-position: left bottom; }

	header.site-nav nav > ul.primary li.store a::before {
		--icon-size: 20px;
		display: inline-block;
		background-image: url("/assets/images/icon-np-store.svg");
		background-position: center;
		background-size: contain;
		background-repeat: no-repeat;
		width: var(--icon-size);
		height: var(--icon-size);
		content: "";
	}

	header.site-nav nav > ul.primary li.cart a {
		display: block;
		position: relative;
	}

	header.site-nav nav > ul.primary li.cart a span:first-of-type { display: none; }

	header.site-nav nav > ul.primary li.cart a svg {
		fill: var(--orange);
		margin-block-start: 4px;
		width: 26px;
	}

	header.site-nav nav > ul.primary li.cart a span.badge-count {
		--size: 1.25rem;
		display: flex;
		position: absolute;
		top: -0.125rem;
		right: -0.5rem;
		justify-content: center;
		align-items: center;
		border: 0.05rem solid white;
		border-radius: 2rem;
		background-color: var(--gray);
		min-width: var(--size);
		height: var(--size);
		color: white;
		font-size: 0.625rem;
	}

	header.site-nav nav > ul.secondary li a { color: hsl(214.3, 15.1%, 72.7%); }
}

@media (width >= 1280px) {
	header.site-nav nav ul {
		-moz-column-gap: 2rem;
		     column-gap: 2rem;
	}
}

/* =========================================================
	NEWSBAR
========================================================= */

.newsbar {
	border-top: 1px solid #afb8c4;
	border-bottom: 1px solid #afb8c4;
	padding-block: 1.5rem;
	color: #6d747a;
	text-align: center;
}

.newsbar a.more {
	padding-left: .3em;
	color: #f58f29;
}

.newsbar a.more:hover { color: #434c54; }

/* =========================================================
	ORDER HEADER
========================================================= */

.order-header {
	display: flex;
	flex-wrap: wrap;
	row-gap: 1rem;
	-moz-column-gap: 2rem;
	     column-gap: 2rem;
	justify-content: space-between;
}

.order-header > h2 {
	border-bottom: 1px solid var(--gray-blue);
	flex-basis: 100%;
}

.order-header > ul li.has-divider {
	border-top: 1px dotted var(--gray-blue);
	margin-top: 1rem;
	padding-top: 1rem;
}

.order-header > div.address h3 { margin: 0; }

/* =========================================================
	ORDER SUMMARY
========================================================= */

.order-summary { --line-item-padding: 0.75rem; }

.order-summary :is(h3, h4) {
	--flow-space: 1rem !important;
	margin-bottom: 0;
}

/* TODO: Remove when cleaning up CSS */
.order-summary h3 { margin-top: 0; }

.order-summary :is(h4, .line-item) {
	border-bottom: 1px solid var(--gray-light);
	padding-top: var(--line-item-padding);
}

.order-summary .line-item {
	display: grid;
	grid-template-columns: 65% auto;
	gap: 1rem;
	padding-bottom: var(--line-item-padding);
}

.order-summary .line-item:first-of-type { margin-block-start: 0; }
.order-summary .line-item > div:last-child { text-align: right; }
.order-summary .subtotal-item { text-align: right; }
.order-summary .subtotal-item + .subtotal-item { margin-block-start: 0.25rem; }
.order-summary .subtotal-item.shipping { padding-top: var(--line-item-padding); }

.order-summary .subtotal-item.grand-total {
	color: var(--orange);
	font-weight: 400;
	display: flex;
	gap: 1rem;
	align-items: center;
	justify-content: space-between;
	margin-top: 1rem;
	margin-bottom: 2rem;
}

.order-summary .subtotal-item.grand-total > span {
	font-size: var(--fs-0);
	color: var(--gray-mid);
	text-transform: uppercase;
	padding: 0.25rem 0.5rem;
	border: 1px solid var(--gray-mid);
	display: block;
}

.order-summary .edit {
	font-style: italic;
	font-size: var(--fs--1);
	text-align: center;
}

.order-summary .edit a {
	color: var(--green);
	text-transform: uppercase;
	font-style: normal;
	margin-left: 1rem;
}

/* =========================================================
	PAGINATION
========================================================= */

/* MARK: Container/wrapper
----------------------------------------------- */
.pagination {
	display: grid;
	gap: 0.5rem;
	margin-block-start: 2rem;
	color: #6c737a;
}

@container blogListing (width >= 430px) {
	.pagination {
		display: flex;
		align-items: baseline;
	}
}

/* MARK: Heading
----------------------------------------------- */
.pagination h2 {
	font-weight: 300;
	font-size: 1rem;
}

/* MARK: Nav
----------------------------------------------- */
.pagination nav {
	display: flex;
	gap: 0.25rem;
}

.pagination nav > * {
	padding-inline: 0.5rem;
	min-width: 1rem;
	text-align: center;
}

.pagination nav a {
	background-color: #f5f7f9;
	color: #6c737a;
}

.pagination nav span {
	background-color: #434c54;
	color: white;
}

/* =========================================================
	PRODUCTS/SERVICES GRID
========================================================= */

/* MARK: Products & services outer & heading
----------------------------------------------- */
.products-services {
	background-color: #f6f8f9;
	padding-block: 2.5rem;
}

.products-services h2 {
	font-weight: 300;
	font-size: 2.3em;
	line-height: 1em;
	text-align: center;
}

/* MARK: Products & services grid
----------------------------------------------- */
.products-services .products-services-grid {
	display: flex;
	-moz-column-gap: 3rem;
	     column-gap: 3rem;
	row-gap: 4.5rem;
	flex-wrap: wrap;
	justify-content: center;
	margin-block-start: 2.5rem;
}

.products-services .products-services-grid > div {
	display: flex;
	row-gap: 1rem;
	flex-basis: 225px;
	flex-direction: column;
	min-height: 100%;
}

.products-services .products-services-grid > div a:first-child {
	flex-grow: 1;
}

.products-services .products-services-grid > div a.button {
	align-items: flex-end;
}

.products-services .products-services-grid img {
	margin-inline: auto;
	max-width: 130px;
}

.products-services .products-services-grid h3 {
	margin-block-start: 2rem;
	color: var(--gray-mid);
	text-align: center;
}

/* =========================================================
	PRODUCT COLORS
	Legacy unless otherwise noted
========================================================= */

a.product-color-green {
	border-color: #00BD7E;
	background-color: #00BD7E;
}

.page-why-modular section.product-color-green,
.product-color-green .modal-product-wrapper img.product-illus,
.product-color-green .modal-product-wrapper .modal-action {
	background-color: #00BD7E;
}


.page-product-detail.product-color-green .banner {
	background-color: #EFF2F4;
}

/* .page-product-detail.product-color-green .banner .overlay, */
.product-color-green .modal-box .product-img a.play-video {
      	background-color: rgba(0, 189, 126, 0.89);
}

.page-why-modular .content section.product-color-green article h3 i,
.page-why-modular .content section.product-color-green article h2 i,
.product-color-green .feature-section .feature-detail ul li:before,
.product-color-green .modal-product-wrapper .modal-action a.button,
.product-color-green .feature-section .feature-detail h2 {
	color: #00BD7E;
}

a.product-color-red {
	border-color: #e9726c;
	background-color: #e9726c;
}


.page-why-modular section.product-color-red,
.product-color-red .modal-product-wrapper img.product-illus,
.product-color-red .modal-product-wrapper .modal-action {
	background-color: #e9726c;
}

.page-product-detail.product-color-red .banner {
	background-color: #EFF2F4;
}

/* .page-product-detail.product-color-red .banner .overlay, */
.product-color-red .modal-box .product-img a.play-video {
	background-color: rgba(233, 113, 107, 0.89);
}

.page-why-modular .content section.product-color-red article h3 i,
.page-why-modular .content section.product-color-red article h2 i,
.product-color-red .feature-section .feature-detail ul li:before,
.product-color-red .modal-product-wrapper .modal-action a.button,
.product-color-red .feature-section .feature-detail h2 {
	color: #e9726c;
}

a.product-color-blue {
	border-color: #6bbbdc;
	background-color: #6bbbdc;
}


.product-color-blue .modal-product-wrapper img.product-illus,
.page-why-modular section.product-color-blue,
.product-color-blue .modal-product-wrapper .modal-action {
	background-color: #6bbbdc;
}

.page-product-detail.product-color-blue .banner {
	background-color: #EFF2F4;
}


/* .page-product-detail.product-color-blue .banner .overlay, */
.product-color-blue .modal-box .product-img a.play-video {
	background-color: rgba(107, 186, 220, 0.89);
}

.page-why-modular .content section.product-color-blue article h3 i,
.page-why-modular .content section.product-color-blue article h2 i,
.product-color-blue .feature-section .feature-detail ul li:before,
.product-color-blue .modal-product-wrapper .modal-action a.button,
.product-color-blue .feature-section .feature-detail h2 {
	color: #6bbbdc;
}

a.product-color-purple {
	border-color: #9175d6;
	background-color: #9175d6;
}

.page-why-modular section.product-color-purple,
.product-color-purple .modal-product-wrapper img.product-illus,
.product-color-purple .modal-product-wrapper .modal-action {
	background-color: #9175d6;
}

.page-product-detail.product-color-purple .banner {
	background-color: #EFF2F4;
}


/* .page-product-detail.product-color-purple .banner .overlay, */
.product-color-purple .modal-box .product-img a.play-video {
	background-color: rgba(145, 117, 214, 0.89);
}

.page-why-modular .content section.product-color-purple article h3 i,
.page-why-modular .content section.product-color-purple article h2 i,
.product-color-purple .feature-section .feature-detail ul li:before,
.product-color-purple .modal-product-wrapper .modal-action a.button,
.product-color-purple .feature-section .feature-detail h2 {
	color: #9175d6;
}

a.product-color-yellow {
	border-color: var(--gold);
	background-color: var(--gold);
}

.page-why-modular section.product-color-yellow,
.product-color-yellow .modal-product-wrapper img.product-illus,
.product-color-yellow .modal-product-wrapper .modal-action {
	background-color: var(--gold);
}

.page-product-detail.product-color-yellow .banner {
	background-color: #EFF2F4;
}

/* .page-product-detail.product-color-yellow .banner .overlay, */
.product-color-yellow .modal-box .product-img a.play-video {
	background-color: rgba(212, 191, 112, 0.89);
}

.page-why-modular .content section.product-color-yellow article h3 i,
.page-why-modular .content section.product-color-yellow article h2 i,
.product-color-yellow .feature-section .feature-detail ul li:before,
.product-color-yellow .modal-product-wrapper .modal-action a.button,
.product-color-yellow .feature-section .feature-detail h2 {
	color: var(--gold);
}

a.product-color-orange {
	border-color: #f6902a;
	background-color: #f6902a;
}

/* .page-why-modular section.product-color-orange, */
.product-color-orange .modal-product-wrapper img.product-illus {
	background-color: #f6902a;
}

.page-product-detail.product-color-orange .banner {
	background-color: #EFF2F4;
}

/* .page-product-detail.product-color-orange .banner .overlay {
	background-color: rgba(246, 144, 41, 0.89);
} */

.page-why-modular .content section.product-color-orange article h3 i,
.page-why-modular .content section.product-color-orange article h2 i,
.product-color-orange .feature-section .feature-detail ul li:before,
.product-color-orange .feature-section .feature-detail h2 {
	color: #f6902a;
}

img.product-illus {
	max-width: 180px;
}

.page-why-modular section.product-color-navy {
	background-color: #444D54;
}

.page-why-modular .content section.product-color-navy article h3 i,
.page-why-modular .content section.product-color-navy article h2 i {
	color: #444D54;
}

/* =========================================================
	PRODUCT DETAILS
	Contains the styles for the various blocks or
	components in the Product detail entry.
========================================================= */

/* MARK: Product options
----------------------------------------------- */
.product-options > h2 {
	margin-block: 0;
	background-color: var(--gray);
	padding: 2rem;
	color: white;
	font-weight: 300;
	font-size: var(--fs-4);
	line-height: 1.1;
	text-align: center;
}

@media (width >= 768px) {
	.product-options > h2 { font-size: var(--fs-6); }
}

.product-options .sidebar-layout > .options form { margin-block: 0; }
.product-options .sidebar-layout > .order-details { padding: 2rem; }

@media (width >= 768px) {
	.product-options .sidebar-layout > .order-details {
		position: sticky;
		top: 0;
		align-self: start;
		padding-inline-start: 0;
	}
}

@media (width >= 1280px) {
	.product-options .sidebar-layout > .order-details { padding-inline-end: 3rem; }
}

.product-options .sidebar-layout > .order-details > div {
	margin-inline-end: auto;
	max-width: 520px;
}

.product-options .sidebar-layout > .order-details > div img.full {
	margin-inline: auto;
	max-width: 150px;
}

.product-options .sidebar-layout > .order-details > div h2 {
	color: var(--gray);
	font-weight: normal;
	font-size: var(--fs-3);
	text-align: center;
}

.product-options .sidebar-layout > .order-details > div h3 {
	margin-bottom: 2rem;
	color: var(--gray-blue);
	font-weight: 400;
	font-size: 1rem;
	line-height: 1.3;
	text-align: center;
	text-transform: uppercase;
}

.product-options .sidebar-layout > .order-details > div h3 .wall-number {
	display: inline-block;
	border: 1px solid var(--random-gray-1);
	border-radius: 50%;
	aspect-ratio: 1;
	width: 1.5rem;
}

.product-options .sidebar-layout > .order-details > div .total {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 2rem;
}

.product-options .sidebar-layout > .order-details > div .billing-instructions {
	margin-top: 3rem;
	text-align: center;
}

.product-options .sidebar-layout > .order-details > div .billing-instructions i {
	color: var(--green);
	font-size: var(--fs-6);
}

.product-options .sidebar-layout > .order-details > div .billing-instructions a[href^=tel],
.product-options .sidebar-layout > .order-details > div .billing-instructions .contact { color: var(--green); }
.product-options .sidebar-layout > .order-details > div .billing-instructions p { margin-top: 0.5rem; }
.product-options .sidebar-layout > .order-details > div .billing-instructions p em { color: var(--gray-mid); }

/* MARK: Tech details
----------------------------------------------- */
.tech-details {
	background-color: var(--random-gray-2);
	padding-block: 2rem;
}

@media (width >= 1024px) {
	.tech-details { padding-block: 4rem; }
}

.tech-details .grid { gap: 2.5rem; }

@media (width >= 768px) {
	.tech-details .grid { -moz-column-gap: 3rem; column-gap: 3rem; }
}

.tech-details h3 {
	margin-block: 0;
	border-bottom: 1px solid var(--gray-light);
	padding-bottom: 0.5rem;
	color: var(--gray-blue);
	font-weight: 300;
	font-size: var(--fs-3);
}

.tech-details table tr {
	border-bottom: 1px solid var(--gray-light);
	line-height: 1.2;
}

.tech-details table :is(th, td) {
	border: 0;
	padding: 0.5rem 0.75rem;
	text-align: left;
}

.tech-details table th { font-weight: 500; }

.tech-details ul {
	display: grid;
	gap: 1rem;
	margin-inline: 0;
	padding-inline: 0;
}

.tech-details ul li {
	position: relative;
	padding-left: 1.5rem;
	line-height: 1.3;
}

.tech-details ul:is(.checkmark-ok, .checkmark-notok) li::before {
	position: absolute;
	left: 0;
	content: "\e959";
	color: var(--green);
	font-family: var(--font-icon);
}

.tech-details ul.checkmark-notok li::before {
	content: "\e95a";
	color: var(--red);
}

.tech-details ul + h3 { margin-top: 3rem; }

.tech-details .contact-instructions {
	display: flex;
	align-items: center;
	gap: 0.375rem;
	margin-top: 2rem;
	margin-bottom: 0;
	color: var(--gray);
	font-size: var(--fs-1);
}

.tech-details .contact-instructions i {
	color: var(--random-gray-3);
	font-size: var(--fs-3);
}

/* MARK: Product detail page(s)
	code by previous dev
----------------------------------------------- */
/* .page-product-detail .banner {
	position: relative;
	background-size: cover;
	min-height: 350px;
} */

/* .page-product-detail .banner .overlay {
	width: 90%;
	display: inline-block;
	height: 91%;
	position: absolute;
	padding-left: 5%;
	padding-right: 5%;
} */

/* .page-product-detail .banner .overlay img.product-illus,
.page-search-results img.product-illus {
	max-width: 80px;
} */

/* .page-search-results img.product-illus {
	float: left;
	margin-right: 1em;
} */

/* .page-product-detail .banner .overlay article,
.page-search-results .results.result-product article {
	overflow: hidden;
} */

/* .page-product-detail .banner h1 {
	text-align: left;
	margin-bottom: .1em;
} */

/* .page-product-detail .banner p {
	margin-top: .5em;
	margin-bottom: .5em;
	color: rgba(255, 255, 255, 0.70);
} */

.action-bar {
	background-color: #444d54;
	padding-top: 1.5em;
	padding-bottom: .8em;
	text-align: center;
}

.modal-gallery-wrapper a img,
.landing-gallery-wrapper a.modal img,
.landing-gallery-wrapper a.modal i {
	transition: 0.4s all ease;
}

.modal-gallery-wrapper a img:hover,
.landing-gallery-wrapper a.modal img:hover,
.landing-gallery-wrapper a.modal i:hover {
	opacity: .8;
}

.page-resources-list .action-bar {
	margin-bottom: 1.5em;
	background-color: #f6f8f9;
	padding-top: 0;
	padding-bottom: 0;
	text-align: center;
}

.page-resources-list .action-bar button {
	border-radius: 0px;
	-webkit-appearance: none;
	margin-right: .5em;
	margin-left: .5em;
	border: none;
	background-color: transparent;
	padding-top: 1em;
	padding-right: .8em;
	padding-bottom: .8em;
	padding-left: .8em;
	color: #6d747a;
	font-weight: 300;
	font-family: "source_sans_prolight", "Helvetica Neue", Arial, Helvetica, Geneva, sans-serif;
}

.page-resources-list .action-bar button:hover {
	background-color: #e6ebee;
}

.page-resources-list .action-bar button.is-checked {
	background-color: #fff;
}

.action-bar a.button.alt {
	margin-right: .2em;
	margin-left: .2em;
	padding-top: .7em;
	padding-right: 1em;
	padding-bottom: .7em;
	padding-left: 1em;
}

.action-bar a.button.alt.stores {
	border-color: #f58f29;
	background-color: #f58f29;
	color: #fff;
}



.action-bar a.button.icon i {
	top: 0px;
	margin-right: 0;
	color: #6d747a;
}



.action-bar a.button.stores.icon i {
	color: rgba(255, 255, 255, 0.52);
}

.action-bar a.button.alt:hover {
	border-color: #fff;
	color: #fff;
}

.action-bar a.button.action:hover {
	background-color: #fff;
	color: #f6902a;
}

.modal-gallery-wrapper h2,
.page-product-detail .page-store-list h2 {
	margin-top: 0;
	margin-bottom: 1.5em;
	color: #444d54;
	font-weight: 300;
	font-size: 2em;
	text-align: center;
}

.modal-product-wrapper img.product-illus {
	border-radius: 50%;
	padding: .5em;
	width: 130px;
	max-width: 130px;
	height: 130px;
	transition: 0.4s all ease;
	color: #fff;
	text-align: center;
}

.modal-product-wrapper img.product-illus {
	position: relative;
	top: -.7em;
	float: left;
	margin-right: .5em;
	margin-bottom: 0;
	padding: .1em;
	width: 50px;
	max-width: 50px;
	height: 50px;
}



.modal-gallery-wrapper h2 {
	margin-top: 1em;
	margin-bottom: 1em;
}



.page-product-detail blockquote,
.page-store-detail blockquote {
	clear: both;
	margin: 0;
	margin-bottom: 2em;
	background-color: #9db0bd;
	padding: 2em;
	text-align: center;
}

.page-sub-product-detail blockquote {
	margin-bottom: 0;
}

.page-store-detail blockquote {
	margin-bottom: 0;
}

.page-product-detail blockquote p,
.page-store-detail blockquote p {
	display: inline-block;
	position: relative;
	max-width: 900px;
	color: #fff;
	font-size: 1.4em;
	line-height: 1.4em;
}

.page-product-detail blockquote p:before,
.page-product-detail blockquote p:after,
.page-store-detail blockquote p:before,
.page-store-detail blockquote p:after {
	position: absolute;
	content: '“';
	color: rgba(255, 255, 255, 0.27);
	font-size: 2.8em;
}

.page-product-detail blockquote p:before,
.page-store-detail blockquote p:before {
	top: .1em;
	left: -.4em;
}

.page-product-detail blockquote p:after,
.page-store-detail blockquote p:after {
	top: .1em;
	right: -.4em;
	content: '”';
}

.page-product-detail blockquote cite,
.page-store-detail blockquote cite {
	display: block;
	clear: both;
	color: rgba(255, 255, 255, 0.61);
	font-style: normal;
	font-weight: normal;
	font-family: "source_sans_prolight_italic", "Helvetica Neue", Arial, Helvetica, Geneva, sans-serif;
}


.page-ezproduct-detail .feature-section .feature-detail ul li:before {
	margin-right: .4em;
	margin-left: -1.4em;
	content: '\e959';
	font-size: 1em;
}


.page-ezproduct-detail .feature-section .feature-detail ul ul li:before {
	margin-right: .4em;
	margin-left: -1.4em;
	content: '• ';
	font-size: 1em;
}



.page-store-detail .design-options .col h3,
.page-ezproduct-detail .design-options .col h3 {
	margin-top: .3em;
	margin-bottom: .3em;
	font-size: 1.4em;
	text-align: left;
}


.page-store-detail .design-options .wrapper {
	padding-top: 2em;
}

.product-store-wrapper {
	padding-right: 4%;
	padding-left: 4%;
}

.page-ezproduct-detail .design-options .wrapper {
	padding-top: 3em;
}

.page-ezproduct-detail .design-options .col2 {
	margin-right: auto;
	margin-bottom: 2em;
	margin-left: auto;
	max-width: 860px;
}

.page-ezproduct-detail .design-options .col2 .col i {
	display: inline-block;
	border-radius: 50%;
	background-color: #00b67e;
	width: 130px;
	height: 130px;
	color: #fff;
	font-size: 60px;
	line-height: 130px;
	text-align: center;
}

.page-ezproduct-detail .design-options .col2 .col article {
	overflow: hidden;
}

.page-ezproduct-detail .design-options.alt-layout .col2 .col article h4 {
	margin-top: .5em;
	margin-bottom: 0;
	color: #fff;
	font-style: normal;
	font-weight: normal;
	font-size: 2em;
}

.page-ezproduct-detail .design-options .col2 .col article p {
	margin-top: .3em;
	color: #a8b1bd;
	font-size: 1.3em;
}

.page-ezproduct-detail .design-options .col4 i {
	display: inline-block;
	color: #96a9b6;
	font-size: 60px;
	text-align: center;
}

.page-ezproduct-detail .design-options.alt-layout .col4 article h4 {
	margin-top: .5em;
	margin-bottom: 0;
	color: #fff;
	font-style: normal;
	font-weight: normal;
	font-size: 1.5em;
}

.page-ezproduct-detail .design-options .col4 article p {
	margin-top: .3em;
	color: #a8b1bd;
	font-size: 1.1em;
	line-height: 1.1em;
}

/* =========================================================
	PRODUCT GRID
========================================================= */

/* MARK: Grid block/container
----------------------------------------------- */
.product-grid-block {
	background-color: #f6f8f9;
	padding-block: 3rem 6rem;
}

.product-grid-block h2 {
	margin-block: 0 1.5rem;
	color: var(--gray-dark);
	font-weight: 300;
	font-size: 2rem;
	text-align: center;
}

/* MARK: Grid
----------------------------------------------- */
.product-grid {
	display: flex;
	-moz-column-gap: 8rem;
	     column-gap: 8rem;
	row-gap: 3rem;
	flex-wrap: wrap;
	justify-content: center;
	margin-inline: auto;
}

.product-grid article {
	flex-basis: 200px;
	max-width: 200px;
	text-align: center;
}

.product-grid article img {
	--img-bg-color: var(--orange);
	transition: 0.4s var(--transition-specs);
	margin-inline: auto;
	border-radius: 50%;
	background-color: var(--img-bg-color);
	padding: .5rem;
	width: 130px;
	height: 130px;
	color: white;
}

.product-grid article img.product-color-green { --img-bg-color: var(--green); }
.product-grid article img.product-color-red { --img-bg-color: var(--red); }
.product-grid article img.product-color-blue { --img-bg-color: var(--blue); }
.product-grid article img.product-color-purple { --img-bg-color: var(--purple); }
.product-grid article img.product-color-yellow { --img-bg-color: var(--gold); }

.product-grid article h3 {
	color: var(--gray-dark);
	font-weight: 300;
	font-size: 1.2rem;
}

@media (width >= 768px) {
	.product-grid article h3 {
		font-size: 1.4rem;
	}
}

.product-grid span.more {
	transition: 0.4s var(--transition-specs);
	color: var(--orange);
}


/* Article link hover */
.product-grid article a:hover img {
	background-color: var(--gray-dark);
}

.product-grid article a:hover span.more {
	color: var(--gray-dark);
}

/* =========================================================
	PRODUCT LINE ITEMS
	Shows up on product detail pages and cart.
========================================================= */

ul.product-line-items {
	border-bottom: 1px solid var(--gray-light--1);
	padding-bottom: 1rem;
	padding-inline: 0;
}

ul.product-line-items li {
	--inline-spacing: 0.25rem;
	display: flex;
	position: relative;
	align-items: baseline;
	color: var(--gray-mid);
	margin-bottom: 0.5rem;
}

ul.product-line-items li .dotted-bg {
	position: absolute;
	top: 1.1rem;
	left: 0;
	border-top: dotted 1px var(--gray-blue);
	width: 100%;
	z-index: var(--z-below);
}

ul.product-line-items li i {
	position: relative;
	top: 1px;
	background-color: white;
	color: var(--random-gray-4);
	padding-right: var(--inline-spacing);
}

ul.product-line-items li span.price {
	background-color: white;
	margin-left: auto;
	order: 4;
	padding-left: var(--inline-spacing);
}

ul.product-line-items li span.price::before {
	position: relative;
	top: -0.25rem;
	content: "$";
	font-size: var(--fs--2);
}

ul.product-line-items li span.option-title {
	background-color: white;
	padding-inline: var(--inline-spacing);
}

.t-cart ul.product-line-items,
.t-checkout ul.product-line-items {
	border: 0;
	padding-bottom: 0;
}

/* =========================================================
	PRODUCTS
	Legacy / from previous dev
========================================================= */


.newsbar .tag,
.results h2 .tag {
	display: inline-block;
	vertical-align: middle;
	margin-right: .5em;
	border: 1px solid #e3e8ec;
	padding: .3em .5em;
	color: #afb8c4;
	font-weight: 500;
	font-size: .8em;
	line-height: 1em;
	text-transform: uppercase;
}

.results h2 .tag {
	border-color: #444D54;
	color: #444D54;
	font-size: .4em;
}

.logo-proof h3 {
	margin-top: 1.8em;
	color: #afb8c4;
	font-weight: 300;
	font-size: 1.5em;
	line-height: 1em;
	text-align: center;
}

/* =========================================================
	PROSE COMPONENT
	For use with Redactor or CKEditor fields.
========================================================= */

/* MARK: Base styles
----------------------------------------------- */
.prose {
	margin-block-start: var(--flow-space, 1rem);
}

/* MARK: Store landing page
----------------------------------------------- */
.t-storeLandingPage .prose {
	color: var(--orange);
	text-align: center;
}

.t-storeLandingPage .prose h2 {
	font-size: var(--fs-5);
	margin-block: 0;
	line-height: 1;
	font-weight: 300;
	font-style: normal;
}

/* MARK: Product additional description
----------------------------------------------- */
.prose.additional-description {
	border-top: 1px solid var(--gray-light);
	margin-block-start: 2rem;
	padding-block-start: 2rem;
}

.prose.additional-description p:first-child { margin-block-start: 0; }
.prose.additional-description p { margin-block-end: 0; }

/* MARK: Payment terms
----------------------------------------------- */
.prose.payment-terms {
	font-size: var(--fs--1);
}

/* =========================================================
	RESOURCES
========================================================= */

.t-resources .container:is(.sidebar-layout, .single-col) {
	margin-block: 2rem;
}

.t-resources .container.narrow-center > div {
	max-width: 824px;
}

/* MARK: Content
----------------------------------------------- */
.t-resources h1 {
	color: var(--gray-dark);
	font-weight: 300;
	font-size: 2.3rem;
}

.t-resources h1::before {
	margin-inline-end: 0.25rem;
	content: "\e6d8";
	color: var(--orange);
	font-size: 80%;
	font-family: LinearIcons;
}

.t-resources h1[data-type="brochures"]::before { content: "\e714"; }
.t-resources h1[data-type="documents"]::before { content: "\e6d8"; }
.t-resources h1[data-type="manuals"]::before { content: "\e712"; }
.t-resources h1[data-type="presentations"]::before { content: "\e6f6"; }
.t-resources h1[data-type="stores"]::before { content: "\e74d"; }
.t-resources h1[data-type="videos"]::before { content: "\e96a"; }

.t-resources :is(.resource-content, .video-container) {
	margin-block-start: 1.25rem;
}

.t-resources .resource-content-grid {
	display: grid;
	gap: 1.5rem;
}

@media (width >= 768px) {
	.t-resources .resource-content-grid { display: flex; }

	.t-resources .resource-content-grid figure {
		order: 2;
		margin: 0;
		min-width: 240px;
	}

	.t-resources .resource-content-grid div { order: 1; }
}

.t-resources .resource-content h3 {
	color: var(--gray-light-mid);
	font-weight: 300;
	font-size: 1.3rem;
	line-height: 1.5;
	letter-spacing: 12%;
	text-transform: uppercase;
}

.t-resources .resource-content * + h3 {
	margin-block-start: 1.3rem;
}

.t-resources .resource-content * + p { margin-block-start: 1.5rem; }

.t-resources .resource-content ul {
	display: grid;
	gap: 1rem;
	padding: 0;
	list-style: none;
}

.t-resources .resource-content ul li::before {
	margin-inline-end: 0.5rem;
	content: "\e934";
	color: var(--orange);
	font-size: 10px;
	font-family: Linearicons;
	/* left: -1.8em; */
	/* position: absolute; */
}

/* MARK: Sidebar
----------------------------------------------- */
.t-resources .sidebar-layout aside {
	background-color: #eff2f4;
	padding: 2rem;
}

/* =========================================================
	RESOURCES FILTERS COMPONENT / BLOCK
========================================================= */

.resources-filters {
	background-color: var(--gray-extra-light);
}

.resources-filters > .container {
	display: flex;
	align-items: baseline;
	justify-content: center;
	-moz-column-gap: 1.5rem;
	     column-gap: 1.5rem;
	flex-wrap: wrap;
}

.resources-filters .option {
	max-width: -moz-fit-content;
	max-width: fit-content;
	padding: 1rem;
	display: flex;
	-moz-column-gap: 0.25rem;
	     column-gap: 0.25rem;
	color: var(--gray-mid);
	font-weight: 400;
}

.resources-filters .option::before { font-family: var(--font-icon); }

.resources-filters .option:hover {
	cursor: pointer;
	background-color: var(--gray-light-mid);
	color: black;
}

.resources-filters .option:has(input:checked) {
	background-color: white;
}

/* Icons */
.resources-filters .option.show-all::before { content: "\e880"; }
.resources-filters .option.brochures::before { content: "\e714"; }
.resources-filters .option.videos::before { content: "\e96a"; }
.resources-filters .option.presentations::before { content: "\e6f6"; }
.resources-filters .option.documents::before { content: "\e6d8"; }
.resources-filters .option.manuals::before { content: "\e712"; }
.resources-filters .option.stores::before { content: "\e74d"; }
.resources-filters .option.photo-gallery::before { content: "\e70e"; }

/* =========================================================
	SEARCH & SEARCH RESULTS
========================================================= */

article.search-result {
	margin-block-end: 1rem;
	border-bottom: 1px solid #d9d9d9;
	padding-block: 1rem;
}

article.search-result h2 {
	margin-block: 0;
	color: var(--gray-dark);
	text-wrap: unset;
}

article.search-result p {
	color: var(--gray-light-mid);
}

/* =========================================================
	STORE
	Legacy / from previous dev
========================================================= */




/* .page-store-detail .tech-details {
	background-color: #f2f4f5;
	padding-top: 2em;
} */

.page-store-detail .store-gallery h1 {
	margin-bottom: .2em;
	font-weight: 300;
	font-size: 1.9em;
	line-height: 1em;
}

.page-store-detail .store-gallery h2 {
	margin-block: 0 1.5rem;
	color: #abb4c0;
	font-weight: 400;
	font-size: 1.2rem;
	line-height: 1.5;
	text-align: left;
	text-transform: uppercase;
}

.page-store-detail .store-gallery h2 .wall-number {
	display: inline-block;
	border: 1px solid #abb3c7;
	border-radius: 50px;
	padding-inline: 0.75rem;
	color: #abb4c0;
	/* width: 1em;
	padding-left: .15em;
	padding-right: .15em;
	border-radius: 50%;
	text-align: center; */
}

.page-store-detail .store-gallery h2 span {
	margin-right: .1em;
	margin-left: .1em;
	color: #dce0e5;
	font-weight: 100;
}

.page-store-detail .store-gallery,
.page-store-detail .store-info {
	margin-bottom: 2em;
}


.page-store-detail .col7-gallery {
	text-align: center;
}

.page-store-detail .col7-gallery .col {
	vertical-align: middle;
	margin-right: 1%;
	margin-bottom: 0;
	margin-left: 1%;
	width: 11%;
}

.page-store-detail p.gallery-zoom {
	margin-top: .5em;
	margin-bottom: .5em;
	text-align: center;
}

.page-store-detail p.gallery-zoom i {
	color: #abb4c0;
}

.page-store-detail .action-buy {
	margin-bottom: 2rem;
	background-color: #ebeef0;
	padding: 8%;
}

.page-store-detail .action-buy h2 {
	display: inline-block;
	margin-block: 0;
	border-left: 5px solid #d3dae0;
	background-color: white;
	padding: 1.25rem;
	color: var(--orange);
	font-weight: 300;
	font-size: 2.5rem;
}

.page-store-detail .action-buy h2:before {
	position: relative;
	top: -.1em;
	vertical-align: top;
	margin-right: .1em;
	content: '$';
	font-size: .7em;
}

.page-store-detail .action-buy p {
	color: #99acb9;
	font-size: .9em;
	line-height: 1.2em;
}

.page-store-detail .action-buy a.button {
	display: block;
	margin-bottom: 0;
}

.page-store-detail .store-info p.contact-instructions {
	/* margin-top: .5em; */
	font-size: 1.1rem;
}

.page-store-detail .store-info p.contact-instructions + p.contact-instructions {
	margin-block-start: 1.5rem;
}

.page-store-detail .store-info p.contact-instructions a {
	color: #f58f29;
}

.page-store-detail .store-info p.contact-instructions a:hover {
	color: #d3dae0;
}

.page-store-detail .store-info p.contact-instructions a[href^=tel] {
	color: #f58f29;
}


.page-store-detail .store-info p.contact-instructions span {
	display: block;
	overflow: hidden;
	color: #434c54;
}


.page-store-detail .store-info p.contact-instructions i {
	position: relative;
	float: left;
	margin-right: .2em;
	color: #bbc1c8;
	font-size: 1.3em;
}

tonyd-temp {
	color: #f58f29;
	font-size: 1.35em;
}

.page-store-list .sidebar {
	margin-top: 2em;
	background-color: #f5f8f9;
}

.page-store-list .sidebar h3,
.page-store-list .sidebar .button-group,
.page-store-list .sidebar ul {
	padding-right: 10%;
	padding-left: 10%;
}

.page-store-list .sidebar a.button.modal {
	display: block;
	margin-top: 1em;
	margin-right: 1em;
	margin-left: 1em;
	padding-right: 7%;
	padding-left: 7%;
	width: auto;
}

.page-store-list .sidebar a.button.modal i {
	opacity: .6;
	margin-right: .3em;
}

.page-store-list .sidebar ul {
	color: #9ca7b5;
	list-style-type: none;
}

.page-store-list .sidebar ul li {
	padding-top: .4em;
	padding-bottom: .4em;
	line-height: 1em;
}

.page-store-list .sidebar ul li i {
	position: relative;
	top: -2px;
	float: left;
	margin-right: .5em;
	color: #6d747a;
	font-size: 1.2em;
}

.page-store-list .sidebar ul li span {
	overflow: hidden;
}

.page-store-list .content .item .img-height {
	display: block;
	position: relative;
	padding: 76.25% 0 0 0;
	width: 100%;
	height: 0;
	overflow: hidden;
}

.page-store-list .content .item .img-height img {
	display: block;
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	margin: auto;
	max-width: 100%;
}

.page-store-list .content .item ul {
	margin: 0;
	margin-top: .8em;
	margin-bottom: 1em;
	padding: 0;
	min-height: 29px;
	text-align: center;
}

.page-store-list .content .item li:before {
	content: '';
}

.page-store-list .content .item li {
	display: inline-block;
	margin-bottom: 0;
	border-radius: 50%;
	background-color: #abb4c0;
	width: 25px;
	height: 25px;
	color: #fff;
	line-height: 29px;
}

.page-store-list .content .item li i {
	color: #fff;
}

.page-store-order .contact h2 {
	margin-bottom: 0;
	color: #444d54;
	font-weight: 100;
}

.page-store-order .contact h2 .counter {
	display: inline-block;
	margin-right: .5em;
	border-radius: 50%;
	background-color: #abb4c0;
	width: 32px;
	height: 32px;
	color: #fff;
	line-height: 32px;
}

.page-store-order .contact .copy_address_spacer {
	margin-top: .5em;
	margin-bottom: .5em;
	height: 25px;
	color: #6d747a;
	font-family: "source_sans_prolight_italic", "Helvetica Neue", Arial, Helvetica, Geneva, sans-serif;
}

.page-store-order .contact #copy_address {
	cursor: pointer;
}

.page-store-order .contact #copy_address:hover {
	color: #f58f29;
}

.page-store-order .contact #copy_address i {
	color: #f58f29;
}

.page-store-order .contact .col2 .form-item.submit {
	margin-top: -2em;
}

.store-option-item {
	clear: both;
	margin-bottom: 1.5rem;
	border-bottom: 1px solid #dfe4e8;
	padding-bottom: 1rem;
}

@media (width < 560px) {
	.store-option-item i { display: none; }
}

.store-option-item a.button i {
	display: inline;
	position: relative;
	top: 0;
	border: none;
	padding: 0;
	font-size: .9em;
}

form.infield .store-option-item h3 {
	margin-bottom: .5em;
	font-weight: 300;
	font-size: 1.4em;
}

.store-option-item p {
	margin-top: 0;
	margin-bottom: .5em;
	color: #889099;
	font-size: .95em;
	line-height: 1.3em;
}

.store-option-item p.shipping-message {
	display: inline-block;
	margin-top: 1em;
	border: 1px solid #c5ced6;
	background-color: #fff;
	padding: .6em;
	color: #313b44;
	font-style: italic;
}

.store-option-item p.shipping-message:before {
	margin-right: .5em;
	content: '\e688';
	color: #F6902A;
	font-family: LinearIcons;
}

.store-option-action {
	float: right;
	margin-bottom: .5em;
	margin-left: 1em;
	background-color: #fff;
	width: 140px;
	text-align: center;
}

.store-option-action h4 {
	margin-top: 1em;
	margin-bottom: 1em;
	font-weight: 400;
	font-size: 1.6em;
}

.store-option-action h4.each,
.store-option-action h4.select {
	margin-top: .5em;
	margin-bottom: .5em;
}

.store-option-action h4.price:before,
/* .order-details span.price:before, */
/* .line-item-details span.price:before, */
.order-details .total .amount:before {
	position: relative;
	top: -.4em;
	content: '$';
	font-size: .6em;
}

.store-option-action h4.percent:after {
	position: relative;
	top: -.4em;
	content: '%';
	font-size: .6em;
}

.store-option-action h4.each:after {
	content: '/ea';
	font-size: .7em;
}

.store-option-item a.button {
	display: block;
	margin-bottom: 0;
	padding-right: 1em;
	padding-left: 1em;
}

.store-option-action a.button:before {
	padding-right: .3em;
	content: '\e95b';
	font-size: .9em;
	font-family: LinearIcons;
}

.active .store-option-action a.button:before {
	content: '\e95a';
}

.store-option-item a.button.refresh,
.active.store-option-item a.button.refresh {
	position: relative;
	top: 6px;
	margin-right: 8%;
	margin-left: 8%;
	border: none;
	background-color: #fff;
	padding: .8em .5em;
	color: #9cafbd;
	font-size: .7em;
}

.store-option-action a.button.refresh:before {
	content: '\e8dd';
}

.store-option-item.active i {
	border-color: #00b97e;
}

.store-option-item.active i,
.store-option-item.active h3,
.store-option-item.active .store-option-action h4 {
	color: #00b97e;
}

.store-option-item.active a.button {
	border-color: #00b97e;
	background-color: #00b97e;
}

.store-option-item.active a.button:hover {
	border-color: #424b54;
	background-color: #424b54;
}

form .store-option-item .form-item.shipping {
	top: -.7em;
	margin-top: 0;
	margin-bottom: .7em;
	padding-right: .7em;
	padding-left: .7em;
}

form .store-option-item .form-item.shipping input {
	border: 1px solid #9cafbd;
}

.order-details .total {
	color: #f58f29;
	font-weight: 400;
	font-size: 1.8em;
	text-align: right;
}

.order-details .total span.total {
	float: left;
	border-width: 1px;
	border-style: solid;
	padding-right: .5em;
	padding-left: .5em;
	color: #9cafbd;
	font-size: .5em;
	text-transform: uppercase;
}

.order-details a.button.action {
	display: block;
	margin-top: 1em;
}

.order-details .edit-order {
	display: block;
	margin-top: 1em;
	color: #abb4c0;
	font-style: normal;
	font-weight: normal;
	font-size: .8em;
	font-family: "source_sans_prolight_italic", "Helvetica Neue", Arial, Helvetica, Geneva, sans-serif;
	text-align: center;
}

.order-details .edit-order p {
	display: inline;
	margin-top: 0;
	margin-bottom: 0;
}

.order-details .edit-order a {
	padding-left: 1em;
	color: #00b97e;
	font-family: "source_sans_proregular", "Helvetica Neue", Arial, Helvetica, Geneva, sans-serif;
	text-transform: uppercase;
}

/* =========================================================
	TABLE STYLES
========================================================= */

/* MARK: Cart table
----------------------------------------------- */
table.cart thead tr td {
	border-width: 0 0 1px;
	border-color: var(--gray-light);
	padding-block: 1rem;
}

table.cart tbody tr td {
	border: 0;
	padding-block: 1rem;
}

table.cart tbody tr.item td { border-top: 1px dashed var(--gray-light); }

table.cart tbody tr:first-child td {
	padding-top: 0;
	border-top: 0;
}

table.cart tbody tr.item-subtotal td,
table.cart tbody tr.adjustments td { border-top: 1px solid var(--gray-light); }
table.cart tbody tr.cart-total td { border-top: 4px solid var(--gray-light); }

table.cart tbody tr.cart-additional-info td > div {
	display: grid;
	gap: 1rem;
}

@media (width >= 560px) {
	table.cart tbody tr.cart-additional-info td > div { display: flex; }
	table.cart tbody tr.cart-additional-info td > div > div { padding-top: 22.7px; }
}

@media (width >= 768px) {
	table.cart tbody tr.cart-additional-info td > div {
		max-width: 800px;
		width: 80%;
		margin-left: auto;
	}
}

table.cart input#item-qty {
	text-align: center;
	width: 5ch;
}

table.cart label.remove-item {
	--flow-space: 0.5rem;
	display: block;
}

/* Line up item subtotal with qty/item amount */
table.cart tbody tr.item td.item-subtotal { padding-top: calc(0.5rem - 2px); }

table.cart tfoot tr td { border: 0; }
table.cart tfoot tr td:last-child { text-align: right; }
table.cart .button-set { justify-content: flex-end; }

/* MARK: Order confirmation table
	Shares styles with table.cart
	These are overrides
----------------------------------------------- */
table.cart.confirm-order {
	--flow-space: 3rem;
	border: 1px solid var(--gray-light);
	border-width: 1px 0 0 0;
}

table.cart.confirm-order tbody tr:first-child td { padding-top: 1rem; }

table.cart.confirm-order tfoot tr.order-submit td p {
	margin-top: 2rem;
	text-align: left;
}

@media (width >= 640px) {
	table.cart.confirm-order tfoot tr.order-submit td p {
		max-width: 580px;
		margin-left: auto;
	}
}

/* =========================================================
	VARIOUS TEXT BLOCKS
	(and some typography)
========================================================= */

/* MARK: Long intro (homepage)
----------------------------------------------- */
.long-intro {
	background-color: #f5f8f9;
	padding-block: 2rem;
	font-size: 1.1rem;
}

.long-intro > .container {
	margin-inline: auto;
	max-width: 860px;
}

.long-intro p {
	margin-inline: auto;
	max-width: 860px;
}

/* MARK: Page Content column in sidebar layout
----------------------------------------------- */
.sidebar-layout > .page-content h2 {
	color: var(--orange);
	font-size: 1.9rem;
}

.sidebar-layout > .page-content h3 {
	--flow-space: 1.5rem;
	/* margin-top: 1.3rem; */
	color: var(--gray-light-mid);
	font-weight: 300;
	font-size: 1.3rem;
	letter-spacing: 2px;
	text-transform: uppercase;
}

.sidebar-layout > .page-content ol + h3 {
	--flow-space: 2rem;
}

.sidebar-layout > .page-content * + div.fui-i {
	margin-block-start: 1.5rem !important;
}

.sidebar-layout > .page-content br {
	--flow-space: 0;
}

.sidebar-layout > .page-content ol {
	display: grid;
	gap: 1rem;
	counter-reset:li; /* Initiate a counter */
	/* margin-block: 2rem; */
	/* padding-inline: 1.5rem 1rem; */
	padding: 0;
	color: #666;
	list-style: none;
}

.sidebar-layout > .page-content ol li {
	display: grid;
	grid-template-columns: 1rem auto;
	gap: 0.5rem;
	line-height: 1.2;
}

.sidebar-layout > .page-content ol li::before {
	display: grid;
	place-content: center;
	counter-increment:li; /* Increment the counter by 1 */
	border-radius: 50%;
	background-color: #AFB8C4;
	width: 1rem;
	height: 1rem;
	content:counter(li); /* Use the counter as content */
	color:#fff;
	font-style: normal;
	font-size: 0.75rem;
	line-height: 1;
}

.sidebar-layout > aside h2 {
	--flow-space: 2rem;
	color: var(--orange);
	font-weight: 100;
	font-size: 1.3rem;
}

.sidebar-layout > aside h3 {
	--flow-space: 2rem;
	color: var(--gray-dark);
	font-weight: 100;
	font-size: 1.3rem;
}

.sidebar-layout > aside p {
	--flow-space: 0.75rem;
}

/* =========================================================
	404 AND THANKS
	Legacy / from previous dev
========================================================= */

.four-oh-four .content {
	text-align: center;
}

.four-oh-four .content i {
	font-size: 2em;
}

.four-oh-four .img-full-bkg {
	background-color: #E3E8EC;
	text-align: center;
	padding-top: 2em;
	padding-bottom: 2em;
	padding-left: 4%;
	padding-right: 4%;
}

.four-oh-four .img-full-bkg img.full {
	max-width: 900px;
	margin-left: auto;
	margin-right: auto;
}

.page-thanks .img-full-bkg img.full {
	max-width: 600px;
}

/* =========================================================
	CLUSTER
	- https://every-layout.dev/layouts/cluster/
========================================================= */

.cluster {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: var(--space, 1rem);
	justify-content: flex-start;
}

/* =========================================================
	CONTAINER UTILITY
	// TODO: change any elements with wrapper class to container
========================================================= */

/* MARK: Basic container
----------------------------------------------- */
:is(.wrapper, .container) {
	position: relative;
	clear: both;
   margin-inline: auto;
   /* original wrapper
		width: clamp(20rem, 100vw - 8%, 75rem); */
   width: clamp(20rem, 100vw - 4rem, 75rem);
}

@media (width >= 1024px) {
	:is(.wrapper, .container) { max-width: 1200px; }
}

/* MARK: Inner containers
----------------------------------------------- */
.container > .inner-md { max-width: 960px; }

/* =========================================================
	FLEX GRID UTILITY
========================================================= */

/* MARK: Base grid
----------------------------------------------- */
.flex-grid {
	container-type: inline-size;
	display: flex;
	flex-wrap: wrap;
	gap: 1rem;
	justify-content: center;
}

.flex-grid > * {
	flex-basis: 100%;
	width: 100%;
}

/* MARK: Product type grid
----------------------------------------------- */
.t-storeLandingPage .flex-grid {
	--gap: 2rem;
	gap: var(--gap);
}

@media (width >= 640px) {
	.t-storeLandingPage .flex-grid > * { flex-basis: calc(50% - var(--gap)); }
}

@media (width >= 1024px) {
	.t-storeLandingPage .flex-grid { --gap: 4rem; }
	.t-storeLandingPage .flex-grid > * { flex-basis: calc(33.33% - var(--gap)); }
}

/* =========================================================
	FULL WIDTH BACKGROUND UTILITIES
========================================================= */

/* MARK: Full bg
----------------------------------------------- */
.full-bg {
	background-color: var(--gray-light);
	width: 100%;
	min-height: 50vh;
}

/* MARK: Full sidebar bg
	Gives the illusion of a full-width sidebar layout
----------------------------------------------- */
.full-sidebar-bg {
	border-bottom: 1px solid var(--gray-light);
	background: var(--gray-light);
}

@media (width >= 768px) {
	.full-sidebar-bg {
		margin-bottom: 3rem;
		background: linear-gradient(90deg, var(--gray-light) 0%, var(--gray-light) 50%, white 50%, white 100%);
	}
}

/* =========================================================
	AUTO GRID
	Related Every Layout: https://every-layout.dev/layouts/grid/
	More info on the flexible nature: https://piccalil.li/tutorial/create-a-responsive-grid-layout-with-no-media-queries-using-css-grid/
	A flexible layout that will create an auto-fill grid with
	configurable grid item sizes

	CUSTOM PROPERTIES AND CONFIGURATION
	--gutter (var(--space-m)): This defines the space
	between each item.

	--grid-min-item-size (14rem): How large each item should be
	ideally, as a minimum.

	--grid-placement (auto-fill): Set either auto-fit or auto-fill
	to change how empty grid tracks are handled
========================================================= */

/* MARK: Base grid
----------------------------------------------- */
.grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
	gap: 1rem;
}

/* MARK: 3-column grid
----------------------------------------------- */
.grid[data-layout="thirds"] {
	grid-template-columns: repeat(auto-fit, clamp(16rem, 33%, 20rem) );
	justify-content: center;
}

.grid[data-layout="thirds"][data-variant="resources"] {
	grid-template-columns: repeat(auto-fit, clamp(15rem, 33%, 17rem) );
	gap: 2.5rem;
}

/* MARK: Updated Grid style
----------------------------------------------- */
.grid-constrained {
	--grid-max-col-count: 3;
	--grid-min-col-size: 200px;
	--grid-gap: 1rem;

	/* calculations, do not touch */
	--grid-col-size-calc: calc(
		(100% - var(--grid-gap) * var(--grid-max-col-count)) /
			var(--grid-max-col-count)
	);

	--grid-col-min-size-calc: min(
		100%,
		max(var(--grid-min-col-size), var(--grid-col-size-calc))
	);

	display: grid;
	grid-template-columns: repeat(auto-fit,
		minmax(var(--grid-col-min-size-calc), 1fr)
	);
	gap: var(--grid-gap);
}

.grid-constrained[data-variant="album"] {
	--grid-max-col-count: 4;
	--grid-min-col-size: 200px;
	margin-block-start: 2rem;
}

/* =========================================================
	SIDEBAR
========================================================= */

/* MARK: Sidebar layout
----------------------------------------------- */
.sidebar-layout {
	--sidebar-gap: 1rem;
	display: grid;
	gap: var(--sidebar-gap);
}

@media (width >= 768px) {
	.sidebar-layout { grid-template-columns: 1fr clamp(150px, 30%, 320px); }
	.sidebar-layout.reversed { grid-template-columns: clamp(150px, 30%, 320px) 1fr; }
}

.sidebar-layout.full-width { --sidebar-gap: 2rem; }

@media (width >= 768px) {
	.sidebar-layout.full-width { grid-template-columns: 60vw auto; }
}

@media (width >= 1024px) {
	.sidebar-layout.full-width { grid-template-columns: 73vw auto; }
}

@media (width >= 1280px) {
	.sidebar-layout.full-width {
		--sidebar-gap: 3rem;
		grid-template-columns: calc(70vw - 3rem) auto;
	}
}

/* MARK: Blog specific sidebar layout
----------------------------------------------- */
@media (width >= 768px) {
	.t-blogListing .sidebar-layout { --sidebar-gap: 3rem; }
	:is(.t-blog, .t-blogCategory) .sidebar-layout { --sidebar-gap: 6rem; }
}

/* MARK: Checkout page sidebar layout
----------------------------------------------- */
.t-checkout .sidebar-layout { --sidebar-gap: 0; }
.t-checkout .sidebar-layout > div { padding-inline: 4%; }
.t-checkout .sidebar-layout > div:first-child { background-color: var(--gray-light); }
.t-checkout .sidebar-layout > div:last-child { background-color: white; }

@media (width >= 768px) {
	.t-checkout .sidebar-layout {
		--sidebar-gap: 2rem;
		grid-template-columns: 1fr clamp(300px, 25%, 400px);
	}
}

@media (width >= 1024px) {
	.t-checkout .sidebar-layout > div:first-child { padding-inline: 0 2rem; }
	.t-checkout .sidebar-layout > div:last-child { padding-inline: 0; }
}

/* MARK: Store product type sidebar layout
----------------------------------------------- */
@media (width >= 768px) {
	.t-storeProductType .sidebar-layout {
		--sidebar-gap: 3.5rem;
		grid-template-columns: clamp(150px, 30%, 300px) 1fr;
	}
}

.t-storeProductType .sidebar-layout > .iso-content { padding-top: 2rem; }
.t-storeProductType .sidebar-layout > aside { background-color: var(--gray-extra-light); }

/* MARK: Resources entry sidebar layout
----------------------------------------------- */
@media (width >= 768px) {
	.t-resources .sidebar-layout { grid-template-columns: 1fr clamp(150px, 30%, 360px); }
}

/* overrides _main.css */
.t-resources .sidebar-layout .content { width: auto; }

.t-resources .sidebar-layout .aside { background-color: #eef1f4; }

/* MARK: Content pages sidebar layout
----------------------------------------------- */
:is(.t-contentPage, .t-search-results) .sidebar-layout {
	margin-block: 4.5rem;
}

@media (width >= 768px) {
	:is(.t-contentPage, .t-search-results) .sidebar-layout > .page-content {
		max-width: 780px;
	}
}


/* MARK: Legacy sidebar code - from previous dev
----------------------------------------------- */
.sidebar nav {
	margin-bottom: 2em;
	background-color: #F6F8F9;
	padding-top: 7%;
	padding-bottom: 1%;
}

.sidebar h2 {
	color: #f6902a;
	font-weight: 100;
	font-size: 1.3em;
}


.sidebar h3 {
	color: #444D54;
	font-weight: 100;
	font-size: 1.3em;
}

.sidebar nav h3 {
	margin-top: 0;
	padding-right: 7%;
	padding-left: 7%;
}


.sidebar p {
	margin-top: 1em;
	margin-bottom: 1em;
}

.sidebar p em {
	position: relative;
	color: #9cafbd;
	font-size: .9em;
}

.sidebar nav ul {
	padding: 0;
}

.sidebar nav ul li {
}

.sidebar nav li a {
	display: block;
	padding-top: .4em;
	padding-right: 7%;
	padding-bottom: .4em;
	padding-left: 7%;
	color: #6D747A;
}

.sidebar nav li a:hover {
	background-color: #9cafbd;
	color: #fff;
}

.sidebar nav li.current a {
	background-color: #f58f29;
	color: #fff;
}

.sidebar .callout {
	padding: 7%;
}

/* =========================================================
	THE SWITCHER
	https://every-layout.dev/layouts/switcher/
	Switches a Flexbox context between a horizontal and a
	vertical layout at a given, container-based breakpoint.
========================================================= */

/* MARK: Default switcher
----------------------------------------------- */
.switcher {
	display: flex;
	flex-wrap: wrap;
	gap: 1rem;
}

.switcher > * {
	flex-grow: 1;
	flex-basis: calc((30rem - 100%) * 999);
}

/* MARK: Page-specific switcher styles
----------------------------------------------- */
.t-checkout .switcher {
	gap: 2rem;
}

@media (width >= 1280px) {
	.t-checkout .switcher { gap: 4rem; }
}

/* =========================================================
	FLOW
========================================================= */
.flow > * + * {
   margin-block-start: var(--flow-space, 1rem);
}

/* =========================================================
   HELPER UTILITY CLASSES
	Keep to a minimum
========================================================= */

/* MARK: Font sizes
----------------------------------------------- */
.fs--2 { font-size: var(--fs--2) !important; }
.fs--1 { font-size: var(--fs--1) !important; }
.fs-0 { font-size: var(--fs-0) !important; }
.fs-1 { font-size: var(--fs-1) !important; }
.fs-2 { font-size: var(--fs-2) !important; }
.fs-3 { font-size: var(--fs-3) !important; }
.fs-4 { font-size: var(--fs-4) !important; }
.fs-5 { font-size: var(--fs-5) !important; }
.fs-6 { font-size: var(--fs-6) !important; }
.fs-7 { font-size: var(--fs-7) !important; }

/* MARK: Text alignment
----------------------------------------------- */
.text-right { text-align: right; }
.text-center { text-align: center; }

/* MARK: Block spacing
----------------------------------------------- */
.block-s0 { padding-block: var(--s0); }
.block-s1 { padding-block: var(--s1); }
.block-s2 { padding-block: var(--s2); }
.block-s3 { padding-block: var(--s3); }

/* MARK: Screen-reader only (hide visually)
----------------------------------------------- */
.sr-only {
   border: 0;
   clip: rect(0, 0, 0, 0);
   position: absolute;
   margin: -1px;
   padding: 0;
   width: 1px;
   height: 1px;
   overflow: hidden;
   white-space: nowrap;
}

.sr-only:focus-visible {
	position: static;
	margin: 0;
	padding: 0;
	width: auto;
	height: auto;
	overflow: visible;
	clip: auto;
	white-space: normal;
}

/* MARK: Video embed
----------------------------------------------- */
.video-container { max-width: 100%; }

.video-container > iframe {
	aspect-ratio: 16 / 9;
	width: 100%;
	height: 100%;
}

/* MARK: Legacy helpers
----------------------------------------------- */
.ir {
    border: 0;
    background-color: transparent;
    overflow: hidden;
    *text-indent: -9999px;
}

.ir:before {
    display: block;
    width: 0;
    height: 150%;
    content: "";
}

.hidden {
    display: none !important;
    visibility: hidden;
}

.visuallyhidden {
    border: 0;
    clip: rect(0 0 0 0);
    position: absolute;
    margin: -1px;
    padding: 0;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

.visuallyhidden.focusable:active,
.visuallyhidden.focusable:focus {
    clip: auto;
    position: static;
    margin: 0;
    width: auto;
    height: auto;
    overflow: visible;
}

.invisible {
    visibility: hidden;
}

.clearfix:before,
.clearfix:after {
    display: table;
    content: " ";
}

.clearfix:after {
    clear: both;
}

.clearfix {
    *zoom: 1;
}

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

.preload * {
  -webkit-transition: none !important;
  -moz-transition: none !important;
  -ms-transition: none !important;
  -o-transition: none !important;
}

/* =========================================================
	ICONS DEFINTIONS
========================================================= */

/* MARK: Linear Icons
----------------------------------------------- */
[class^="icon-"], [class*=" icon-"] {
    /* use !important to prevent issues with browser extensions that change fonts */
    font-family: 'Linearicons' !important;
    speak: none;
    font-style: normal;
    font-weight: normal;
    font-variant: normal;
    text-transform: none;
    line-height: 1;

    /* Enable Ligatures ================ */
    letter-spacing: 0;
    -ms-font-feature-settings: "liga" 1;
    -o-font-feature-settings: "liga";
    font-feature-settings: "liga";

    /* Better Font Rendering =========== */
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

.icon-home:before {
    content: "\e600";
}
.icon-home2:before {
    content: "\e601";
}
.icon-home3:before {
    content: "\e602";
}
.icon-home4:before {
    content: "\e603";
}
.icon-home5:before {
    content: "\e604";
}
.icon-home6:before {
    content: "\e605";
}
.icon-bathtub:before {
    content: "\e606";
}
.icon-toothbrush:before {
    content: "\e607";
}
.icon-bed:before {
    content: "\e608";
}
.icon-couch:before {
    content: "\e609";
}
.icon-chair:before {
    content: "\e60a";
}
.icon-city:before {
    content: "\e60b";
}
.icon-apartment:before {
    content: "\e60c";
}
.icon-pencil:before {
    content: "\e60d";
}
.icon-pencil2:before {
    content: "\e60e";
}
.icon-pen:before {
    content: "\e60f";
}
.icon-pencil3:before {
    content: "\e610";
}
.icon-eraser:before {
    content: "\e611";
}
.icon-pencil4:before {
    content: "\e612";
}
.icon-pencil5:before {
    content: "\e613";
}
.icon-feather:before {
    content: "\e614";
}
.icon-feather2:before {
    content: "\e615";
}
.icon-feather3:before {
    content: "\e616";
}
.icon-pen2:before {
    content: "\e617";
}
.icon-pen-add:before {
    content: "\e618";
}
.icon-pen-remove:before {
    content: "\e619";
}
.icon-vector:before {
    content: "\e61a";
}
.icon-pen3:before {
    content: "\e61b";
}
.icon-blog:before {
    content: "\e61c";
}
.icon-brush:before {
    content: "\e61d";
}
.icon-brush2:before {
    content: "\e61e";
}
.icon-spray:before {
    content: "\e61f";
}
.icon-paint-roller:before {
    content: "\e620";
}
.icon-stamp:before {
    content: "\e621";
}
.icon-tape:before {
    content: "\e622";
}
.icon-desk-tape:before {
    content: "\e623";
}
.icon-texture:before {
    content: "\e624";
}
.icon-eye-dropper:before {
    content: "\e625";
}
.icon-palette:before {
    content: "\e626";
}
.icon-color-sampler:before {
    content: "\e627";
}
.icon-bucket:before {
    content: "\e628";
}
.icon-gradient:before {
    content: "\e629";
}
.icon-gradient2:before {
    content: "\e62a";
}
.icon-magic-wand:before {
    content: "\e62b";
}
.icon-magnet:before {
    content: "\e62c";
}
.icon-pencil-ruler:before {
    content: "\e62d";
}
.icon-pencil-ruler2:before {
    content: "\e62e";
}
.icon-compass:before {
    content: "\e62f";
}
.icon-aim:before {
    content: "\e630";
}
.icon-gun:before {
    content: "\e631";
}
.icon-bottle:before {
    content: "\e632";
}
.icon-drop:before {
    content: "\e633";
}
.icon-drop-crossed:before {
    content: "\e634";
}
.icon-drop2:before {
    content: "\e635";
}
.icon-snow:before {
    content: "\e636";
}
.icon-snow2:before {
    content: "\e637";
}
.icon-fire:before {
    content: "\e638";
}
.icon-lighter:before {
    content: "\e639";
}
.icon-knife:before {
    content: "\e63a";
}
.icon-dagger:before {
    content: "\e63b";
}
.icon-tissue:before {
    content: "\e63c";
}
.icon-toilet-paper:before {
    content: "\e63d";
}
.icon-poop:before {
    content: "\e63e";
}
.icon-umbrella:before {
    content: "\e63f";
}
.icon-umbrella2:before {
    content: "\e640";
}
.icon-rain:before {
    content: "\e641";
}
.icon-tornado:before {
    content: "\e642";
}
.icon-wind:before {
    content: "\e643";
}
.icon-fan:before {
    content: "\e644";
}
.icon-contrast:before {
    content: "\e645";
}
.icon-sun-small:before {
    content: "\e646";
}
.icon-sun:before {
    content: "\e647";
}
.icon-sun2:before {
    content: "\e648";
}
.icon-moon:before {
    content: "\e649";
}
.icon-cloud:before {
    content: "\e64a";
}
.icon-cloud-upload:before {
    content: "\e64b";
}
.icon-cloud-download:before {
    content: "\e64c";
}
.icon-cloud-rain:before {
    content: "\e64d";
}
.icon-cloud-hailstones:before {
    content: "\e64e";
}
.icon-cloud-snow:before {
    content: "\e64f";
}
.icon-cloud-windy:before {
    content: "\e650";
}
.icon-sun-wind:before {
    content: "\e651";
}
.icon-cloud-fog:before {
    content: "\e652";
}
.icon-cloud-sun:before {
    content: "\e653";
}
.icon-cloud-lightning:before {
    content: "\e654";
}
.icon-cloud-sync:before {
    content: "\e655";
}
.icon-cloud-lock:before {
    content: "\e656";
}
.icon-cloud-gear:before {
    content: "\e657";
}
.icon-cloud-alert:before {
    content: "\e658";
}
.icon-cloud-check:before {
    content: "\e659";
}
.icon-cloud-cross:before {
    content: "\e65a";
}
.icon-cloud-crossed:before {
    content: "\e65b";
}
.icon-cloud-database:before {
    content: "\e65c";
}
.icon-database:before {
    content: "\e65d";
}
.icon-database-add:before {
    content: "\e65e";
}
.icon-database-remove:before {
    content: "\e65f";
}
.icon-database-lock:before {
    content: "\e660";
}
.icon-database-refresh:before {
    content: "\e661";
}
.icon-database-check:before {
    content: "\e662";
}
.icon-database-history:before {
    content: "\e663";
}
.icon-database-upload:before {
    content: "\e664";
}
.icon-database-download:before {
    content: "\e665";
}
.icon-server:before {
    content: "\e666";
}
.icon-shield:before {
    content: "\e667";
}
.icon-shield-check:before {
    content: "\e668";
}
.icon-shield-alert:before {
    content: "\e669";
}
.icon-shield-cross:before {
    content: "\e66a";
}
.icon-lock:before {
    content: "\e66b";
}
.icon-rotation-lock:before {
    content: "\e66c";
}
.icon-unlock:before {
    content: "\e66d";
}
.icon-key:before {
    content: "\e66e";
}
.icon-key-hole:before {
    content: "\e66f";
}
.icon-toggle-off:before {
    content: "\e670";
}
.icon-toggle-on:before {
    content: "\e671";
}
.icon-cog:before {
    content: "\e672";
}
.icon-cog2:before {
    content: "\e673";
}
.icon-wrench:before {
    content: "\e674";
}
.icon-screwdriver:before {
    content: "\e675";
}
.icon-hammer-wrench:before {
    content: "\e676";
}
.icon-hammer:before {
    content: "\e677";
}
.icon-saw:before {
    content: "\e678";
}
.icon-axe:before {
    content: "\e679";
}
.icon-axe2:before {
    content: "\e67a";
}
.icon-shovel:before {
    content: "\e67b";
}
.icon-pickaxe:before {
    content: "\e67c";
}
.icon-factory:before {
    content: "\e67d";
}
.icon-factory2:before {
    content: "\e67e";
}
.icon-recycle:before {
    content: "\e67f";
}
.icon-trash:before {
    content: "\e680";
}
.icon-trash2:before {
    content: "\e681";
}
.icon-trash3:before {
    content: "\e682";
}
.icon-broom:before {
    content: "\e683";
}
.icon-game:before {
    content: "\e684";
}
.icon-gamepad:before {
    content: "\e685";
}
.icon-joystick:before {
    content: "\e686";
}
.icon-dice:before {
    content: "\e687";
}
.icon-spades:before {
    content: "\e688";
}
.icon-diamonds:before {
    content: "\e689";
}
.icon-clubs:before {
    content: "\e68a";
}
.icon-hearts:before {
    content: "\e68b";
}
.icon-heart:before {
    content: "\e68c";
}
.icon-star:before {
    content: "\e68d";
}
.icon-star-half:before {
    content: "\e68e";
}
.icon-star-empty:before {
    content: "\e68f";
}
.icon-flag:before {
    content: "\e690";
}
.icon-flag2:before {
    content: "\e691";
}
.icon-flag3:before {
    content: "\e692";
}
.icon-mailbox-full:before {
    content: "\e693";
}
.icon-mailbox-empty:before {
    content: "\e694";
}
.icon-at-sign:before {
    content: "\e695";
}
.icon-envelope:before {
    content: "\e696";
}
.icon-envelope-open:before {
    content: "\e697";
}
.icon-paperclip:before {
    content: "\e698";
}
.icon-paper-plane:before {
    content: "\e699";
}
.icon-reply:before {
    content: "\e69a";
}
.icon-reply-all:before {
    content: "\e69b";
}
.icon-inbox:before {
    content: "\e69c";
}
.icon-inbox2:before {
    content: "\e69d";
}
.icon-outbox:before {
    content: "\e69e";
}
.icon-box:before {
    content: "\e69f";
}
.icon-archive:before {
    content: "\e6a0";
}
.icon-archive2:before {
    content: "\e6a1";
}
.icon-drawers:before {
    content: "\e6a2";
}
.icon-drawers2:before {
    content: "\e6a3";
}
.icon-drawers3:before {
    content: "\e6a4";
}
.icon-eye:before {
    content: "\e6a5";
}
.icon-eye-crossed:before {
    content: "\e6a6";
}
.icon-eye-plus:before {
    content: "\e6a7";
}
.icon-eye-minus:before {
    content: "\e6a8";
}
.icon-binoculars:before {
    content: "\e6a9";
}
.icon-binoculars2:before {
    content: "\e6aa";
}
.icon-hdd:before {
    content: "\e6ab";
}
.icon-hdd-down:before {
    content: "\e6ac";
}
.icon-hdd-up:before {
    content: "\e6ad";
}
.icon-floppy-disk:before {
    content: "\e6ae";
}
.icon-disc:before {
    content: "\e6af";
}
.icon-tape2:before {
    content: "\e6b0";
}
.icon-printer:before {
    content: "\e6b1";
}
.icon-shredder:before {
    content: "\e6b2";
}
.icon-file-empty:before {
    content: "\e6b3";
}
.icon-file-add:before {
    content: "\e6b4";
}
.icon-file-check:before {
    content: "\e6b5";
}
.icon-file-lock:before {
    content: "\e6b6";
}
.icon-files:before {
    content: "\e6b7";
}
.icon-copy:before {
    content: "\e6b8";
}
.icon-compare:before {
    content: "\e6b9";
}
.icon-folder:before {
    content: "\e6ba";
}
.icon-folder-search:before {
    content: "\e6bb";
}
.icon-folder-plus:before {
    content: "\e6bc";
}
.icon-folder-minus:before {
    content: "\e6bd";
}
.icon-folder-download:before {
    content: "\e6be";
}
.icon-folder-upload:before {
    content: "\e6bf";
}
.icon-folder-star:before {
    content: "\e6c0";
}
.icon-folder-heart:before {
    content: "\e6c1";
}
.icon-folder-user:before {
    content: "\e6c2";
}
.icon-folder-shared:before {
    content: "\e6c3";
}
.icon-folder-music:before {
    content: "\e6c4";
}
.icon-folder-picture:before {
    content: "\e6c5";
}
.icon-folder-film:before {
    content: "\e6c6";
}
.icon-scissors:before {
    content: "\e6c7";
}
.icon-paste:before {
    content: "\e6c8";
}
.icon-clipboard-empty:before {
    content: "\e6c9";
}
.icon-clipboard-pencil:before {
    content: "\e6ca";
}
.icon-clipboard-text:before {
    content: "\e6cb";
}
.icon-clipboard-check:before {
    content: "\e6cc";
}
.icon-clipboard-down:before {
    content: "\e6cd";
}
.icon-clipboard-left:before {
    content: "\e6ce";
}
.icon-clipboard-alert:before {
    content: "\e6cf";
}
.icon-clipboard-user:before {
    content: "\e6d0";
}
.icon-register:before {
    content: "\e6d1";
}
.icon-enter:before {
    content: "\e6d2";
}
.icon-exit:before {
    content: "\e6d3";
}
.icon-papers:before {
    content: "\e6d4";
}
.icon-news:before {
    content: "\e6d5";
}
.icon-reading:before {
    content: "\e6d6";
}
.icon-typewriter:before {
    content: "\e6d7";
}
.icon-document:before {
    content: "\e6d8";
}
.icon-document2:before {
    content: "\e6d9";
}
.icon-graduation-hat:before {
    content: "\e6da";
}
.icon-license:before {
    content: "\e6db";
}
.icon-license2:before {
    content: "\e6dc";
}
.icon-medal-empty:before {
    content: "\e6dd";
}
.icon-medal-first:before {
    content: "\e6de";
}
.icon-medal-second:before {
    content: "\e6df";
}
.icon-medal-third:before {
    content: "\e6e0";
}
.icon-podium:before {
    content: "\e6e1";
}
.icon-trophy:before {
    content: "\e6e2";
}
.icon-trophy2:before {
    content: "\e6e3";
}
.icon-music-note:before {
    content: "\e6e4";
}
.icon-music-note2:before {
    content: "\e6e5";
}
.icon-music-note3:before {
    content: "\e6e6";
}
.icon-playlist:before {
    content: "\e6e7";
}
.icon-playlist-add:before {
    content: "\e6e8";
}
.icon-guitar:before {
    content: "\e6e9";
}
.icon-trumpet:before {
    content: "\e6ea";
}
.icon-album:before {
    content: "\e6eb";
}
.icon-shuffle:before {
    content: "\e6ec";
}
.icon-repeat-one:before {
    content: "\e6ed";
}
.icon-repeat:before {
    content: "\e6ee";
}
.icon-headphones:before {
    content: "\e6ef";
}
.icon-headset:before {
    content: "\e6f0";
}
.icon-loudspeaker:before {
    content: "\e6f1";
}
.icon-equalizer:before {
    content: "\e6f2";
}
.icon-theater:before {
    content: "\e6f3";
}
.icon-3d-glasses:before {
    content: "\e6f4";
}
.icon-ticket:before {
    content: "\e6f5";
}
.icon-presentation:before {
    content: "\e6f6";
}
.icon-play:before {
    content: "\e6f7";
}
.icon-film-play:before {
    content: "\e6f8";
}
.icon-clapboard-play:before {
    content: "\e6f9";
}
.icon-media:before {
    content: "\e6fa";
}
.icon-film:before {
    content: "\e6fb";
}
.icon-film2:before {
    content: "\e6fc";
}
.icon-surveillance:before {
    content: "\e6fd";
}
.icon-surveillance2:before {
    content: "\e6fe";
}
.icon-camera:before {
    content: "\e6ff";
}
.icon-camera-crossed:before {
    content: "\e700";
}
.icon-camera-play:before {
    content: "\e701";
}
.icon-time-lapse:before {
    content: "\e702";
}
.icon-record:before {
    content: "\e703";
}
.icon-camera2:before {
    content: "\e704";
}
.icon-camera-flip:before {
    content: "\e705";
}
.icon-panorama:before {
    content: "\e706";
}
.icon-time-lapse2:before {
    content: "\e707";
}
.icon-shutter:before {
    content: "\e708";
}
.icon-shutter2:before {
    content: "\e709";
}
.icon-face-detection:before {
    content: "\e70a";
}
.icon-flare:before {
    content: "\e70b";
}
.icon-convex:before {
    content: "\e70c";
}
.icon-concave:before {
    content: "\e70d";
}
.icon-picture:before {
    content: "\e70e";
}
.icon-picture2:before {
    content: "\e70f";
}
.icon-picture3:before {
    content: "\e710";
}
.icon-pictures:before {
    content: "\e711";
}
.icon-book:before {
    content: "\e712";
}
.icon-audio-book:before {
    content: "\e713";
}
.icon-book2:before {
    content: "\e714";
}
.icon-bookmark:before {
    content: "\e715";
}
.icon-bookmark2:before {
    content: "\e716";
}
.icon-label:before {
    content: "\e717";
}
.icon-library:before {
    content: "\e718";
}
.icon-library2:before {
    content: "\e719";
}
.icon-contacts:before {
    content: "\e71a";
}
.icon-profile:before {
    content: "\e71b";
}
.icon-portrait:before {
    content: "\e71c";
}
.icon-portrait2:before {
    content: "\e71d";
}
.icon-user:before {
    content: "\e71e";
}
.icon-user-plus:before {
    content: "\e71f";
}
.icon-user-minus:before {
    content: "\e720";
}
.icon-user-lock:before {
    content: "\e721";
}
.icon-users:before {
    content: "\e722";
}
.icon-users2:before {
    content: "\e723";
}
.icon-users-plus:before {
    content: "\e724";
}
.icon-users-minus:before {
    content: "\e725";
}
.icon-group-work:before {
    content: "\e726";
}
.icon-woman:before {
    content: "\e727";
}
.icon-man:before {
    content: "\e728";
}
.icon-baby:before {
    content: "\e729";
}
.icon-baby2:before {
    content: "\e72a";
}
.icon-baby3:before {
    content: "\e72b";
}
.icon-baby-bottle:before {
    content: "\e72c";
}
.icon-walk:before {
    content: "\e72d";
}
.icon-hand-waving:before {
    content: "\e72e";
}
.icon-jump:before {
    content: "\e72f";
}
.icon-run:before {
    content: "\e730";
}
.icon-woman2:before {
    content: "\e731";
}
.icon-man2:before {
    content: "\e732";
}
.icon-man-woman:before {
    content: "\e733";
}
.icon-height:before {
    content: "\e734";
}
.icon-weight:before {
    content: "\e735";
}
.icon-scale:before {
    content: "\e736";
}
.icon-button:before {
    content: "\e737";
}
.icon-bow-tie:before {
    content: "\e738";
}
.icon-tie:before {
    content: "\e739";
}
.icon-socks:before {
    content: "\e73a";
}
.icon-shoe:before {
    content: "\e73b";
}
.icon-shoes:before {
    content: "\e73c";
}
.icon-hat:before {
    content: "\e73d";
}
.icon-pants:before {
    content: "\e73e";
}
.icon-shorts:before {
    content: "\e73f";
}
.icon-flip-flops:before {
    content: "\e740";
}
.icon-shirt:before {
    content: "\e741";
}
.icon-hanger:before {
    content: "\e742";
}
.icon-laundry:before {
    content: "\e743";
}
.icon-store:before {
    content: "\e744";
}
.icon-haircut:before {
    content: "\e745";
}
.icon-store-24:before {
    content: "\e746";
}
.icon-barcode:before {
    content: "\e747";
}
.icon-barcode2:before {
    content: "\e748";
}
.icon-barcode3:before {
    content: "\e749";
}
.icon-cashier:before {
    content: "\e74a";
}
.icon-bag:before {
    content: "\e74b";
}
.icon-bag2:before {
    content: "\e74c";
}
.icon-cart:before {
    content: "\e74d";
}
.icon-cart-empty:before {
    content: "\e74e";
}
.icon-cart-full:before {
    content: "\e74f";
}
.icon-cart-plus:before {
    content: "\e750";
}
.icon-cart-plus2:before {
    content: "\e751";
}
.icon-cart-add:before {
    content: "\e752";
}
.icon-cart-remove:before {
    content: "\e753";
}
.icon-cart-exchange:before {
    content: "\e754";
}
.icon-tag:before {
    content: "\e755";
}
.icon-tags:before {
    content: "\e756";
}
.icon-receipt:before {
    content: "\e757";
}
.icon-wallet:before {
    content: "\e758";
}
.icon-credit-card:before {
    content: "\e759";
}
.icon-cash-dollar:before {
    content: "\e75a";
}
.icon-cash-euro:before {
    content: "\e75b";
}
.icon-cash-pound:before {
    content: "\e75c";
}
.icon-cash-yen:before {
    content: "\e75d";
}
.icon-bag-dollar:before {
    content: "\e75e";
}
.icon-bag-euro:before {
    content: "\e75f";
}
.icon-bag-pound:before {
    content: "\e760";
}
.icon-bag-yen:before {
    content: "\e761";
}
.icon-coin-dollar:before {
    content: "\e762";
}
.icon-coin-euro:before {
    content: "\e763";
}
.icon-coin-pound:before {
    content: "\e764";
}
.icon-coin-yen:before {
    content: "\e765";
}
.icon-calculator:before {
    content: "\e766";
}
.icon-calculator2:before {
    content: "\e767";
}
.icon-abacus:before {
    content: "\e768";
}
.icon-vault:before {
    content: "\e769";
}
.icon-telephone:before {
    content: "\e76a";
}
.icon-phone-lock:before {
    content: "\e76b";
}
.icon-phone-wave:before {
    content: "\e76c";
}
.icon-phone-pause:before {
    content: "\e76d";
}
.icon-phone-outgoing:before {
    content: "\e76e";
}
.icon-phone-incoming:before {
    content: "\e76f";
}
.icon-phone-in-out:before {
    content: "\e770";
}
.icon-phone-error:before {
    content: "\e771";
}
.icon-phone-sip:before {
    content: "\e772";
}
.icon-phone-plus:before {
    content: "\e773";
}
.icon-phone-minus:before {
    content: "\e774";
}
.icon-voicemail:before {
    content: "\e775";
}
.icon-dial:before {
    content: "\e776";
}
.icon-telephone2:before {
    content: "\e777";
}
.icon-pushpin:before {
    content: "\e778";
}
.icon-pushpin2:before {
    content: "\e779";
}
.icon-map-marker:before {
    content: "\e77a";
}
.icon-map-marker-user:before {
    content: "\e77b";
}
.icon-map-marker-down:before {
    content: "\e77c";
}
.icon-map-marker-check:before {
    content: "\e77d";
}
.icon-map-marker-crossed:before {
    content: "\e77e";
}
.icon-radar:before {
    content: "\e77f";
}
.icon-compass2:before {
    content: "\e780";
}
.icon-map:before {
    content: "\e781";
}
.icon-map2:before {
    content: "\e782";
}
.icon-location:before {
    content: "\e783";
}
.icon-road-sign:before {
    content: "\e784";
}
.icon-calendar-empty:before {
    content: "\e785";
}
.icon-calendar-check:before {
    content: "\e786";
}
.icon-calendar-cross:before {
    content: "\e787";
}
.icon-calendar-31:before {
    content: "\e788";
}
.icon-calendar-full:before {
    content: "\e789";
}
.icon-calendar-insert:before {
    content: "\e78a";
}
.icon-calendar-text:before {
    content: "\e78b";
}
.icon-calendar-user:before {
    content: "\e78c";
}
.icon-mouse:before {
    content: "\e78d";
}
.icon-mouse-left:before {
    content: "\e78e";
}
.icon-mouse-right:before {
    content: "\e78f";
}
.icon-mouse-both:before {
    content: "\e790";
}
.icon-keyboard:before {
    content: "\e791";
}
.icon-keyboard-up:before {
    content: "\e792";
}
.icon-keyboard-down:before {
    content: "\e793";
}
.icon-delete:before {
    content: "\e794";
}
.icon-spell-check:before {
    content: "\e795";
}
.icon-escape:before {
    content: "\e796";
}
.icon-enter2:before {
    content: "\e797";
}
.icon-screen:before {
    content: "\e798";
}
.icon-aspect-ratio:before {
    content: "\e799";
}
.icon-signal:before {
    content: "\e79a";
}
.icon-signal-lock:before {
    content: "\e79b";
}
.icon-signal-80:before {
    content: "\e79c";
}
.icon-signal-60:before {
    content: "\e79d";
}
.icon-signal-40:before {
    content: "\e79e";
}
.icon-signal-20:before {
    content: "\e79f";
}
.icon-signal-0:before {
    content: "\e7a0";
}
.icon-signal-blocked:before {
    content: "\e7a1";
}
.icon-sim:before {
    content: "\e7a2";
}
.icon-flash-memory:before {
    content: "\e7a3";
}
.icon-usb-drive:before {
    content: "\e7a4";
}
.icon-phone:before {
    content: "\e7a5";
}
.icon-smartphone:before {
    content: "\e7a6";
}
.icon-smartphone-notification:before {
    content: "\e7a7";
}
.icon-smartphone-vibration:before {
    content: "\e7a8";
}
.icon-smartphone-embed:before {
    content: "\e7a9";
}
.icon-smartphone-waves:before {
    content: "\e7aa";
}
.icon-tablet:before {
    content: "\e7ab";
}
.icon-tablet2:before {
    content: "\e7ac";
}
.icon-laptop:before {
    content: "\e7ad";
}
.icon-laptop-phone:before {
    content: "\e7ae";
}
.icon-desktop:before {
    content: "\e7af";
}
.icon-launch:before {
    content: "\e7b0";
}
.icon-new-tab:before {
    content: "\e7b1";
}
.icon-window:before {
    content: "\e7b2";
}
.icon-cable:before {
    content: "\e7b3";
}
.icon-cable2:before {
    content: "\e7b4";
}
.icon-tv:before {
    content: "\e7b5";
}
.icon-radio:before {
    content: "\e7b6";
}
.icon-remote-control:before {
    content: "\e7b7";
}
.icon-power-switch:before {
    content: "\e7b8";
}
.icon-power:before {
    content: "\e7b9";
}
.icon-power-crossed:before {
    content: "\e7ba";
}
.icon-flash-auto:before {
    content: "\e7bb";
}
.icon-lamp:before {
    content: "\e7bc";
}
.icon-flashlight:before {
    content: "\e7bd";
}
.icon-lampshade:before {
    content: "\e7be";
}
.icon-cord:before {
    content: "\e7bf";
}
.icon-outlet:before {
    content: "\e7c0";
}
.icon-battery-power:before {
    content: "\e7c1";
}
.icon-battery-empty:before {
    content: "\e7c2";
}
.icon-battery-alert:before {
    content: "\e7c3";
}
.icon-battery-error:before {
    content: "\e7c4";
}
.icon-battery-low1:before {
    content: "\e7c5";
}
.icon-battery-low2:before {
    content: "\e7c6";
}
.icon-battery-low3:before {
    content: "\e7c7";
}
.icon-battery-mid1:before {
    content: "\e7c8";
}
.icon-battery-mid2:before {
    content: "\e7c9";
}
.icon-battery-mid3:before {
    content: "\e7ca";
}
.icon-battery-full:before {
    content: "\e7cb";
}
.icon-battery-charging:before {
    content: "\e7cc";
}
.icon-battery-charging2:before {
    content: "\e7cd";
}
.icon-battery-charging3:before {
    content: "\e7ce";
}
.icon-battery-charging4:before {
    content: "\e7cf";
}
.icon-battery-charging5:before {
    content: "\e7d0";
}
.icon-battery-charging6:before {
    content: "\e7d1";
}
.icon-battery-charging7:before {
    content: "\e7d2";
}
.icon-chip:before {
    content: "\e7d3";
}
.icon-chip-x64:before {
    content: "\e7d4";
}
.icon-chip-x86:before {
    content: "\e7d5";
}
.icon-bubble:before {
    content: "\e7d6";
}
.icon-bubbles:before {
    content: "\e7d7";
}
.icon-bubble-dots:before {
    content: "\e7d8";
}
.icon-bubble-alert:before {
    content: "\e7d9";
}
.icon-bubble-question:before {
    content: "\e7da";
}
.icon-bubble-text:before {
    content: "\e7db";
}
.icon-bubble-pencil:before {
    content: "\e7dc";
}
.icon-bubble-picture:before {
    content: "\e7dd";
}
.icon-bubble-video:before {
    content: "\e7de";
}
.icon-bubble-user:before {
    content: "\e7df";
}
.icon-bubble-quote:before {
    content: "\e7e0";
}
.icon-bubble-heart:before {
    content: "\e7e1";
}
.icon-bubble-emoticon:before {
    content: "\e7e2";
}
.icon-bubble-attachment:before {
    content: "\e7e3";
}
.icon-phone-bubble:before {
    content: "\e7e4";
}
.icon-quote-open:before {
    content: "\e7e5";
}
.icon-quote-close:before {
    content: "\e7e6";
}
.icon-dna:before {
    content: "\e7e7";
}
.icon-heart-pulse:before {
    content: "\e7e8";
}
.icon-pulse:before {
    content: "\e7e9";
}
.icon-syringe:before {
    content: "\e7ea";
}
.icon-pills:before {
    content: "\e7eb";
}
.icon-first-aid:before {
    content: "\e7ec";
}
.icon-lifebuoy:before {
    content: "\e7ed";
}
.icon-bandage:before {
    content: "\e7ee";
}
.icon-bandages:before {
    content: "\e7ef";
}
.icon-thermometer:before {
    content: "\e7f0";
}
.icon-microscope:before {
    content: "\e7f1";
}
.icon-brain:before {
    content: "\e7f2";
}
.icon-beaker:before {
    content: "\e7f3";
}
.icon-skull:before {
    content: "\e7f4";
}
.icon-bone:before {
    content: "\e7f5";
}
.icon-construction:before {
    content: "\e7f6";
}
.icon-construction-cone:before {
    content: "\e7f7";
}
.icon-pie-chart:before {
    content: "\e7f8";
}
.icon-pie-chart2:before {
    content: "\e7f9";
}
.icon-graph:before {
    content: "\e7fa";
}
.icon-chart-growth:before {
    content: "\e7fb";
}
.icon-chart-bars:before {
    content: "\e7fc";
}
.icon-chart-settings:before {
    content: "\e7fd";
}
.icon-cake:before {
    content: "\e7fe";
}
.icon-gift:before {
    content: "\e7ff";
}
.icon-balloon:before {
    content: "\e800";
}
.icon-rank:before {
    content: "\e801";
}
.icon-rank2:before {
    content: "\e802";
}
.icon-rank3:before {
    content: "\e803";
}
.icon-crown:before {
    content: "\e804";
}
.icon-lotus:before {
    content: "\e805";
}
.icon-diamond:before {
    content: "\e806";
}
.icon-diamond2:before {
    content: "\e807";
}
.icon-diamond3:before {
    content: "\e808";
}
.icon-diamond4:before {
    content: "\e809";
}
.icon-linearicons:before {
    content: "\e80a";
}
.icon-teacup:before {
    content: "\e80b";
}
.icon-teapot:before {
    content: "\e80c";
}
.icon-glass:before {
    content: "\e80d";
}
.icon-bottle2:before {
    content: "\e80e";
}
.icon-glass-cocktail:before {
    content: "\e80f";
}
.icon-glass2:before {
    content: "\e810";
}
.icon-dinner:before {
    content: "\e811";
}
.icon-dinner2:before {
    content: "\e812";
}
.icon-chef:before {
    content: "\e813";
}
.icon-scale2:before {
    content: "\e814";
}
.icon-egg:before {
    content: "\e815";
}
.icon-egg2:before {
    content: "\e816";
}
.icon-eggs:before {
    content: "\e817";
}
.icon-platter:before {
    content: "\e818";
}
.icon-steak:before {
    content: "\e819";
}
.icon-hamburger:before {
    content: "\e81a";
}
.icon-hotdog:before {
    content: "\e81b";
}
.icon-pizza:before {
    content: "\e81c";
}
.icon-sausage:before {
    content: "\e81d";
}
.icon-chicken:before {
    content: "\e81e";
}
.icon-fish:before {
    content: "\e81f";
}
.icon-carrot:before {
    content: "\e820";
}
.icon-cheese:before {
    content: "\e821";
}
.icon-bread:before {
    content: "\e822";
}
.icon-ice-cream:before {
    content: "\e823";
}
.icon-ice-cream2:before {
    content: "\e824";
}
.icon-candy:before {
    content: "\e825";
}
.icon-lollipop:before {
    content: "\e826";
}
.icon-coffee-bean:before {
    content: "\e827";
}
.icon-coffee-cup:before {
    content: "\e828";
}
.icon-cherry:before {
    content: "\e829";
}
.icon-grapes:before {
    content: "\e82a";
}
.icon-citrus:before {
    content: "\e82b";
}
.icon-apple:before {
    content: "\e82c";
}
.icon-leaf:before {
    content: "\e82d";
}
.icon-landscape:before {
    content: "\e82e";
}
.icon-pine-tree:before {
    content: "\e82f";
}
.icon-tree:before {
    content: "\e830";
}
.icon-cactus:before {
    content: "\e831";
}
.icon-paw:before {
    content: "\e832";
}
.icon-footprint:before {
    content: "\e833";
}
.icon-speed-slow:before {
    content: "\e834";
}
.icon-speed-medium:before {
    content: "\e835";
}
.icon-speed-fast:before {
    content: "\e836";
}
.icon-rocket:before {
    content: "\e837";
}
.icon-hammer2:before {
    content: "\e838";
}
.icon-balance:before {
    content: "\e839";
}
.icon-briefcase:before {
    content: "\e83a";
}
.icon-luggage-weight:before {
    content: "\e83b";
}
.icon-dolly:before {
    content: "\e83c";
}
.icon-plane:before {
    content: "\e83d";
}
.icon-plane-crossed:before {
    content: "\e83e";
}
.icon-helicopter:before {
    content: "\e83f";
}
.icon-traffic-lights:before {
    content: "\e840";
}
.icon-siren:before {
    content: "\e841";
}
.icon-road:before {
    content: "\e842";
}
.icon-engine:before {
    content: "\e843";
}
.icon-oil-pressure:before {
    content: "\e844";
}
.icon-coolant-temperature:before {
    content: "\e845";
}
.icon-car-battery:before {
    content: "\e846";
}
.icon-gas:before {
    content: "\e847";
}
.icon-gallon:before {
    content: "\e848";
}
.icon-transmission:before {
    content: "\e849";
}
.icon-car:before {
    content: "\e84a";
}
.icon-car-wash:before {
    content: "\e84b";
}
.icon-car-wash2:before {
    content: "\e84c";
}
.icon-bus:before {
    content: "\e84d";
}
.icon-bus2:before {
    content: "\e84e";
}
.icon-car2:before {
    content: "\e84f";
}
.icon-parking:before {
    content: "\e850";
}
.icon-car-lock:before {
    content: "\e851";
}
.icon-taxi:before {
    content: "\e852";
}
.icon-car-siren:before {
    content: "\e853";
}
.icon-car-wash3:before {
    content: "\e854";
}
.icon-car-wash4:before {
    content: "\e855";
}
.icon-ambulance:before {
    content: "\e856";
}
.icon-truck:before {
    content: "\e857";
}
.icon-trailer:before {
    content: "\e858";
}
.icon-scale-truck:before {
    content: "\e859";
}
.icon-train:before {
    content: "\e85a";
}
.icon-ship:before {
    content: "\e85b";
}
.icon-ship2:before {
    content: "\e85c";
}
.icon-anchor:before {
    content: "\e85d";
}
.icon-boat:before {
    content: "\e85e";
}
.icon-bicycle:before {
    content: "\e85f";
}
.icon-bicycle2:before {
    content: "\e860";
}
.icon-dumbbell:before {
    content: "\e861";
}
.icon-bench-press:before {
    content: "\e862";
}
.icon-swim:before {
    content: "\e863";
}
.icon-football:before {
    content: "\e864";
}
.icon-baseball-bat:before {
    content: "\e865";
}
.icon-baseball:before {
    content: "\e866";
}
.icon-tennis:before {
    content: "\e867";
}
.icon-tennis2:before {
    content: "\e868";
}
.icon-ping-pong:before {
    content: "\e869";
}
.icon-hockey:before {
    content: "\e86a";
}
.icon-8ball:before {
    content: "\e86b";
}
.icon-bowling:before {
    content: "\e86c";
}
.icon-bowling-pins:before {
    content: "\e86d";
}
.icon-golf:before {
    content: "\e86e";
}
.icon-golf2:before {
    content: "\e86f";
}
.icon-archery:before {
    content: "\e870";
}
.icon-slingshot:before {
    content: "\e871";
}
.icon-soccer:before {
    content: "\e872";
}
.icon-basketball:before {
    content: "\e873";
}
.icon-cube:before {
    content: "\e874";
}
.icon-3d-rotate:before {
    content: "\e875";
}
.icon-puzzle:before {
    content: "\e876";
}
.icon-glasses:before {
    content: "\e877";
}
.icon-glasses2:before {
    content: "\e878";
}
.icon-accessibility:before {
    content: "\e879";
}
.icon-wheelchair:before {
    content: "\e87a";
}
.icon-wall:before {
    content: "\e87b";
}
.icon-fence:before {
    content: "\e87c";
}
.icon-wall2:before {
    content: "\e87d";
}
.icon-icons:before {
    content: "\e87e";
}
.icon-resize-handle:before {
    content: "\e87f";
}
.icon-icons2:before {
    content: "\e880";
}
.icon-select:before {
    content: "\e881";
}
.icon-select2:before {
    content: "\e882";
}
.icon-site-map:before {
    content: "\e883";
}
.icon-earth:before {
    content: "\e884";
}
.icon-earth-lock:before {
    content: "\e885";
}
.icon-network:before {
    content: "\e886";
}
.icon-network-lock:before {
    content: "\e887";
}
.icon-planet:before {
    content: "\e888";
}
.icon-happy:before {
    content: "\e889";
}
.icon-smile:before {
    content: "\e88a";
}
.icon-grin:before {
    content: "\e88b";
}
.icon-tongue:before {
    content: "\e88c";
}
.icon-sad:before {
    content: "\e88d";
}
.icon-wink:before {
    content: "\e88e";
}
.icon-dream:before {
    content: "\e88f";
}
.icon-shocked:before {
    content: "\e890";
}
.icon-shocked2:before {
    content: "\e891";
}
.icon-tongue2:before {
    content: "\e892";
}
.icon-neutral:before {
    content: "\e893";
}
.icon-happy-grin:before {
    content: "\e894";
}
.icon-cool:before {
    content: "\e895";
}
.icon-mad:before {
    content: "\e896";
}
.icon-grin-evil:before {
    content: "\e897";
}
.icon-evil:before {
    content: "\e898";
}
.icon-wow:before {
    content: "\e899";
}
.icon-annoyed:before {
    content: "\e89a";
}
.icon-wondering:before {
    content: "\e89b";
}
.icon-confused:before {
    content: "\e89c";
}
.icon-zipped:before {
    content: "\e89d";
}
.icon-grumpy:before {
    content: "\e89e";
}
.icon-mustache:before {
    content: "\e89f";
}
.icon-tombstone-hipster:before {
    content: "\e8a0";
}
.icon-tombstone:before {
    content: "\e8a1";
}
.icon-ghost:before {
    content: "\e8a2";
}
.icon-ghost-hipster:before {
    content: "\e8a3";
}
.icon-halloween:before {
    content: "\e8a4";
}
.icon-christmas:before {
    content: "\e8a5";
}
.icon-easter-egg:before {
    content: "\e8a6";
}
.icon-mustache2:before {
    content: "\e8a7";
}
.icon-mustache-glasses:before {
    content: "\e8a8";
}
.icon-pipe:before {
    content: "\e8a9";
}
.icon-alarm:before {
    content: "\e8aa";
}
.icon-alarm-add:before {
    content: "\e8ab";
}
.icon-alarm-snooze:before {
    content: "\e8ac";
}
.icon-alarm-ringing:before {
    content: "\e8ad";
}
.icon-bullhorn:before {
    content: "\e8ae";
}
.icon-hearing:before {
    content: "\e8af";
}
.icon-volume-high:before {
    content: "\e8b0";
}
.icon-volume-medium:before {
    content: "\e8b1";
}
.icon-volume-low:before {
    content: "\e8b2";
}
.icon-volume:before {
    content: "\e8b3";
}
.icon-mute:before {
    content: "\e8b4";
}
.icon-lan:before {
    content: "\e8b5";
}
.icon-lan2:before {
    content: "\e8b6";
}
.icon-wifi:before {
    content: "\e8b7";
}
.icon-wifi-lock:before {
    content: "\e8b8";
}
.icon-wifi-blocked:before {
    content: "\e8b9";
}
.icon-wifi-mid:before {
    content: "\e8ba";
}
.icon-wifi-low:before {
    content: "\e8bb";
}
.icon-wifi-low2:before {
    content: "\e8bc";
}
.icon-wifi-alert:before {
    content: "\e8bd";
}
.icon-wifi-alert-mid:before {
    content: "\e8be";
}
.icon-wifi-alert-low:before {
    content: "\e8bf";
}
.icon-wifi-alert-low2:before {
    content: "\e8c0";
}
.icon-stream:before {
    content: "\e8c1";
}
.icon-stream-check:before {
    content: "\e8c2";
}
.icon-stream-error:before {
    content: "\e8c3";
}
.icon-stream-alert:before {
    content: "\e8c4";
}
.icon-communication:before {
    content: "\e8c5";
}
.icon-communication-crossed:before {
    content: "\e8c6";
}
.icon-broadcast:before {
    content: "\e8c7";
}
.icon-antenna:before {
    content: "\e8c8";
}
.icon-satellite:before {
    content: "\e8c9";
}
.icon-satellite2:before {
    content: "\e8ca";
}
.icon-mic:before {
    content: "\e8cb";
}
.icon-mic-mute:before {
    content: "\e8cc";
}
.icon-mic2:before {
    content: "\e8cd";
}
.icon-spotlights:before {
    content: "\e8ce";
}
.icon-hourglass:before {
    content: "\e8cf";
}
.icon-loading:before {
    content: "\e8d0";
}
.icon-loading2:before {
    content: "\e8d1";
}
.icon-loading3:before {
    content: "\e8d2";
}
.icon-refresh:before {
    content: "\e8d3";
}
.icon-refresh2:before {
    content: "\e8d4";
}
.icon-undo:before {
    content: "\e8d5";
}
.icon-redo:before {
    content: "\e8d6";
}
.icon-jump2:before {
    content: "\e8d7";
}
.icon-undo2:before {
    content: "\e8d8";
}
.icon-redo2:before {
    content: "\e8d9";
}
.icon-sync:before {
    content: "\e8da";
}
.icon-repeat-one2:before {
    content: "\e8db";
}
.icon-sync-crossed:before {
    content: "\e8dc";
}
.icon-sync2:before {
    content: "\e8dd";
}
.icon-repeat-one3:before {
    content: "\e8de";
}
.icon-sync-crossed2:before {
    content: "\e8df";
}
.icon-return:before {
    content: "\e8e0";
}
.icon-return2:before {
    content: "\e8e1";
}
.icon-refund:before {
    content: "\e8e2";
}
.icon-history:before {
    content: "\e8e3";
}
.icon-history2:before {
    content: "\e8e4";
}
.icon-self-timer:before {
    content: "\e8e5";
}
.icon-clock:before {
    content: "\e8e6";
}
.icon-clock2:before {
    content: "\e8e7";
}
.icon-clock3:before {
    content: "\e8e8";
}
.icon-watch:before {
    content: "\e8e9";
}
.icon-alarm2:before {
    content: "\e8ea";
}
.icon-alarm-add2:before {
    content: "\e8eb";
}
.icon-alarm-remove:before {
    content: "\e8ec";
}
.icon-alarm-check:before {
    content: "\e8ed";
}
.icon-alarm-error:before {
    content: "\e8ee";
}
.icon-timer:before {
    content: "\e8ef";
}
.icon-timer-crossed:before {
    content: "\e8f0";
}
.icon-timer2:before {
    content: "\e8f1";
}
.icon-timer-crossed2:before {
    content: "\e8f2";
}
.icon-download:before {
    content: "\e8f3";
}
.icon-upload:before {
    content: "\e8f4";
}
.icon-download2:before {
    content: "\e8f5";
}
.icon-upload2:before {
    content: "\e8f6";
}
.icon-enter-up:before {
    content: "\e8f7";
}
.icon-enter-down:before {
    content: "\e8f8";
}
.icon-enter-left:before {
    content: "\e8f9";
}
.icon-enter-right:before {
    content: "\e8fa";
}
.icon-exit-up:before {
    content: "\e8fb";
}
.icon-exit-down:before {
    content: "\e8fc";
}
.icon-exit-left:before {
    content: "\e8fd";
}
.icon-exit-right:before {
    content: "\e8fe";
}
.icon-enter-up2:before {
    content: "\e8ff";
}
.icon-enter-down2:before {
    content: "\e900";
}
.icon-enter-vertical:before {
    content: "\e901";
}
.icon-enter-left2:before {
    content: "\e902";
}
.icon-enter-right2:before {
    content: "\e903";
}
.icon-enter-horizontal:before {
    content: "\e904";
}
.icon-exit-up2:before {
    content: "\e905";
}
.icon-exit-down2:before {
    content: "\e906";
}
.icon-exit-left2:before {
    content: "\e907";
}
.icon-exit-right2:before {
    content: "\e908";
}
.icon-cli:before {
    content: "\e909";
}
.icon-bug:before {
    content: "\e90a";
}
.icon-code:before {
    content: "\e90b";
}
.icon-file-code:before {
    content: "\e90c";
}
.icon-file-image:before {
    content: "\e90d";
}
.icon-file-zip:before {
    content: "\e90e";
}
.icon-file-audio:before {
    content: "\e90f";
}
.icon-file-video:before {
    content: "\e910";
}
.icon-file-preview:before {
    content: "\e911";
}
.icon-file-charts:before {
    content: "\e912";
}
.icon-file-stats:before {
    content: "\e913";
}
.icon-file-spreadsheet:before {
    content: "\e914";
}
.icon-link:before {
    content: "\e915";
}
.icon-unlink:before {
    content: "\e916";
}
.icon-link2:before {
    content: "\e917";
}
.icon-unlink2:before {
    content: "\e918";
}
.icon-thumbs-up:before {
    content: "\e919";
}
.icon-thumbs-down:before {
    content: "\e91a";
}
.icon-thumbs-up2:before {
    content: "\e91b";
}
.icon-thumbs-down2:before {
    content: "\e91c";
}
.icon-thumbs-up3:before {
    content: "\e91d";
}
.icon-thumbs-down3:before {
    content: "\e91e";
}
.icon-share:before {
    content: "\e91f";
}
.icon-share2:before {
    content: "\e920";
}
.icon-share3:before {
    content: "\e921";
}
.icon-magnifier:before {
    content: "\e922";
}
.icon-file-search:before {
    content: "\e923";
}
.icon-find-replace:before {
    content: "\e924";
}
.icon-zoom-in:before {
    content: "\e925";
}
.icon-zoom-out:before {
    content: "\e926";
}
.icon-loupe:before {
    content: "\e927";
}
.icon-loupe-zoom-in:before {
    content: "\e928";
}
.icon-loupe-zoom-out:before {
    content: "\e929";
}
.icon-cross:before {
    content: "\e92a";
}
.icon-menu:before {
    content: "\e92b";
}
.icon-list:before {
    content: "\e92c";
}
.icon-list2:before {
    content: "\e92d";
}
.icon-list3:before {
    content: "\e92e";
}
.icon-menu2:before {
    content: "\e92f";
}
.icon-list4:before {
    content: "\e930";
}
.icon-menu3:before {
    content: "\e931";
}
.icon-exclamation:before {
    content: "\e932";
}
.icon-question:before {
    content: "\e933";
}
.icon-check:before {
    content: "\e934";
}
.icon-cross2:before {
    content: "\e935";
}
.icon-plus:before {
    content: "\e936";
}
.icon-minus:before {
    content: "\e937";
}
.icon-percent:before {
    content: "\e938";
}
.icon-chevron-up:before {
    content: "\e939";
}
.icon-chevron-down:before {
    content: "\e93a";
}
.icon-chevron-left:before {
    content: "\e93b";
}
.icon-chevron-right:before {
    content: "\e93c";
}
.icon-chevrons-expand-vertical:before {
    content: "\e93d";
}
.icon-chevrons-expand-horizontal:before {
    content: "\e93e";
}
.icon-chevrons-contract-vertical:before {
    content: "\e93f";
}
.icon-chevrons-contract-horizontal:before {
    content: "\e940";
}
.icon-arrow-up:before {
    content: "\e941";
}
.icon-arrow-down:before {
    content: "\e942";
}
.icon-arrow-left:before {
    content: "\e943";
}
.icon-arrow-right:before {
    content: "\e944";
}
.icon-arrow-up-right:before {
    content: "\e945";
}
.icon-arrows-merge:before {
    content: "\e946";
}
.icon-arrows-split:before {
    content: "\e947";
}
.icon-arrow-divert:before {
    content: "\e948";
}
.icon-arrow-return:before {
    content: "\e949";
}
.icon-expand:before {
    content: "\e94a";
}
.icon-contract:before {
    content: "\e94b";
}
.icon-expand2:before {
    content: "\e94c";
}
.icon-contract2:before {
    content: "\e94d";
}
.icon-move:before {
    content: "\e94e";
}
.icon-tab:before {
    content: "\e94f";
}
.icon-arrow-wave:before {
    content: "\e950";
}
.icon-expand3:before {
    content: "\e951";
}
.icon-expand4:before {
    content: "\e952";
}
.icon-contract3:before {
    content: "\e953";
}
.icon-notification:before {
    content: "\e954";
}
.icon-warning:before {
    content: "\e955";
}
.icon-notification-circle:before {
    content: "\e956";
}
.icon-question-circle:before {
    content: "\e957";
}
.icon-menu-circle:before {
    content: "\e958";
}
.icon-checkmark-circle:before {
    content: "\e959";
}
.icon-cross-circle:before {
    content: "\e95a";
}
.icon-plus-circle:before {
    content: "\e95b";
}
.icon-circle-minus:before {
    content: "\e95c";
}
.icon-percent-circle:before {
    content: "\e95d";
}
.icon-arrow-up-circle:before {
    content: "\e95e";
}
.icon-arrow-down-circle:before {
    content: "\e95f";
}
.icon-arrow-left-circle:before {
    content: "\e960";
}
.icon-arrow-right-circle:before {
    content: "\e961";
}
.icon-chevron-up-circle:before {
    content: "\e962";
}
.icon-chevron-down-circle:before {
    content: "\e963";
}
.icon-chevron-left-circle:before {
    content: "\e964";
}
.icon-chevron-right-circle:before {
    content: "\e965";
}
.icon-backward-circle:before {
    content: "\e966";
}
.icon-first-circle:before {
    content: "\e967";
}
.icon-previous-circle:before {
    content: "\e968";
}
.icon-stop-circle:before {
    content: "\e969";
}
.icon-play-circle:before {
    content: "\e96a";
}
.icon-pause-circle:before {
    content: "\e96b";
}
.icon-next-circle:before {
    content: "\e96c";
}
.icon-last-circle:before {
    content: "\e96d";
}
.icon-forward-circle:before {
    content: "\e96e";
}
.icon-eject-circle:before {
    content: "\e96f";
}
.icon-crop:before {
    content: "\e970";
}
.icon-frame-expand:before {
    content: "\e971";
}
.icon-frame-contract:before {
    content: "\e972";
}
.icon-focus:before {
    content: "\e973";
}
.icon-transform:before {
    content: "\e974";
}
.icon-grid:before {
    content: "\e975";
}
.icon-grid-crossed:before {
    content: "\e976";
}
.icon-layers:before {
    content: "\e977";
}
.icon-layers-crossed:before {
    content: "\e978";
}
.icon-toggle:before {
    content: "\e979";
}
.icon-rulers:before {
    content: "\e97a";
}
.icon-ruler:before {
    content: "\e97b";
}
.icon-funnel:before {
    content: "\e97c";
}
.icon-flip-horizontal:before {
    content: "\e97d";
}
.icon-flip-vertical:before {
    content: "\e97e";
}
.icon-flip-horizontal2:before {
    content: "\e97f";
}
.icon-flip-vertical2:before {
    content: "\e980";
}
.icon-angle:before {
    content: "\e981";
}
.icon-angle2:before {
    content: "\e982";
}
.icon-subtract:before {
    content: "\e983";
}
.icon-combine:before {
    content: "\e984";
}
.icon-intersect:before {
    content: "\e985";
}
.icon-exclude:before {
    content: "\e986";
}
.icon-align-center-vertical:before {
    content: "\e987";
}
.icon-align-right:before {
    content: "\e988";
}
.icon-align-bottom:before {
    content: "\e989";
}
.icon-align-left:before {
    content: "\e98a";
}
.icon-align-center-horizontal:before {
    content: "\e98b";
}
.icon-align-top:before {
    content: "\e98c";
}
.icon-square:before {
    content: "\e98d";
}
.icon-plus-square:before {
    content: "\e98e";
}
.icon-minus-square:before {
    content: "\e98f";
}
.icon-percent-square:before {
    content: "\e990";
}
.icon-arrow-up-square:before {
    content: "\e991";
}
.icon-arrow-down-square:before {
    content: "\e992";
}
.icon-arrow-left-square:before {
    content: "\e993";
}
.icon-arrow-right-square:before {
    content: "\e994";
}
.icon-chevron-up-square:before {
    content: "\e995";
}
.icon-chevron-down-square:before {
    content: "\e996";
}
.icon-chevron-left-square:before {
    content: "\e997";
}
.icon-chevron-right-square:before {
    content: "\e998";
}
.icon-check-square:before {
    content: "\e999";
}
.icon-cross-square:before {
    content: "\e99a";
}
.icon-menu-square:before {
    content: "\e99b";
}
.icon-prohibited:before {
    content: "\e99c";
}
.icon-circle:before {
    content: "\e99d";
}
.icon-radio-button:before {
    content: "\e99e";
}
.icon-ligature:before {
    content: "\e99f";
}
.icon-text-format:before {
    content: "\e9a0";
}
.icon-text-format-remove:before {
    content: "\e9a1";
}
.icon-text-size:before {
    content: "\e9a2";
}
.icon-bold:before {
    content: "\e9a3";
}
.icon-italic:before {
    content: "\e9a4";
}
.icon-underline:before {
    content: "\e9a5";
}
.icon-strikethrough:before {
    content: "\e9a6";
}
.icon-highlight:before {
    content: "\e9a7";
}
.icon-text-align-left:before {
    content: "\e9a8";
}
.icon-text-align-center:before {
    content: "\e9a9";
}
.icon-text-align-right:before {
    content: "\e9aa";
}
.icon-text-align-justify:before {
    content: "\e9ab";
}
.icon-line-spacing:before {
    content: "\e9ac";
}
.icon-indent-increase:before {
    content: "\e9ad";
}
.icon-indent-decrease:before {
    content: "\e9ae";
}
.icon-text-wrap:before {
    content: "\e9af";
}
.icon-pilcrow:before {
    content: "\e9b0";
}
.icon-direction-ltr:before {
    content: "\e9b1";
}
.icon-direction-rtl:before {
    content: "\e9b2";
}
.icon-page-break:before {
    content: "\e9b3";
}
.icon-page-break2:before {
    content: "\e9b4";
}
.icon-sort-alpha-asc:before {
    content: "\e9b5";
}
.icon-sort-alpha-desc:before {
    content: "\e9b6";
}
.icon-sort-numeric-asc:before {
    content: "\e9b7";
}
.icon-sort-numeric-desc:before {
    content: "\e9b8";
}
.icon-sort-amount-asc:before {
    content: "\e9b9";
}
.icon-sort-amount-desc:before {
    content: "\e9ba";
}
.icon-sort-time-asc:before {
    content: "\e9bb";
}
.icon-sort-time-desc:before {
    content: "\e9bc";
}
.icon-sigma:before {
    content: "\e9bd";
}
.icon-pencil-line:before {
    content: "\e9be";
}
.icon-hand:before {
    content: "\e9bf";
}
.icon-pointer-up:before {
    content: "\e9c0";
}
.icon-pointer-right:before {
    content: "\e9c1";
}
.icon-pointer-down:before {
    content: "\e9c2";
}
.icon-pointer-left:before {
    content: "\e9c3";
}
.icon-finger-tap:before {
    content: "\e9c4";
}
.icon-fingers-tap:before {
    content: "\e9c5";
}
.icon-reminder:before {
    content: "\e9c6";
}
.icon-fingers-crossed:before {
    content: "\e9c7";
}
.icon-fingers-victory:before {
    content: "\e9c8";
}
.icon-gesture-zoom:before {
    content: "\e9c9";
}
.icon-gesture-pinch:before {
    content: "\e9ca";
}
.icon-fingers-scroll-horizontal:before {
    content: "\e9cb";
}
.icon-fingers-scroll-vertical:before {
    content: "\e9cc";
}
.icon-fingers-scroll-left:before {
    content: "\e9cd";
}
.icon-fingers-scroll-right:before {
    content: "\e9ce";
}
.icon-hand2:before {
    content: "\e9cf";
}
.icon-pointer-up2:before {
    content: "\e9d0";
}
.icon-pointer-right2:before {
    content: "\e9d1";
}
.icon-pointer-down2:before {
    content: "\e9d2";
}
.icon-pointer-left2:before {
    content: "\e9d3";
}
.icon-finger-tap2:before {
    content: "\e9d4";
}
.icon-fingers-tap2:before {
    content: "\e9d5";
}
.icon-reminder2:before {
    content: "\e9d6";
}
.icon-gesture-zoom2:before {
    content: "\e9d7";
}
.icon-gesture-pinch2:before {
    content: "\e9d8";
}
.icon-fingers-scroll-horizontal2:before {
    content: "\e9d9";
}
.icon-fingers-scroll-vertical2:before {
    content: "\e9da";
}
.icon-fingers-scroll-left2:before {
    content: "\e9db";
}
.icon-fingers-scroll-right2:before {
    content: "\e9dc";
}
.icon-fingers-scroll-vertical3:before {
    content: "\e9dd";
}
.icon-border-style:before {
    content: "\e9de";
}
.icon-border-all:before {
    content: "\e9df";
}
.icon-border-outer:before {
    content: "\e9e0";
}
.icon-border-inner:before {
    content: "\e9e1";
}
.icon-border-top:before {
    content: "\e9e2";
}
.icon-border-horizontal:before {
    content: "\e9e3";
}
.icon-border-bottom:before {
    content: "\e9e4";
}
.icon-border-left:before {
    content: "\e9e5";
}
.icon-border-vertical:before {
    content: "\e9e6";
}
.icon-border-right:before {
    content: "\e9e7";
}
.icon-border-none:before {
    content: "\e9e8";
}
.icon-ellipsis:before {
    content: "\e9e9";
}


/* MARK: SSSocialCircle
----------------------------------------------- */
/* This triggers a redraw in IE to Fix IE8's :before content rendering. */
html:hover [class^="ss-"]{-ms-zoom: 1;}

.ss-icon, .ss-icon.ss-social-circle, .at4-share-btn,
[class^="ss-"]:before, [class*=" ss-"]:before,
[class^="ss-"].ss-social-circle:before, [class*=" ss-"].ss-social-circle:before,
[class^="ss-"].right:after, [class*=" ss-"].right:after,
[class^="ss-"].ss-social-circle.right:after, [class*=" ss-"].ss-social-circle.right:after {
  font-family: "SSSocialCircle";
  font-style: normal;
  font-weight: normal;
  text-decoration: none;
  text-rendering: optimizeLegibility;
  white-space: nowrap;
  -ms-font-feature-settings: "liga" 1;
  -o-font-feature-settings: "liga";
  font-feature-settings: "liga";
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

[class^="ss-"].right:before,
[class*=" ss-"].right:before{display:none;content:'';}

.ss-facebook:before,.ss-facebook.right:after{content:''}.ss-twitter:before,.ss-twitter.right:after{content:''}.ss-googleplus:before,.ss-googleplus.right:after{content:''}.ss-appdotnet:before,.ss-appdotnet.right:after{content:''}.ss-ello:before,.ss-ello.right:after{content:''}.ss-aboutme:before,.ss-aboutme.right:after{content:''}.ss-vk:before,.ss-vk.right:after{content:''}.ss-weibo:before,.ss-weibo.right:after{content:''}.ss-linkedin:before,.ss-linkedin.right:after{content:''}.ss-zerply:before,.ss-zerply.right:after{content:''}.ss-xing:before,.ss-xing.right:after{content:''}.ss-reddit:before,.ss-reddit.right:after{content:''}.ss-steam:before,.ss-steam.right:after{content:''}.ss-tumblr:before,.ss-tumblr.right:after{content:''}.ss-wordpress:before,.ss-wordpress.right:after{content:''}.ss-blogger:before,.ss-blogger.right:after{content:''}.ss-quora:before,.ss-quora.right:after{content:''}.ss-youtube:before,.ss-youtube.right:after{content:''}.ss-vimeo:before,.ss-vimeo.right:after{content:''}.ss-vine:before,.ss-vine.right:after{content:''}.ss-letterboxd:before,.ss-letterboxd.right:after{content:''}.ss-flickr:before,.ss-flickr.right:after{content:''}.ss-instagram:before,.ss-instagram.right:after{content:''}.ss-vscogrid:before,.ss-vscogrid.right:after{content:''}.ss-fivehundredpx:before,.ss-fivehundredpx.right:after{content:''}.ss-feedly:before,.ss-feedly.right:after{content:''}.ss-pinterest:before,.ss-pinterest.right:after{content:''}.ss-dropbox:before,.ss-dropbox.right:after{content:''}.ss-pinboard:before,.ss-pinboard.right:after{content:''}.ss-delicious:before,.ss-delicious.right:after{content:''}.ss-dribbble:before,.ss-dribbble.right:after{content:''}.ss-behance:before,.ss-behance.right:after{content:''}.ss-github:before,.ss-github.right:after{content:''}.ss-bitbucket:before,.ss-bitbucket.right:after{content:''}.ss-stackoverflow:before,.ss-stackoverflow.right:after{content:''}.ss-stackexchange:before,.ss-stackexchange.right:after{content:''}.ss-codepen:before,.ss-codepen.right:after{content:''}.ss-jsfiddle:before,.ss-jsfiddle.right:after{content:''}.ss-paypal:before,.ss-paypal.right:after{content:''}.ss-shopify:before,.ss-shopify.right:after{content:''}.ss-kickstarter:before,.ss-kickstarter.right:after{content:''}.ss-etsy:before,.ss-etsy.right:after{content:''}.ss-foursquare:before,.ss-foursquare.right:after{content:''}.ss-swarm:before,.ss-swarm.right:after{content:''}.ss-yelp:before,.ss-yelp.right:after{content:''}.ss-skype:before,.ss-skype.right:after{content:''}.ss-whatsapp:before,.ss-whatsapp.right:after{content:''}.ss-rdio:before,.ss-rdio.right:after{content:''}.ss-spotify:before,.ss-spotify.right:after{content:''}.ss-lastfm:before,.ss-lastfm.right:after{content:''}.ss-soundcloud:before,.ss-soundcloud.right:after{content:''}.ss-appstore:before,.ss-appstore.right:after{content:''}.ss-googleplay:before,.ss-googleplay.right:after{content:''}.ss-appleinc:before,.ss-appleinc.right:after{content:''}.ss-microsoft:before,.ss-microsoft.right:after{content:''}.ss-windows:before,.ss-windows.right:after{content:''}.ss-android:before,.ss-android.right:after{content:''}.ss-blackberry:before,.ss-blackberry.right:after{content:''}.ss-link:before,.ss-link.right:after{content:'🔗'}.ss-phone:before,.ss-phone.right:after{content:'📞'}.ss-mail:before,.ss-mail.right:after{content:'✉'}.ss-like:before,.ss-like.right:after{content:'👍'}.ss-rss:before,.ss-rss.right:after{content:''}.ss-share:before,.ss-share.right:after{content:''}

/* =========================================================
	PRINT
========================================================= */
@media print {
	* {
		box-shadow: none !important;
		background: transparent !important;
		color: #000 !important;
		text-shadow: none !important;
	}

	a,
	a:visited {
		text-decoration: underline;
	}

	a[href]:after {
		content: " (" attr(href) ")";
	}

	abbr[title]:after {
		content: " (" attr(title) ")";
	}

	.ir a:after,
	a[href^="javascript:"]:after,
	a[href^="#"]:after {
		content: "";
	}

	pre,
	blockquote {
		border: 1px solid #999;
		page-break-inside: avoid;
	}

	thead {
		display: table-header-group;
	}

	tr,
	img {
		page-break-inside: avoid;
	}

	img {
		max-width: 100% !important;
	}

	@page {
		margin: 0.5cm;
	}

	p,
	h2,
	h3 {
		orphans: 3;
		widows: 3;
	}

	h2,
	h3 {
		page-break-after: avoid;
	}
}

/* =========================================================
	VIDEO EMBED UTILITY
	Example HTML:
	<div class="video-embed">
		<iframe...>
	</div>
========================================================= */
.video-embed > iframe {
	aspect-ratio: 16 / 9;
	width: 100%;
	height: 100%;
}

/* ========================================================================
   UIKit v3 - Modal Component
   Extracted from node_modules/uikit/dist/css/uikit-core.css
   ========================================================================== */

/*
 * 1. Hide by default
 * 2. Set position
 * 3. Allow scrolling for the modal dialog
 * 4. Horizontal padding
 * 5. Mask the background page
 * 6. Fade-in transition
 */
.uk-modal {
  /* 1 */
  display: none;
  /* 2 */
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 1010;
  /* 3 */
  overflow-y: auto;
  /* 4 */
  padding: 15px 15px;
  /* 5 */
  background: rgba(0, 0, 0, 0.6);
  /* 6 */
  opacity: 0;
  transition: opacity 0.15s linear;
}

/* Phone landscape and bigger */
@media (min-width: 640px) {
  .uk-modal {
    padding: 50px 30px;
  }
}

/* Tablet landscape and bigger */
@media (min-width: 960px) {
  .uk-modal {
    padding-left: 40px;
    padding-right: 40px;
  }
}

/*
 * Open
 */
.uk-modal.uk-open {
  opacity: 1;
}

/* Page
 ========================================================================== */
/*
 * Prevent scrollbars
 */
.uk-modal-page {
  overflow: hidden;
}

/* Dialog
 ========================================================================== */
/*
 * 1. Create position context for spinner and close button
 * 2. Dimensions
 * 3. `!important` is needed to overwrite `uk-width-auto`. See `#modal-media-image` in tests
 * 4. Style
 * 5. Slide-in transition
 */
.uk-modal-dialog {
  /* 1 */
  position: relative;
  /* 2 */
  box-sizing: border-box;
  margin: 0 auto;
  width: 600px;
  /* 3 */
  max-width: 100% !important;
  /* 4 */
  background: #fff;
  /* 5 */
  opacity: 0;
  transform: translateY(-100px);
  transition: 0.3s linear;
  transition-property: opacity, transform;
}

/*
 * Open
 */
.uk-open > .uk-modal-dialog {
  opacity: 1;
  transform: translateY(0);
}

/* Size modifier
 ========================================================================== */
/*
 * Container size
 * Take the same size as the Container component
 */
.uk-modal-container .uk-modal-dialog {
  width: 1200px;
}

/*
 * Full size
 * 1. Remove padding and background from modal
 * 2. Reset all default declarations from modal dialog
 */
/* 1 */
.uk-modal-full {
  padding: 0;
  background: none;
}

/* 2 */
.uk-modal-full .uk-modal-dialog {
  margin: 0;
  width: 100%;
  max-width: 100%;
  transform: translateY(0);
}

/* Sections
 ========================================================================== */
.uk-modal-body {
  display: flow-root;
  padding: 20px 20px;
}

.uk-modal-header {
  display: flow-root;
  padding: 10px 20px;
  background: #f8f8f8;
}

.uk-modal-footer {
  display: flow-root;
  padding: 10px 20px;
  background: #f8f8f8;
}

/* Phone landscape and bigger */
@media (min-width: 640px) {
  .uk-modal-body {
    padding: 30px 30px;
  }
  .uk-modal-header {
    padding: 15px 30px;
  }
  .uk-modal-footer {
    padding: 15px 30px;
  }
}

/*
 * Remove margin from the last-child
 */
.uk-modal-body > :last-child,
.uk-modal-header > :last-child,
.uk-modal-footer > :last-child {
  margin-bottom: 0;
}

/* Title
 ========================================================================== */
.uk-modal-title {
  font-size: 2rem;
  line-height: 1.3;
}

/* Close
 * Adopts `uk-close`
 ========================================================================== */
[class*="uk-modal-close-"] {
  position: absolute;
  z-index: 1010;
  top: 10px;
  right: 10px;
  padding: 5px;
}

/*
 * Remove margin from adjacent element
 */
[class*="uk-modal-close-"]:first-child + * {
  margin-top: 0;
}

/*
 * Outside
 * 1. Prevent scrollbar on small devices
 */
.uk-modal-close-outside {
  top: 0;
  /* 1 */
  right: -5px;
  transform: translate(0, -100%);
  color: #ffffff;
}

.uk-modal-close-outside:hover {
  color: #fff;
}

/* Tablet landscape and bigger */
@media (min-width: 960px) {
  /* 1 */
  .uk-modal-close-outside {
    right: 0;
    transform: translate(100%, -100%);
  }
}

/* =========================================================
	LIGHT SLIDER
	Legacy / previous dev
========================================================= */
/*! lightslider - v1.1.6 - 2016-10-25
* https://github.com/sachinchoolur/lightslider
* Copyright (c) 2016 Sachin N; Licensed MIT */
/*! lightslider - v1.1.3 - 2015-04-14
* https://github.com/sachinchoolur/lightslider
* Copyright (c) 2015 Sachin N; Licensed MIT */
/** /!!! core css Should not edit !!!/**/

.lSSlideOuter {
    overflow: hidden;
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    user-select: none
}
.lightSlider:before, .lightSlider:after {
    content: " ";
    display: table;
}
.lightSlider {
    overflow: hidden;
    margin: 0;
}
.lSSlideWrapper {
    max-width: 100%;
    overflow: hidden;
    position: relative;
}

.lSSlideWrapper > .lightSlider:after {
    clear: both;
}
.lSSlideWrapper .lSSlide {
    transform: translate(0px, 0px);
    -webkit-transition: all 1s;
    transition-property: transform,height;
    transition-duration: inherit !important;
    transition-timing-function: inherit !important;
}
.lSSlideWrapper .lSFade {
    position: relative;
}
.lSSlideWrapper .lSFade > * {
    position: absolute !important;
    top: 0;
    left: 0;
    z-index: 9;
    margin-right: 0;
    width: 100%;
}
.lSSlideWrapper.usingCss .lSFade > * {
    opacity: 0;
    transition-delay: 0s;
    transition-duration: inherit !important;
    transition-property: opacity;
    transition-timing-function: inherit !important;
}
.lSSlideWrapper .lSFade > *.active {
    z-index: 10;
}
.lSSlideWrapper.usingCss .lSFade > *.active {
    opacity: 1;
}
/** /!!! End of core css Should not edit !!!/**/

/* Pager */
.lSSlideOuter .lSPager.lSpg {
    margin: 10px 0 0;
    padding: 0;
    text-align: center;
}
.lSSlideOuter .lSPager.lSpg > li {
    cursor: pointer;
    display: inline-block;
    padding: 0 5px;
}
.lSSlideOuter .lSPager.lSpg > li a {
    background-color: #222222;
    border-radius: 30px;
    display: inline-block;
    height: 8px;
    overflow: hidden;
    text-indent: -999em;
    width: 8px;
    position: relative;
    z-index: 99;
    transition: all 0.5s linear 0s;
}
.lSSlideOuter .lSPager.lSpg > li:hover a, .lSSlideOuter .lSPager.lSpg > li.active a {
    background-color: #428bca;
}
.lSSlideOuter .media {
    opacity: 0.8;
}
.lSSlideOuter .media.active {
    opacity: 1;
}
/* End of pager */

/** Gallery */
.lSSlideOuter .lSPager.lSGallery {
    list-style: none outside none;
    padding-left: 0;
    margin: 0;
    overflow: hidden;
    transform: translate3d(0px, 0px, 0px);
    -moz-transform: translate3d(0px, 0px, 0px);
    -ms-transform: translate3d(0px, 0px, 0px);
    -webkit-transform: translate3d(0px, 0px, 0px);
    -o-transform: translate3d(0px, 0px, 0px);
    -webkit-transition-property: -webkit-transform;
    -moz-transition-property: -moz-transform;
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    user-select: none;
}
.lSSlideOuter .lSPager.lSGallery li {
    overflow: hidden;
    transition: border-radius 0.12s linear 0s 0.35s linear 0s;
}
.lSSlideOuter .lSPager.lSGallery li.active, .lSSlideOuter .lSPager.lSGallery li:hover {
    border-radius: 5px;
}
.lSSlideOuter .lSPager.lSGallery img {
    display: block;
    height: auto;
    max-width: 100%;
}
.lSSlideOuter .lSPager.lSGallery:before, .lSSlideOuter .lSPager.lSGallery:after {
    content: " ";
    display: table;
}
.lSSlideOuter .lSPager.lSGallery:after {
    clear: both;
}

.lightSlider li {
	position: relative;
	transition: 0.4s all ease;
}

.lightSlider li:hover {
	opacity: .5;
}

.content .lightSlider li:before {
	content: '';
}
/* End of Gallery*/

/* slider actions */

.lSAction > a {
    width: 42px;
    display: block;
    top: 50%;
    height: 42px;
    padding-top: 15px;
    padding-bottom: 15px;
    cursor: pointer;
    position: absolute;
    z-index: 99;
    margin-top: -32px;
    transition: opacity 0.35s linear 0s;
    font-size: 30px;
    color: #fff;
    	text-shadow: 0 0 3px rgba(3, 3, 3, 0.81);
    	line-height: 50px;
}

.page-store-list .lSAction > a {
	color: #9db0bd;
	text-shadow: none;
}

.lSAction > a:hover {
    opacity: 1;
    background-color: #9db0bd;
}

.page-store-list .lSAction > a:hover {
	background-color: #434c54;
}

.lSAction > .lSPrev {
    left: 0px;
}
.lSAction > .lSNext {
    right: 0px;
}

.page-store-list .lSAction > .lSPrev {
    left: -15px;
}
.page-store-list .lSAction > .lSNext {
    right: -15px;
}

.lSAction > a.disabled {
    pointer-events: none;
}
.cS-hidden {
    height: 1px;
    opacity: 0;
    filter: alpha(opacity=0);
    overflow: hidden;
}



@media only screen and (min-width: 760px) {
	.page-store-list .lSAction > .lSPrev {
	    left: -30px;
	}
	.page-store-list .lSAction > .lSNext {
	    right: -30px;
	}
}

@media only screen and (min-width: 1000px) {
	.page-store-list .lSAction > .lSPrev {
	    left: -40px;
	}
	.page-store-list .lSAction > .lSNext {
	    right: -40px;
	}


/* vertical */
.lSSlideOuter.vertical {
    position: relative;
}
.lSSlideOuter.vertical.noPager {
    padding-right: 0px !important;
}
.lSSlideOuter.vertical .lSGallery {
    position: absolute !important;
    right: 0;
    top: 0;
}
.lSSlideOuter.vertical .lightSlider > * {
    width: 100% !important;
    max-width: none !important;
}

/* vertical controlls */
.lSSlideOuter.vertical .lSAction > a {
    left: 50%;
    margin-left: -14px;
    margin-top: 0;
}
.lSSlideOuter.vertical .lSAction > .lSNext {
    background-position: 31px -31px;
    bottom: 10px;
    top: auto;
}
.lSSlideOuter.vertical .lSAction > .lSPrev {
    background-position: 0 -31px;
    bottom: auto;
    top: 10px;
}
/* vertical */
}
/* Rtl */
.lSSlideOuter.lSrtl {
    direction: rtl;
}
.lSSlideOuter .lightSlider, .lSSlideOuter .lSPager {
    padding-left: 0;
    list-style: none outside none;
}
.lSSlideOuter.lSrtl .lightSlider, .lSSlideOuter.lSrtl .lSPager {
    padding-right: 0;
}
.lSSlideOuter .lightSlider > *,  .lSSlideOuter .lSGallery li {
    float: left;
}
.lSSlideOuter.lSrtl .lightSlider > *,  .lSSlideOuter.lSrtl .lSGallery li {
    float: right !important;
}
/* Rtl */
@keyframes rightEnd {
    0% {
        left: 0;
    }

    50% {
        left: -15px;
    }

    100% {
        left: 0;
    }
}
@keyframes topEnd {
    0% {
        top: 0;
    }

    50% {
        top: -15px;
    }

    100% {
        top: 0;
    }
}
@keyframes leftEnd {
    0% {
        left: 0;
    }

    50% {
        left: 15px;
    }

    100% {
        left: 0;
    }
}
@keyframes bottomEnd {
    0% {
        bottom: 0;
    }

    50% {
        bottom: -15px;
    }

    100% {
        bottom: 0;
    }
}
.lSSlideOuter .rightEnd {
    animation: rightEnd 0.3s;
    position: relative;
}
.lSSlideOuter .leftEnd {
    animation: leftEnd 0.3s;
    position: relative;
}
.lSSlideOuter.vertical .rightEnd {
    animation: topEnd 0.3s;
    position: relative;
}
.lSSlideOuter.vertical .leftEnd {
    animation: bottomEnd 0.3s;
    position: relative;
}
.lSSlideOuter.lSrtl .rightEnd {
    animation: leftEnd 0.3s;
    position: relative;
}
.lSSlideOuter.lSrtl .leftEnd {
    animation: rightEnd 0.3s;
    position: relative;
}
/*/  GRab cursor */
.lightSlider.lsGrab > * {
  cursor: -o-grab;
  cursor: -ms-grab;
  cursor: grab;
}
.lightSlider.lsGrabbing > * {
  cursor: move;
  cursor: -o-grabbing;
  cursor: -ms-grabbing;
  cursor: grabbing;
}

/* =========================================================
	MAGNIFIC POPUP
	Legacy / previous dev
========================================================= */
.mfp-bg {
	position: fixed;
	top: 0;
	left: 0;
	opacity: 0.8;
	z-index: 1042;
	filter: alpha(opacity=80);
	background: #0b0b0b;
	width: 100%;
	height: 100%;
	overflow: hidden;
}

.mfp-wrap {
	position: fixed;
	top: 0;
	left: 0;
	z-index: 1043;
	outline: none !important;
	width: 100%;
	height: 100%;
	-webkit-backface-visibility: hidden;
}

.mfp-container {
	position: absolute;
	top: 0;
	left: 0;
	padding: 0 8px;
	width: 100%;
	height: 100%;
	text-align: center;
	box-sizing: border-box;
}

.mfp-container:before {
	display: inline-block;
	vertical-align: middle;
	height: 100%;
	content: '';
}

.mfp-align-top .mfp-container:before {
	display: none;
}

.mfp-content {
	display: inline-block;
	position: relative;
	vertical-align: middle;
	z-index: 1045;
	margin: 0 auto;
	text-align: left;
}

.mfp-inline-holder .mfp-content,
.mfp-ajax-holder .mfp-content {
	cursor: auto;
	width: 100%;
}

.mfp-ajax-cur {
	cursor: progress;
}

.mfp-zoom-out-cur,
.mfp-zoom-out-cur .mfp-image-holder .mfp-close {
	cursor: zoom-out;
}

.mfp-zoom {
	cursor: pointer;
	cursor: zoom-in;
}

.mfp-auto-cursor .mfp-content {
	cursor: auto;
}

.mfp-close,
.mfp-arrow,
.mfp-preloader,
.mfp-counter {
	-webkit-user-select: none;
	-moz-user-select: none;
	user-select: none;
}

.mfp-loading.mfp-figure {
	display: none;
}

.mfp-hide {
	display: none !important;
}

.mfp-preloader {
	position: absolute;
	top: 50%;
	right: 8px;
	left: 8px;
	z-index: 1044;
	margin-top: -0.8em;
	width: auto;
	color: #cccccc;
	text-align: center;
}

.mfp-preloader a {
	color: #cccccc;
}

.mfp-preloader a:hover {
	color: white;
}

.mfp-s-ready .mfp-preloader {
	display: none;
}

.mfp-s-error .mfp-content {
	display: none;
}

button.mfp-close,
button.mfp-arrow {
	cursor: pointer;
	border: 0;
	overflow: visible;
	-webkit-appearance: none;
	display: block;
	z-index: 1046;
	outline: none;
	padding: 0;
}

button::-moz-focus-inner {
	border: 0;
	padding: 0;
}

.mfp-close {
	position: absolute;
	top: -20px;
	right: -10px;
	cursor: pointer;
	border-radius: 50%;
	background-color: #9db0bd;
	padding: 0 0 18px 10px;
	width: 44px;
	height: 44px;
	color: #fff;
	font-style: normal;
	font-size: 20px;
	line-height: 44px;
	text-align: center;
	text-decoration: none;
	-moz-box-shadow: 0 0 4px rgba(0, 0, 0, 0.24);
	display: block;
	box-shadow: 0 0 4px rgba(0, 0, 0, 0.24);
}

.mfp-close:hover,
.mfp-close:focus {
	background-color: #fff;
	color: #f6902a;
}


.modal-product .mfp-close {
	top: -40px;
}

.mfp-counter {
	position: absolute;
	top: 0;
	right: 0;
	color: #cccccc;
	font-size: 12px;
	line-height: 18px;
}

.mfp-arrow {
	position: absolute;
	top: 50%;
	margin: 0;
	margin-top: -55px;
	background-color: transparent;
	padding: 0;
	width: 90px;
	height: 110px;
	transition: 0.4s all ease;
}

.mfp-arrow:active {
	margin-top: -54px;
}

.mfp-arrow:hover,
.mfp-arrow:focus {
	background-color: #afb8c4;
}

.mfp-arrow-left:before {
	display: block;
	position: absolute;
	top: .1em;
	left: -.2em;
	margin-top: 35px;
	margin-left: 35px;
	width: 0;
	height: 0;
	content: '\e93b';
	color: #fff;
	font: 2em LinearIcons;
	text-shadow: 0 0 3px rgba(3, 3, 3, 0.81);
}

.mfp-arrow-right:before {
	display: block;
	position: absolute;
	top: .1em;
	left: 0;
	margin-top: 35px;
	margin-left: 35px;
	width: 0;
	height: 0;
	content: '\e93c';
	color: #fff;
	font: 2em LinearIcons;
	text-shadow: 0 0 3px rgba(3, 3, 3, 0.81);
}

.mfp-arrow-left {
	left: 0;
}

.mfp-arrow-right {
	right: 0;
}


.mfp-iframe-holder {
	padding-top: 40px;
	padding-bottom: 40px;
}

.mfp-iframe-holder .mfp-content {
	width: 100%;
	max-width: 900px;
	line-height: 0;
}

.mfp-iframe-holder .mfp-close {
	top: 0px;
}

.mfp-iframe-scaler {
	padding-top: 56.25%;
	width: 100%;
	height: 0;
	overflow: hidden;
}

.wistia .mfp-iframe-scaler {
	padding-top: 56.25%;
}

#wistia_video_grid_below {
	display: none !important;
}

.mfp-iframe-scaler iframe {
	display: block;
	position: absolute;
	top: 0;
	left: 0;
	margin: 0;
	background: black;
	width: 100%;
	height: 100%;
}

/* Main image in popup */
img.mfp-img {
	display: block;
	width: auto;
	max-width: 100%;
	height: auto;
	line-height: 0;
	box-sizing: border-box;
	margin: 0 auto;
	padding: 40px 0 40px;
}

/* The shadow behind the image */
.mfp-figure {
	line-height: 0;
}

.mfp-figure:after {
	display: block;
	position: absolute;
	top: 40px;
	right: 0;
	bottom: 40px;
	left: 0;
	z-index: -1;
	background: #444444;
	width: auto;
	height: auto;
	content: '';
}

.mfp-figure small {
	display: block;
	color: #bdbdbd;
	font-size: 12px;
	line-height: 14px;
}

.mfp-figure figure {
	margin: 0;
}

.mfp-bottom-bar {
	position: absolute;
	bottom: -36px;
	left: 0;
	cursor: auto;
	margin-top: -36px;
	width: 100%;
}

.mfp-title {
	color: #f3f3f3;
	line-height: 18px;
	text-align: left;
	word-wrap: break-word;
	padding-right: 36px;
}

.mfp-image-holder .mfp-content {
	max-width: 100%;
}

.mfp-gallery .mfp-image-holder .mfp-figure {
	cursor: pointer;
}

/* padding-bottom and top for image */
.mfp-no-margins img.mfp-img {
	padding: 0;
}

/* position of shadow behind the image */
.mfp-no-margins .mfp-figure:after {
	top: 0;
	bottom: 0;
}

/* padding for main container */
.mfp-no-margins .mfp-container {
	padding: 0;
}

.modal-box {
	position: relative;
	margin: 0px auto;
	background: #FFF;
	padding: 3em 2em;
	max-width: 950px;
	text-align: left;
}

.modal-form,
.modal-nopadding {
	padding: 0;
}

.modal-box.modal-form article.modal-info {
	padding: 3%;
}

.modal-box.modal-form article.modal-info img.full {
	margin-top: 3em;
	margin-right: auto;
	margin-bottom: 3em;
	margin-left: auto;
	max-width: 265px;
	max-height: auto;
}

.modal-form h3 {
	color: #f58f29;
	font-weight: 400;
	font-size: 1.8em;
	line-height: 1em;
}

.modal-form p {
	margin-top: .5em;
	font-size: 1.3em;
}

.modal-form p.contact-instructions span {
	overflow: hidden;
	color: #434c54;
}

.modal-form p.contact-instructions a {
	font-weight: 500;
	font-size: 1.1em;
}

.modal-box.modal-form article.modal-info i {
	position: relative;
	float: left;
	margin-right: .2em;
	margin-bottom: 1.1em;
	color: #bbc1c8;
	font-size: 1.3em;
}

.modal-box.modal-product {
	display: block;
	border-top: 20px solid #444d54;
	padding: 0;
	max-width: 1200px;
	height: 100%;
}

.modal-gallery {
	position: relative;
	margin: 0px auto;
	max-width: 1200px;
}

.page-store-detail .modal-gallery {
	background-color: #fff;
	padding: 4em;
	max-width: 800px;
}

.modal-box.modal-product .product-img {
	background-size: cover;
	height: 200px;
}

.modal-box.modal-product img {
	display: block;
	width: 100%;
}

.modal-box.modal-product article {
	background-color: #fff;
	padding-top: 5%;
}

.modal-box.modal-product article h2 {
	margin-top: .5em;
	margin-right: 5%;
	margin-bottom: 1.3em;
	margin-left: 5%;
	color: #444d54;
	font-weight: 300;
}

.modal-box.modal-product article p,
.modal-box.modal-product article ol,
.modal-box.modal-product article ul {
	margin-right: 5%;
	margin-left: 5%;
}

.modal-box .modal-action,
.modal-gallery .modal-action {
	bottom: 0;
	background-color: #f6902a;
	padding: 1.5em 5% 1em;
	text-align: center;
}

.modal-box .modal-action a.button,
.modal-gallery .modal-action a.button {
	border-color: #fff;
	background-color: #fff;
	color: #f6902a;
}

.modal-box .modal-action a.button:hover,
.modal-gallery .modal-action a.button {
	border-color: #444d54;
	background-color: #444d54;
	color: #fff;
}

.modal-box .modal-action p.callus,
.modal-gallery .modal-action p.callus {
	margin: 0;
	color: rgba(255, 255, 255, 0.51);
	font-size: .8em;
}

.modal-box .modal-action p a,
.modal-gallery .modal-action p a {
	color: #fff;
	font-size: 1.4em;
}

.modal-box .modal-action p a:hover,
.modal-gallery .modal-action p a:hover {
	color: #444d54;
}

.modal-gallery p.modal-title {
	position: absolute;
	top: -52px;
	left: 0;
	margin-top: 0;
	margin-bottom: 0;
	padding-top: 1%;
	padding-bottom: 1%;
	color: #fff;
}

.modal-box .product-img a.play-video {
	display: block;
	position: relative;
	position: absolute;
	top: 20%;
	left: 50%;
	margin-top: -84px;
	margin-left: -46px;
	border-radius: 50%;
	background-color: rgba(245, 143, 40, 0.70);
	padding: .5em;
	width: 65px;
	height: 65px;
	color: #fff;
}

.modal-box .product-img a.play-video:hover {
	background-color: #434c54;
}

.modal-box .product-img a.play-video span {
	display: block;
	position: absolute;
	bottom: -50px;
	left: 50%;
	margin-left: -73px;
	border: 1px solid rgba(255, 255, 255, 0.48);
	background-color: rgba(3, 3, 3, 0.28);
	padding-top: .3em;
	padding-bottom: .3em;
	width: 150px;
	font-weight: 500;
	text-align: center;
	text-transform: uppercase;
}

.modal-box .product-img a.play-video:hover span {
	background-color: rgba(3, 3, 3, 0.5);
}

.modal-box .product-img a.play-video:after {
	position: absolute;
	top: 22px;
	left: 30px;
	border-top: 20px solid transparent;
	border-bottom: 20px solid transparent;
	border-left: 30px solid #fff;
	width: 0;
	height: 0;
	content: '';
}

@media screen and (max-width: 800px) and (orientation: landscape),
screen and (max-height: 300px) {

	/**
       * Remove all paddings around the image on small screen
       */
	.mfp-img-mobile .mfp-image-holder {
		padding-right: 0;
		padding-left: 0;
	}

	.mfp-img-mobile img.mfp-img {
		padding: 0;
	}

	.mfp-img-mobile .mfp-figure:after {
		top: 0;
		bottom: 0;
	}

	.mfp-img-mobile .mfp-figure small {
		display: inline;
		margin-left: 5px;
	}

	.mfp-img-mobile .mfp-bottom-bar {
		position: fixed;
		top: auto;
		bottom: 0;
		margin: 0;
		background: rgba(0, 0, 0, 0.6);
		padding: 3px 5px;
		box-sizing: border-box;
	}

	.mfp-img-mobile .mfp-bottom-bar:empty {
		padding: 0;
	}

	.mfp-img-mobile .mfp-counter {
		top: 3px;
		right: 5px;
	}

	.mfp-img-mobile .mfp-close {
		position: fixed;
		top: 0;
		right: 0;
		padding: 0;
		width: 35px;
		height: 35px;
		line-height: 35px;
		text-align: center;
	}
}


@media all and (min-width: 580px) {
	.modal-box.modal-product .product-img {
		height: 350px;
	}

	.modal-box .product-img a.play-video {
		top: 30%;
		left: 50%;
	}
}


@media all and (min-width: 768px) {



	.modal-box.modal-product .modal-product-wrapper {
		position: relative;
		overflow: hidden;
	}


	.modal-box.modal-product article {
		position: relative;
		float: right;
		padding-bottom: 120px;
		width: 45%;
	}

	.modal-box.modal-product .product-img {
		float: left;
		background-size: cover;

		padding-bottom: 400px;
		width: 55%;
	}

	.modal-box .product-img a.play-video {
		top: 56%;
		left: 29%;
	}

	.modal-box.modal-product article h2,
	.modal-box.modal-product article p,
	.modal-box.modal-product article ol,
	.modal-box.modal-product article ul {
		margin-right: 10%;
		margin-left: 10%;
	}

	.modal-box .modal-action,
	.modal-gallery .modal-action {
		position: absolute;
		bottom: 0;
		padding-top: 1em;
		width: 90%;
	}

	.modal-box.modal-product .modal-action {
		right: 0;
		width: 35%;
	}

	.modal-box .modal-action a.button,
	.modal-gallery .modal-action a.button {
		float: left;
		margin-bottom: 0;
		padding-right: .7em;
		padding-left: .7em;
	}

	.modal-box .modal-action p.callus,
	.modal-gallery .modal-action p.callus {
		float: right;
		padding-top: .7em;
	}

	.modal-box.modal-form article.modal-info {
		float: left;
		width: 44%;
	}

	.modal-box.modal-form .contact {
		float: right;
		width: 50%;
	}


}

@media all and (max-width: 900px) {
	.mfp-arrow {
		transform: scale(0.75);
	}

	.mfp-arrow-left {
		transform-origin: 0;
	}

	.mfp-arrow-right {
		transform-origin: 100%;
	}

	.mfp-container {
		padding-right: 6px;
		padding-left: 6px;
	}

}

.mfp-ie7 .mfp-img {
	padding: 0;
}

.mfp-ie7 .mfp-bottom-bar {
	left: 50%;
	margin-top: 5px;
	margin-left: -300px;
	padding-bottom: 5px;
	width: 600px;
}

.mfp-ie7 .mfp-container {
	padding: 0;
}

.mfp-ie7 .mfp-content {
	padding-top: 44px;
}

.mfp-ie7 .mfp-close {
	top: 0;
	right: 0;
	padding-top: 0;
}

/* MARK: Globals
----------------------------------------------- */

/* MARK: Components / blocks
----------------------------------------------- */

/* MARK: Compositions / layouts
	TODO: Swap out grid.css with shared version
----------------------------------------------- */

/* MARK: Utilities
----------------------------------------------- */

/* MARK: Vendor
----------------------------------------------- */


/*# sourceMappingURL=app.css.map*/