/**
 * Styles shared between all pages
 *
 * @author      Jim Mock
 * @copyright   2024, ON1
 */

/*------------------------------------------------------------------------------
 * Gilroy font
 -----------------------------------------------------------------------------*/
@font-face {
	font-family: 'GilroyExtraBold';
	font-style: normal;
	font-weight: normal;
	src: url('/_assets/vendor/fonts/gilroy/gilroy-extrabold-webfont.woff2') format('woff2'), url('/_assets/vendor/fonts/gilroy/gilroy-extrabold-webfont.woff') format('woff');
}

@font-face {
	font-family: 'GilroyLight';
	font-style: normal;
	font-weight: normal;
	src: url('/_assets/vendor/fonts/gilroy/gilroy-light-webfont.woff2') format('woff2'), url('/_assets/vendor/fonts/gilroy/gilroy-light-webfont.woff') format('woff');
}

.gilroy-extra-bold {
	font-family: "GilroyExtraBold", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", "Noto Sans", "Liberation Sans", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
}

.gilroy-light {
	font-family: "GilroyLight", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", "Noto Sans", "Liberation Sans", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
}

/*------------------------------------------------------------------------------
 * TF Handwriting font
 -----------------------------------------------------------------------------*/
@font-face {
	font-family: 'TF-Handwriting';
	font-style: normal;
	font-weight: normal;
	src: url('/_assets/vendor/fonts/tf-handwriting/tf-handwriting-webfont.woff2') format('woff2'), url('/_assets/vendor/fonts/tf-handwriting/tf-handwriting-webfont.woff') format('woff');
}

.tf-handwriting {
	font-family: "TF-Handwriting", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", "Noto Sans", "Liberation Sans", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
}


/*------------------------------------------------------------------------------
 * Theme colors
 -----------------------------------------------------------------------------*/
/* Light theme */
/*
html,
html[data-theme="light"] {
	color-scheme: light;

	--bg-color: #eff6ff;
	--text-color: #2a4062;
	--headline-color: #00285a;
	--text-link: #0a7efa;
	--box-bg: #fff;
	--dark: #333942;
	--dark-1: #2b2f35;
	--light: #6b7b95;
	--white: #fff;
	--blue: #0a7efa;
	--light-blue: #009ad8;
	--purple: #914fff;
	--pink: #ee19a9;
	--orange: #ff4f37;
	--green: #21ce6e;
	--bright-green: #05ff4c;
	--pale-gray: #989898;
	--silver: #bdbdbe;
	--red: #ff3d57;
	--yellow: #fde005;
	--pale-blue: rgba(0, 154, 216, 0.20);
	--dark-subtitle: #7c7c7d;
	--pale-green: rgba(33, 206, 110, 0.20);
	--select-border-color: #dee2e6;
	--pale-pink: rgba(238, 25, 169, 0.25);
	--pale-purple: rgba(125, 30, 255, 0.5);
	--brand-blue: #bfd6fa;
	--code: #914fff;
	--footer-bg: #bfd6fa;
}
*/

/* Dark theme override */
html,
html[data-theme="dark"] {
	/* color-scheme: dark; */

	--bg-color: #040f1d;
	--text-color: #ededed;
	--headline-color: #fff;
	--text-link: #c2dfff;
	--box-bg: #1d232a;
	--dark: #333942;
	--dark-1: #2b2f35;
	--dark-2: #1b2838;
	--light: #607796;
	--white: #fff;
	--blue: #0a7efa;
	--light-blue: #009ad8;
	--purple: #914fff;
	--pink: #ee19a9;
	--orange: #ff4f37;
	--green: #21ce6e;
	--bright-green: #05ff4c;
	--pale-gray: #989898;
	--silver: #bdbdbe;
	--red: #ff3d57;
	--yellow: #fde005;
	--pale-blue: rgba(0, 154, 216, 0.20);
	--dark-subtitle: #7c7c7d;
	--pale-green: rgba(33, 206, 110, 0.20);
	--select-border-color: #495057;
	--pale-pink: rgba(238, 25, 169, 0.25);
	--pale-purple: rgba(125, 30, 255, 0.25);
	--brand-blue: #bfd6fa;
	--code: #05ff4c;
	--footer-bg: #192432;
	--footer-info-border: #1f2d40;
	--dropdown-bg: #273a51;
	--nav-bg: #121B27;
	--seafoam: #00ffbc;
	--turquoise: #5ce9ff;
	--keyword-orange: #ff7900;
	--keyword-yellow: #fed600;
	--pale-orange: rgba(255, 79, 55, 0.35);
	--black: #000;
	--almost-white: #f6f6f7;
	--off-white: #f3f3f3;
	--purple-2025: #b37cff;
	--red-2025: #ff828a;
	--blue-2025: #a2ceff;
	--green-2025: #90ffdd;
	--dark-orange-2025: #ff9c00;
	--orange-2025: #ffc973;
}

/*------------------------------------------------------------------------------
 * Animations
 -----------------------------------------------------------------------------*/
@keyframes growDown {
	0% {
		transform: scaleY(0.5);
	}

	100% {
		transform: scaleY(1);
	}
}

/*------------------------------------------------------------------------------
 * Base elements
 -----------------------------------------------------------------------------*/
body {
	background: var(--bg-color);
	color: var(--text-color);
	font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", "Noto Sans", "Liberation Sans", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
	font-size: 1.125rem;
	font-weight: 400;
	-webkit-font-smoothing: antialiased;
}

h1,
h2,
h3,
h4 {
	color: var(--headline-color);
	font-family: "GilroyExtraBold", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", "Noto Sans", "Liberation Sans", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
	font-weight: 700;
	margin-bottom: 1.5rem;
}

h1.fw-light,
h2.fw-light,
h3.fw-light,
h4.fw-light {
	color: var(--headline-color);
	font-family: "GilroyLight", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", "Noto Sans", "Liberation Sans", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
	font-weight: 400;
}

p {
	line-height: 1.6;
	margin-bottom: 1.5rem;
}

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

a:link,
a:visited,
a:hover {
	font-weight: 500;
	text-decoration: none;
}

code {
	background: var(--pale-green);
	border: 1px solid var(--green);
	color: var(--code);
	padding: 0.125rem 0.5rem;
}

*:focus {
	box-shadow: none;
	outline: none;
}

small,
.small {
	font-size: 0.875rem;
}

/*------------------------------------------------------------------------------
 * Containers
 -----------------------------------------------------------------------------*/
.container,
.container-fluid,
.container-xxl,
.container-xl,
.container-lg,
.container-md,
.container-sm {
	margin-left: auto;
	margin-right: auto;
	padding-left: 1.5rem;
	padding-right: 1.5rem;
	width: 100%;
}

/*------------------------------------------------------------------------------
 * Header & navigation
 -----------------------------------------------------------------------------*/
#site-header {
	background: var(--bg-color);
	border-bottom: 2px solid transparent;
	border-image: linear-gradient(to right, var(--bg-color), var(--light-blue), var(--bg-color));
	border-image-slice: 1;
	font-size: 0.875rem;
	width: 100%;
}

#site-navigation.navbar .offcanvas {
	background: var(--bg-color);
	width: 100%;
}

#site-navigation.navbar .offcanvas-header img {
	border: none;
	box-shadow: none;
}

#site-navigation.navbar .offcanvas-header .btn-close {
	color: var(--text-color);
	--bs-btn-close-bg: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23fff'%3e%3cpath d='M.293.293a1 1 0 0 1 1.414 0L8 6.586 14.293.293a1 1 0 1 1 1.414 1.414L9.414 8l6.293 6.293a1 1 0 0 1-1.414 1.414L8 9.414l-6.293 6.293a1 1 0 0 1-1.414-1.414L6.586 8 .293 1.707a1 1 0 0 1 0-1.414z'/%3e%3c/svg%3e")
}

#site-navigation.navbar .navbar-toggler {
	border: none;
}

#site-navigation.navbar .navbar-toggler i.fa-solid {
	font-size: 1.5rem;
}

#site-navigation.navbar .nav-link {
	color: var(--text-color);
	font-weight: 500;
	padding-left: 1.25rem;
	padding-right: 1.25rem;
}

#site-navigation.navbar .nav-link:hover,
#site-navigation.navbar .dropdown-toggle.show {
	color: var(--text-link);
}

#site-navigation.navbar .dropdown-toggle::after {
	border: none;
	content: '\f107';
	font-family: 'Font Awesome 6 Pro';
	font-size: 0.75rem;
	margin-top: -0.125rem;
	margin-left: 0.25rem;
	vertical-align: middle;
}

#site-navigation.navbar .dropdown-menu {
	background: var(--bg-color);
	color: var(--text-color);
}

#site-navigation.navbar .dropdown:hover .dropdown-menu {
	display: block;
	left: auto;
	margin-top: 0;
	right: 0;
}

#site-navigation.navbar .dropdown-menu-end[data-bs-popper] {
	right: 0;
	left: auto;
}

#site-navigation.navbar .dropdown-menu.full-width-menu {
	animation: growDown 300ms ease-in-out forwards;
	background: var(--nav-bg);
	border: none;
	border-bottom: 2px solid transparent;
	border-image: linear-gradient(to right, var(--bg-color), var(--light-blue), var(--bg-color));
	border-image-slice: 1;
	border-radius: 0;
	left: 0;
	margin: 0 auto;
	padding: 0;
	right: 0;
	transform-origin: top center;
	width: 100%;
}

@media (min-width: 1700px) {
	#site-navigation.navbar .dropdown-menu.full-width-menu#products-dropdown {
		background: linear-gradient(to right, #27126c 40%, #59208e 80%, #701660 100%);
	}
}

@media (max-width: 1699.98px) {
	#site-navigation.navbar .dropdown-menu.full-width-menu#products-dropdown {
		background: linear-gradient(to right, #27126c 40%, #59208e 80%, #701660 100%);
	}
}

#site-navigation.navbar .dropdown-menu.full-width-menu .nav-link {
	color: var(--text-color);
	line-height: 1.3;
	padding: 0.5rem 0;
}

#site-navigation.navbar .dropdown-menu.full-width-menu .dropdown-header {
	color: var(--text-color);
	font-size: 0.9375rem;
	font-weight: 900;
	margin-bottom: 1rem;
	padding: 0;
}

#site-navigation.navbar .dropdown-menu.full-width-menu .nav-link:hover span {
	border-bottom: 1px solid var(--text-color);
}

#site-navigation.navbar .dropdown-item .badge.rounded-pill,
#site-navigation.navbar .badge.rounded-pill.new-badge {
	font-size: 0.625rem;
	margin-top: -0.25rem;
	vertical-align: middle;
}

#site-navigation.navbar .dropdown-menu.full-width-menu .included-in-raw {
	font-size: 0.75rem;
}

#site-navigation.navbar .dropdown-menu.full-width-menu .works-as {
	font-size: 0.8125rem;
}

#site-navigation.navbar .dropdown-menu.full-width-menu img.product-icon {
	margin-right: 0.75rem;
}

#site-header .badge.logged-in-user {
	font-size: 0.8125rem;
}

#site-navigation.navbar .icon-wrapper img,
#site-navigation.navbar .user-icon {
	border-radius: 50rem;
	margin-top: 1px;
}

#site-navigation.navbar .user-dropdown-menu {
	padding: 1.25rem;
	white-space: nowrap;
	width: fit-content;
}

#site-navigation.navbar .user-dropdown-menu .row {
	flex-wrap: nowrap;
}

#site-navigation.navbar .user-dropdown-menu .manage-acct-link {
	font-size: 0.75rem;
}

#site-navigation.navbar .user-dropdown-menu ul {
	list-style-type: disc;
}

#site-navigation.navbar .sign-in-out .text-link {
	border-bottom: none;
}

#site-navigation.navbar .sign-in-out .sign-in-link:hover {
	border-bottom: 1px solid var(--text-color);
}

/*
#site-header .theme-switcher label.badge {
	color: var(--text-color);
	cursor: pointer;
	font-size: 0.875rem !important;
	font-weight: 500;
}

#site-header .theme-switcher .active i {
	color: var(--orange);
}
*/

/*------------------------------------------------------------------------------
 * Product navigation
 -----------------------------------------------------------------------------*/
#product-navigation .nav-item .nav-link .text-link,
#product-navigation .nav-item .nav-link .text-link-white {
	border: none;
}

#product-navigation .nav-item .nav-link:hover .text-link {
	border-bottom: 1px solid var(--text-link);
}

#product-navigation .nav-item .nav-link.active .text-link {
	border-bottom: 1px solid var(--text-link);
}

#product-navigation .nav-item .nav-link:hover .text-link-white {
	border-bottom: 1px solid var(--white);
}

#product-navigation .nav-item .nav-link.active .text-link-white {
	border-bottom: 1px solid var(--white);
}

/*------------------------------------------------------------------------------
 * Sticky nav
 -----------------------------------------------------------------------------*/
.sticky.is-sticky {
	left: 0;
	position: fixed;
	right: 0;
	top: 0;
	width: 100%;
	z-index: 1000;
}

/*------------------------------------------------------------------------------
 * Footer
 -----------------------------------------------------------------------------*/
#site-footer {
	background: var(--footer-bg);
}

#site-footer .footer-guarantee .btn {
	background: var(--footer-bg);
}

#site-footer li a {
	color: var(--text-color);
	font-size: 0.875rem;
}

#site-footer li a:hover,
#site-footer .footer-info a:hover {
	border-bottom: 1px solid var(--text-link);
	color: var(--text-link);
}

#site-footer .footer-list p {
	color: var(--light);
}

#site-footer .footer-list p,
#site-footer .choose-language-title,
#site-footer .footer-info,
#site-footer .footer-info a {
	font-size: 0.75rem;
}

#site-footer select.gt_selector.form-select {
	--bs-form-select-bg-img: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23dee2e6' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e");
	background-color: var(--dropdown-bg);
	border: 1px solid var(--select-border-color);
	box-shadow: none;
	color: var(--text-color);
	width: auto;
}

#site-footer .footer-info {
	border-top: 2px solid var(--footer-info-border);
	color: var(--light);
	padding-top: 1rem;
}

#site-footer .footer-info a {
	color: var(--text-color);
}

/*------------------------------------------------------------------------------
 * Content
 -----------------------------------------------------------------------------*/
#fastspring_spinner {
	display: none;
}

hr {
	border-radius: 5px;
	border-top: 2px solid;
	margin: 1.25rem 0;
}

.hide {
	display: none;
}

.text-link {
	border-bottom: 1px solid var(--text-link);
	color: var(--text-link);
}

.text-link-blue {
	border-bottom: 1px solid var(--blue);
	color: var(--blue);
}

.text-link-white {
	border-bottom: 1px solid var(--white);
	color: var(--white);
}

.border-lt-blue {
	border: 1px solid var(--light-blue);
}

.video-player {
	box-shadow: none;
	outline: none;
}

.fw-bolder {
	font-weight: 900 !important;
}

.btn {
	font-weight: 500;
}

.btn.rounded-pill,
.btn.btn-wide.rounded-pill {
	padding: 0.625rem 2rem !important;
}

.btn.btn-sm.rounded-pill {
	padding: 0.313rem 1rem !important;
}

.btn.btn-hover-blur:hover {
	text-shadow: 0 0 15px var(--white), 0 0 15px var(--white);
}

.btn-close,
.btn-close:focus {
	border: none;
	box-shadow: none !important;
}

label {
	color: var(--light);
}

.form-label {
	font-size: 0.75rem;
	font-weight: 900;
	margin: 0;
	text-transform: uppercase;
}

.form-check-label {
	font-size: 1rem;
	font-weight: 500;
}

.form-check {
	margin-bottom: 0;
}

#login .form-check-input {
	margin-top: 0.5rem;
}

.form-check-input:checked {
	background-color: var(--blue);
	border-color: var(--blue);
}

.form-check-input.is-valid,
.was-validated .form-check-input:valid {
	border-color: var(--green);
}

.form-check-input.is-invalid,
.was-validated .form-check-input:invalid {
	border-color: var(--red);
}

.form-check-input.is-valid:checked,
.was-validated .form-check-input:valid:checked {
	background-color: var(--green);
}

.form-check-input.is-invalid:checked,
.was-validated .form-check-input:invalid:checked {
	background-color: var(--red);
}

.form-control,
.form-control:focus,
.form-select,
.form-select:focus {
	background-color: var(--box-bg);
	border: 1px solid var(--select-border-color);
	box-shadow: none;
	color: var(--text-color);
}

.form-control::-moz-placeholder {
	color: var(--light);
	opacity: 1;
}

.form-control::placeholder {
	color: var(--light);
	opacity: 1;
}

.form-control.is-valid,
.was-validated .form-control:valid {
	background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8'%3e%3cpath fill='%2321ce6e' d='M2.3 6.73.6 4.53c-.4-1.04.46-1.4 1.1-.8l1.1 1.4 3.4-3.8c.6-.63 1.6-.27 1.2.7l-4 4.6c-.43.5-.8.4-1.1.1z'/%3e%3c/svg%3e");
	border-color: var(--green);
}

.form-control.is-invalid,
.was-validated .form-control:invalid {
	background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' width='12' height='12' fill='none' stroke='%23ff3d57'%3e%3ccircle cx='6' cy='6' r='4.5'/%3e%3cpath stroke-linejoin='round' d='M5.8 3.6h.4L6 6.5z'/%3e%3ccircle cx='6' cy='8.2' r='.6' fill='%23ff3d57' stroke='none'/%3e%3c/svg%3e");
	border-color: var(--red);
}

.user-tooltip {
	--bs-tooltip-bg: var(--orange);
	--bs-tooltip-color: var(--white);
	--bs-tooltip-max-width: 100%;
	font-size: 0.75rem;
	font-weight: 500;
	width: auto;
}

table.table-dark {
	background-color: transparent;
	border-top: 2px solid var(--dark);
	color: var(--text-color);
	position: relative;
}

table.table-dark th {
	background-color: transparent;
	border-bottom: 2px solid var(--dark);
	color: var(--text-color);
	padding: 1.5rem 1rem;
	vertical-align: middle;
}

table.table-dark td {
	background-color: transparent;
	border-bottom: 2px solid var(--dark);
	color: var(--text-color);
	padding: 1.5rem 1rem;
	vertical-align: middle;
}

div.skiptranslate,
#google_translate_element2,
#goog-gt-tt,
.VIpgJd-ZVi9od-aZ2wEe-wOHMyf {
	display: none !important;
}

.goog-te-menu-value:hover {
	text-decoration: none !important;
}

.goog-text-highlight {
	background-color: transparent !important;
	box-shadow: none !important;
}

#fastspring_spinner {
	background: rgba(0, 0, 0, 0.4);
	height: 100%;
	left: 0;
	position: fixed;
	top: 0;
	width: 100%;
	z-index: 99999998;
}

#fastspring_spinner img {
	-webkit-animation-delay: .4s;
	animation-delay: .4s;
	-webkit-animation-duration: .4s;
	animation-duration: .4s;
	-webkit-animation-name: fsb-fadeIn;
	animation-name: fsb-fadeIn;
	left: 50%;
	margin-left: -50px;
	margin-top: -50px;
	position: fixed;
	top: 50%;
	z-index: 99999999;
}

.modal-open,
.fsb-modalOpen {
	overflow: auto !important;
	padding-right: 0 !important;
}

.modal .close,
.modal .btn-close {
	background: none;
	border-radius: 0;
	box-sizing: initial;
	color: #fff;
	font-size: 2rem;
	font-weight: 400;
	height: auto;
	opacity: 1;
	outline: none;
	padding: 0;
	position: absolute;
	right: 0;
	text-shadow: none;
	top: -3rem;
	width: auto;
}

.modal .modal-fullscreen .btn-close {
	background: none;
	border-radius: 0;
	box-sizing: initial;
	color: #fff;
	font-size: 2rem;
	font-weight: 400;
	height: auto;
	opacity: 1;
	outline: none;
	padding: 0;
	position: absolute;
	right: 2rem;
	text-shadow: none;
	top: 0;
	width: auto;
}

.modal-content {
	background: var(--box-bg);
}

.modal-backdrop.show {
	opacity: 0.85;
}

#image-modal .modal-content,
#video-modal .modal-content {
	border-radius: 0;
}

#image-modal .modal-body,
#video-modal .modal-body {
	padding: 0.313rem;
}

.carousel-control-next,
.carousel-control-prev {
	width: 5%;
}

.twentytwenty-handle {
	border: none !important;
	border-radius: 0 !important;
	bottom: 1.5rem !important;
	height: auto !important;
	margin-left: 0 !important;
	margin-top: 0 !important;
	top: initial !important;
	width: 3px !important;
}

.twentytwenty-horizontal .twentytwenty-handle::before {
	margin-bottom: 0 !important;
}

.twentytwenty-horizontal .twentytwenty-handle::after {
	margin-top: 0 !important;
}

.twentytwenty-left-arrow {
	background: rgba(0, 0, 0, 0.5) !important;
	border: 0 !important;
	border-right: 0 !important;
	height: auto !important;
	line-height: 1 !important;
	margin-left: -64px !important;
	margin-top: 0 !important;
	padding: 0 !important;
	text-align: center !important;
	width: 64px !important;
}

.twentytwenty-right-arrow {
	background: rgba(0, 0, 0, 0.5) !important;
	border: 0 !important;
	border-right: 0 !important;
	height: auto !important;
	line-height: 1 !important;
	margin-right: -64px !important;
	margin-top: 0 !important;
	padding: 0 !important;
	text-align: center !important;
	width: 64px !important;
}

.twentytwenty-left-arrow::before,
.twentytwenty-right-arrow::before {
	color: #fff !important;
	display: inline-block !important;
	font-size: 0.625rem !important;
	font-weight: 700 !important;
	line-height: 1 !important;
	padding: 0.313rem 0 !important;
	text-align: center !important;
	text-transform: uppercase !important;
	vertical-align: middle !important;
}

.twentytwenty-left-arrow::before {
	content: 'Before' !important;
}

.twentytwenty-right-arrow::before {
	content: 'After' !important;
}

a.scroll-top {
	border: none;
	bottom: 2.5rem;
	color: var(--light);
	display: none;
	font-size: 2.25rem;
	font-weight: 300;
	position: fixed;
	right: 1.25rem;
	z-index: 3;
}

a.scroll-top:hover {
	color: var(--blue);
}

#fsb-modal.fsb-MOD .fsb-modal-content {
	color: var(--bg-color);
}

/*------------------------------------------------------------------------------
 * FAQs
 -----------------------------------------------------------------------------*/
#faqs table.table-dark th,
#faqs table.table-dark td {
	padding: 1rem;
}

#faqs .faq-group:first-of-type {
	border-top: 2px solid var(--dark-1);
}

#faqs .faq-group {
	border-bottom: 2px solid var(--dark-1);
	padding: 1.5rem;
}

#faqs .question .question-title {
	color: var(--headline-color);
	cursor: pointer;
	font-weight: 700;
	margin-bottom: 0;
	padding-right: 3rem;
}

#faqs .question i.fa-angle-down,
#faqs .question i.fa-angle-up {
	cursor: pointer;
	display: inline-block;
	float: right;
	font-size: 1.5rem;
	margin-left: 2rem;
	padding-top: 0;
}

#faqs .answer {
	display: none;
	margin-top: 1.5rem;
	padding-right: 3rem;
}

#faqs .answer ul:last-child,
#faqs .answer ol:last-child {
	margin-bottom: 0;
}

#faqs .answer li {
	line-height: 1.5;
	margin-bottom: 1rem;
}

#faqs .answer li:last-child {
	margin-bottom: 0;
}

#faqs #specs,
#faqs #specs .container-xxl {
	padding: 0 !important;
}

#faqs #specs .col-xxl-11 {
	width: 100%;
}

#faqs #specs h2.text-headline {
	display: none;
}

/*------------------------------------------------------------------------------
 * Colors
 -----------------------------------------------------------------------------*/
.box-bg {
	background-color: var(--box-bg) !important;
}

.bg-hollow {
	background-color: transparent !important;
}

.bg-default {
	background-color: var(--bg-color) !important;
}

.bg-dark {
	background-color: var(--dark) !important;
}

.bg-dark-1 {
	background-color: var(--dark-1) !important;
}

.bg-dark-2 {
	background-color: var(--dark-2) !important;
}

.bg-blue {
	background-color: var(--blue) !important;
}

.bg-light-blue {
	background-color: var(--light-blue) !important;
}

.bg-pale-blue {
	background: var(--pale-blue) !important;
}

.bg-purple {
	background-color: var(--purple) !important;
}

.bg-pink {
	background-color: var(--pink) !important;
}

.bg-red-orange {
	background-color: var(--orange) !important;
}

.bg-orange {
	background-color: var(--keyword-orange) !important;
}

.bg-green {
	background-color: var(--green) !important;
}

.bg-red {
	background-color: var(--red) !important;
}

.bg-pale-purple {
	background-color: var(--pale-purple) !important;
}

.bg-yellow {
	background-color: var(--yellow) !important;
}

.bg-pale-pink {
	background-color: var(--pale-pink) !important;
}

.bg-pale-green {
	background-color: var(--pale-green) !important;
}

.bg-light {
	background-color: var(--light) !important;
}

.bg-white {
	background-color: var(--white) !important;
}

.bg-keyword-orange {
	background-color: var(--keyword-orange) !important;
}

.bg-keyword-yellow {
	background-color: var(--keyword-yellow) !important;
}

.bg-pale-orange {
	background-color: var(--pale-orange) !important;
}

.bg-black {
	background-color: var(--black) !important;
}

.bg-almost-white {
	background-color: var(--almost-white) !important;
}

.bg-off-white {
	background-color: var(--off-white) !important;
}

.bg-dark-orange-2025 {
	background-color: var(--dark-orange-2025) !important;
}

.text-default {
	color: var(--text-color) !important;
}

.text-white {
	color: var(--white) !important;
}

.text-offwhite {
	color: var(--bg-color) !important;
}

.text-headline {
	color: var(--headline-color) !important;
}

.text-black {
	color: var(--bg-color) !important;
}

.text-dark {
	color: var(--dark) !important;
}

.text-light {
	color: var(--light) !important;
}

.text-blue {
	color: var(--blue) !important;
}

.text-light-blue {
	color: var(--light-blue) !important;
}

.text-purple {
	color: var(--purple) !important;
}

.text-pink {
	color: var(--pink) !important;
}

.text-orange {
	color: var(--orange) !important;
}

.text-keyword-orange {
	color: var(--keyword-orange) !important;
}

.text-keyword-yellow {
	color: var(--keyword-yellow) !important;
}

.text-green {
	color: var(--green) !important;
}

.text-bright-green {
	color: var(--bright-green) !important;
}

.text-silver {
	color: var(--silver) !important;
}

.text-red {
	color: var(--red) !important;
}

.text-dark-subtitle {
	color: var(--dark-subtitle) !important;
}

.text-yellow {
	color: var(--yellow) !important;
}

.text-seafoam {
	color: var(--seafoam) !important;
}

.text-turquoise {
	color: var(--turquoise) !important;
}

.text-plain {
	font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", "Noto Sans", "Liberation Sans", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji" !important;
}

.text-pale-gray {
	color: var(--pale-gray) !important;
}

.purple-2025 {
	color: var(--purple-2025) !important;
}

.red-2025 {
	color: var(--red-2025) !important;
}

.blue-2025 {
	color: var(--blue-2025) !important;
}

.green-2025 {
	color: var(--green-2025) !important;
}

.orange-2025 {
	color: var(--orange-2025) !important;
}

.border-pink {
	border: 1px solid var(--pink) !important;
}

.border-purple {
	border: 1px solid var(--purple) !important;
}

.border-blue {
	border: 1px solid var(--blue) !important;
}

/*------------------------------------------------------------------------------
 * Bursts
 -----------------------------------------------------------------------------*/
.burst.blue-pink {
	background: linear-gradient(var(--bg-color), var(--bg-color)) padding-box, linear-gradient(to right, var(--light-blue) 0%, var(--pink) 89%) border-box;
	border-radius: 50em;
	border: 2px solid transparent;
	padding: 0.313rem 1rem;
}

.burst.blue-pink span {
	background: linear-gradient(to right, var(--light-blue) 0%, var(--pink) 89%);
	color: var(--pink);
	font-weight: 900;
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
}

.burst.blue-green {
	background: linear-gradient(var(--bg-color), var(--bg-color)) padding-box, linear-gradient(to right, var(--light-blue) 0%, var(--bright-green) 89%) border-box;
	border-radius: 50em;
	border: 2px solid transparent;
	padding: 0.313rem 1rem;
}

.burst.blue-green span {
	background: linear-gradient(to right, var(--light-blue) 0%, var(--bright-green) 89%);
	color: var(--pink);
	font-weight: 900;
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
}

.burst.blue {
	background: linear-gradient(var(--bg-color), var(--bg-color)) padding-box, linear-gradient(to right, var(--light-blue) 0%, var(--blue) 89%) border-box;
	border-radius: 50em;
	border: 2px solid transparent;
	padding: 0.313rem 1rem;
}

.burst.blue span {
	background: linear-gradient(to right, var(--light-blue) 25%, var(--blue) 75%);
	color: var(--light-blue);
	font-weight: 900;
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
}

.burst.orange-yellow {
	background: linear-gradient(var(--bg-color), var(--bg-color)) padding-box, linear-gradient(to right, var(--orange) 0%, var(--yellow) 89%) border-box;
	border-radius: 50em;
	border: 2px solid transparent;
	padding: 0.313rem 1rem;
}

.burst.orange-yellow span {
	background: linear-gradient(to right, var(--orange) 25%, var(--yellow) 75%);
	color: var(--orange);
	font-weight: 900;
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
}

.burst.red-pink {
	background: linear-gradient(var(--bg-color), var(--bg-color)) padding-box, linear-gradient(to right, var(--red) 0%, var(--pink) 89%) border-box;
	border-radius: 50em;
	border: 2px solid transparent;
	padding: 0.313rem 1rem;
}

.burst.red-pink span {
	background: linear-gradient(to right, var(--red) 25%, var(--pink) 75%);
	color: var(--red);
	font-weight: 900;
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
}

.burst.yellow-orange {
	background: linear-gradient(var(--bg-color), var(--bg-color)) padding-box, linear-gradient(to right, var(--keyword-yellow) 0%, var(--keyword-orange) 89%) border-box;
	border-radius: 50em;
	border: 2px solid transparent;
	padding: 0.313rem 1rem;
}

.burst.yellow-orange span {
	background: linear-gradient(to right, var(--keyword-yellow) 25%, var(--keyword-orange) 75%);
	color: var(--keyword-yellow);
	font-weight: 900;
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
}

.burst.purple {
	background: linear-gradient(var(--bg-color), var(--bg-color)) padding-box, linear-gradient(to right, var(--purple) 0%, var(--purple) 89%) border-box;
	border-radius: 50em;
	border: 2px solid transparent;
	padding: 0.313rem 1rem;
}

.burst.purple span {
	background: linear-gradient(to right, var(--purple) 25%, var(--purple) 75%);
	color: var(--purple);
	font-weight: 900;
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
}

/*------------------------------------------------------------------------------
 * Gradients
 -----------------------------------------------------------------------------*/
.bg-pink-red-orange-gradient {
	background: linear-gradient(to right, #c018b9 0%, #fd244b 40%, #fc8808 98%);
}

.bg-blue-purple-gradient {
	background: linear-gradient(to left, #0a7efa 31%, #7d1eff 100%);
}

.text-blue-pink-gradient {
	background: linear-gradient(to right, var(--blue) 40%, var(--pink) 70%);
	color: var(--blue);
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
}

.text-blue-green-gradient {
	background: linear-gradient(to right, var(--light-blue) 40%, var(--bright-green) 70%);
	color: var(--light-blue);
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
}

.text-orange-yellow-gradient {
	background: linear-gradient(to right, var(--orange) 25%, var(--yellow) 75%);
	color: var(--orange);
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
}

.text-red-pink-gradient {
	background: linear-gradient(to right, var(--red) 25%, var(--pink) 75%);
	color: var(--red);
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
}

.text-keyword-gradient {
	background: linear-gradient(to right, var(--keyword-yellow) 35%, var(--keyword-orange) 75%);
	color: var(--keyword-orange);
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
}

.text-blue-gradient {
	background: linear-gradient(to right, #006fff 0%, #00d6fd 100%);
	color: #006fff;
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
}

/*------------------------------------------------------------------------------
 * Margin & padding
 -----------------------------------------------------------------------------*/
.mt-2r {
	margin-top: 2rem;
}

.mb-2r {
	margin-bottom: 2rem;
}

.my-2r {
	margin-bottom: 2rem;
	margin-top: 2rem;
}

.mx-2r {
	margin-left: 2rem;
	margin-right: 2rem;
}

.p-2r {
	padding-bottom: 2rem;
	padding-left: 2rem;
	padding-right: 2rem;
	padding-top: 2rem;
}

.pt-2r {
	padding-top: 2rem;
}

.pb-2r {
	padding-bottom: 2rem;
}

.py-2r {
	padding-bottom: 2rem;
	padding-top: 2rem;
}

.px-2r {
	padding-left: 2rem;
	padding-right: 2rem;
}

/*------------------------------------------------------------------------------
 * Plus Quick Access Menu
 -----------------------------------------------------------------------------*/
#plus-quick-access-menu {
	bottom: 0;
	margin: 0 !important;
	opacity: 0;
	padding: 0.5rem 0;
	position: fixed;
	transform: translateY(100%);
	transition: all 200ms ease-out;
	visibility: hidden;
	width: 100%;
	z-index: 999;
}

#plus-quick-access-menu.show {
	opacity: 1;
	transform: translateY(0%);
	transition-delay: 200ms;
	visibility: visible;
}

#plus-quick-access-menu.hide-me {
	display: none;
}

#plus-quick-access-menu .nav-item .nav-link {
	align-items: center;
	color: #fff;
	font-weight: 500;
	display: inline-flex;
	font-size: 1rem;
	justify-content: space-between;
	padding: 0.313rem 1rem;
}

#plus-quick-access-menu .nav-item .nav-link span {
	border-bottom: 1px solid transparent;
}

#plus-quick-access-menu .nav-item .nav-link.active,
#plus-quick-access-menu .nav-item .nav-link:hover span {
	border-bottom: 1px solid #fff;
}

/*------------------------------------------------------------------------------
 * Visibility classes pilfered from Foundation
 -----------------------------------------------------------------------------*/
@media screen and (max-width: 39.9375em) {
	.hide-for-small-only {
		display: none !important;
	}
}

@media screen and (max-width: 0em),
screen and (min-width: 40em) {
	.show-for-small-only {
		display: none !important;
	}
}

@media screen and (min-width: 40em) {
	.hide-for-medium {
		display: none !important;
	}
}

@media screen and (max-width: 39.9375em) {
	.show-for-medium {
		display: none !important;
	}
}

@media screen and (min-width: 40em) and (max-width: 63.9375em) {
	.hide-for-medium-only {
		display: none !important;
	}
}

@media screen and (max-width: 39.9375em),
screen and (min-width: 64em) {
	.show-for-medium-only {
		display: none !important;
	}
}

@media screen and (min-width: 64em) {
	.hide-for-large {
		display: none !important;
	}
}

@media screen and (max-width: 63.9375em) {
	.show-for-large {
		display: none !important;
	}
}

@media screen and (min-width: 64em) and (max-width: 74.9375em) {
	.hide-for-large-only {
		display: none !important;
	}
}

@media screen and (max-width: 63.9375em),
screen and (min-width: 75em) {
	.show-for-large-only {
		display: none !important;
	}
}

@media screen and (max-width: 75em) {
	.show-for-xl {
		display: none !important;
	}
}

/*------------------------------------------------------------------------------
* Discount drawers
 -----------------------------------------------------------------------------*/
#photo-raw-drawer .drawer {
	background: url(https://ononesoft.cachefly.net/images/drawers/20241031-15off-drawer-bg@2x.jpg) top left no-repeat;
	background-size: cover;
}

.discount-drawer {
	bottom: 0.625rem;
	margin: 0 !important;
	opacity: 0;
	position: fixed;
	transform: translateY(100%);
	transition: all 500ms ease-out;
	visibility: hidden;
	width: 100%;
	z-index: 999;
}

.discount-drawer.show {
	opacity: 1;
	transform: translateY(0%);
	transition-delay: 500ms;
	visibility: visible;
}

.discount-drawer.hide-me {
	display: none;
}

.discount-drawer .popup-header {
	margin-left: 0;
	margin-right: 0;
}

.discount-drawer .popup-content {
	margin-left: 0;
	margin-right: 0;
	/* padding: 1rem 0 0 0.75rem; */
	padding: 1rem 1rem 0 0;
}

.discount-drawer .popup-close {
	background: none;
	border: none;
	border-radius: 0;
	box-sizing: initial;
	color: #fff;
	font-size: 1.5rem;
	height: auto;
	margin: 0;
	opacity: 1;
	outline: none;
	padding: 0;
	position: absolute;
	right: 0.75rem;
	text-shadow: none;
	top: 0;
	width: auto;
}

.discount-drawer .popup-header h2,
.discount-drawer .popup-content h2 {
	font-size: 1.75rem;
	font-weight: 900;
	margin-bottom: 1rem;
}

.discount-drawer .form-control {
	background: var(--white) !important;
	color: var(--dark);
	height: auto;
	padding: 0.75rem;
}

.discount-drawer .form-group {
	margin-bottom: 1rem;
}

.discount-drawer .form-check {
	margin-bottom: 0;
}

.discount-drawer .form-check-input {
	margin-top: 1px;
}

.discount-drawer input[type="submit"] {
	margin-bottom: 1rem;
}

.discount-drawer .user-terms label {
	font-size: 0.8125rem;
	font-weight: 400;
	line-height: 1.5;
}

.discount-drawer .drawer {
	float: right;
	width: auto;
}

/*------------------------------------------------------------------------------
 * Discount modal popups
 -----------------------------------------------------------------------------*/
@media (max-width: 1199.98px) {
	.modal-xl {
		max-width: 96% !important;
	}
}

.discount-modal .modal-content .has-background {
	background: #000 url(https://ononesoft.cachefly.net/images/popups/20240808-email-subscribe-bg@2x.jpg) center top no-repeat;
	background-size: cover;
	border: 1px solid var(--dark);
	border-radius: 1rem;
	padding: 2rem;
}

.discount-modal form label {
	color: var(--text-color);
	font-size: 0.875rem;
	font-weight: 500;
	margin-bottom: 0;
	text-transform: none;
}

.discount-modal .form-field {
	background: var(--box-bg);
	border: 1px solid var(--blue);
	color: var(--text-color);
	margin-bottom: 1.5rem;
	padding-bottom: 0.5rem;
	padding-top: 0.5rem;
}

.discount-modal .form-check-input {
	font-size: 1rem;
	margin-left: -1.6rem;
}

.discount-modal .form-check-label {
	line-height: 1.5;
}

.discount-modal .invalid-feedback {
	margin-bottom: 1.5rem;
	margin-top: -1rem;
}

.discount-modal .invalid-feedback.missing-terms {
	margin-left: -1.75rem;
	margin-top: 0;
}

/*------------------------------------------------------------------------------
* Popups
 -----------------------------------------------------------------------------*/
.fullscreen-modal .popup-close {
	background: none;
	border: none;
	border-radius: 0;
	box-sizing: initial;
	color: #fff;
	cursor: pointer;
	font-size: 1.5rem;
	height: auto;
	margin: 0;
	opacity: 1;
	outline: none;
	padding: 0;
	position: absolute;
	right: 2rem;
	text-shadow: none;
	top: 1rem;
	width: auto;
	z-index: 99;
}

.fullscreen-modal .modal-content {
	background: #000 url(https://ononesoft.cachefly.net/images/popups/20241031-fullscreen-bg@2x.jpg) center top no-repeat;
	background-size: cover;
}

/*------------------------------------------------------------------------------
 * Cookie banner
 -----------------------------------------------------------------------------*/
#on1-cookie-banner {
	visibility: hidden;
}

#on1-cookie-banner.show {
	visibility: visible;
}

/*------------------------------------------------------------------------------
 * Small screens
 -----------------------------------------------------------------------------*/
@media (max-width: 575.98px) {
	#site-navigation.navbar .offcanvas-header {
		padding-bottom: 1.5rem;
		padding-top: 1.5rem;
	}

	.container,
	.container-fluid,
	.container-xxl,
	.container-xl,
	.container-lg,
	.container-md,
	.container-sm {
		margin-left: auto;
		margin-right: auto;
		padding-left: 1rem;
		padding-right: 1rem;
		width: 100%;
	}

	#site-navigation.navbar .dropdown-menu.full-width-menu .dropdown-header {
		white-space: normal;
	}

	.discount-modal .modal-content .has-background {
		background: #000 url(https://ononesoft.cachefly.net/images/popups/20240808-email-subscribe-bg.jpg) center top no-repeat;
		background-size: cover;
	}

	#product-navigation .nav-item .nav-link {
		padding-left: 0.625rem;
		padding-right: 0.625rem;
	}

	#site-footer .footer-guarantee li {
		font-size: 1rem;
		line-height: 1.4;
		margin-bottom: 1rem;
	}

	#site-footer .footer-guarantee li:last-child {
		margin-bottom: 0;
	}

	#specs td.d-block.d-md-table-cell.text-md-nowrap {
		border-bottom: none;
		padding: 1rem 1rem 0 1rem;
	}

	#specs td.d-block.d-md-table-cell {
		border-bottom: none;
	}

	#specs td {
		font-size: 1rem;
	}

	#specs td.d-block.d-md-table-cell.text-md-nowrap strong {
		font-size: 1.125rem;
	}
}