/*
Theme Name: FF Starter Kit
Author: Freerange Future
Author URI: https://freerangefuture.com/
Description: Freerange Future agency starter — a flexible, accessible parent theme and starter kit for agencies and studios
Version: 1.0.0
License: GPL v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: ff-starter-kit
Domain Path: /languages
*/


/*
 * Token-driven neutral defaults.
 * These CSS Custom Properties are intentionally neutral — child themes
 * should override the `--brand-*` variables to apply brand styling.
 */
:root {
	/* Brand tokens (override in child theme) */
	--primary: #0066cc; /* primary */
	--secondary: #004b99; /* accent */
	--tertiary: #ffffff;

	/* Core color tokens */
	--bg: #ffffff;
	--surface: #f7fafc;
	--text: #111827;
	--muted: #6b7280;

	/* UI tokens */
	--radius-xs: 10px;
	--radius-sm: 20px;
	--radius-md: 40px;
	--radius-lg: 100px;
	--radius-xl: 200px;
	--radius-xxl: 250px;
	--shadow-sm: 0 1px 2px rgba(16,24,40,0.05);
	--shadow: 0 6px 18px rgba(15,23,42,0.08);

	/* Spacing scale */
	--space-05: 0.5em;
	--space-1: 1em;
	--space-2: 2em;
	--space-3: 3em;
	--space-4: 4em;

	/* Type scale */
	--font-sans: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", "Liberation Sans", sans-serif;
	--fs-base: 16px;
	--line-height: 1.45;
}

/* Layout and base styles using tokens */
html { font-size: var(--fs-base); box-sizing: border-box; }
*, *::before, *::after { box-sizing: inherit; }
body {
	margin: 0;
	font-family: var(--font-sans);
	color: var(--text);
	background: var(--bg);
	line-height: var(--line-height);
	-webkit-font-smoothing: antialiased;
}

/* Content container */
.container {
	width: 100%;
	max-width: 1100px;
	margin-left: auto;
	margin-right: auto;
	padding-left: var(--space-3);
	padding-right: var(--space-3);
}

/* Headings */
h1, h2, h3, h4, h5, h6 {
	color: var(--text);
	margin-top: 0;
	margin-bottom: calc(var(--space-05));
	font-weight: 600;
}

p { margin-top: 0; margin-bottom: var(--space-05); color: var(--text); }

/* Links */
a { color: var(--brand-1); text-decoration: underline; }
a:hover, a:focus { color: var(--brand-2); }

/* Buttons */
.button {
	display: inline-block;
	padding: 0.em 0.em;
	border-radius: var(--radius-sm);
	background: var(--surface);
	color: var(--text);
	text-decoration: none;
	border: 1px solid rgba(0,0,0,0.06);
	cursor: pointer;
}
.button:focus { outline: 2px solid rgba(0,0,0,0.08); outline-offset: 2px; }

.text-link{
	font-weight: 700;
	position: relative;
	padding-right: 30px;
	display: inline-block;
	text-decoration: none;
}
.text-link:after{
	content: '';
	width: 20px;
	height: 20px;
	display: block;
	background: url('assets/images/icon-arrow-circle.svg') no-repeat center;
	background-size: contain;
	transform: rotate(180deg);
	position: absolute;
	right: 0;
	top: 2px;
}
.text-link.download:after{
	background: url('assets/images/icon-download.svg') no-repeat center;
	background-size: contain;
	transform: unset;
	right: auto;
	left: 0;
}
.text-link.download, .text-link.external{
	padding-left: 30px;
	padding-right: 0;
}
.text-link.external:after{
	background: url('assets/images/icon-external-link.svg') no-repeat center;
	background-size: contain;
	transform: unset;
	right: auto;
	left: 0;
}

.video-modal-trigger{
	display: block;
	position: absolute;
	left: 0;
	right: 0;
	margin: 0 auto;
	transition: all 0.2s ease-in-out;
}

.video-modal-trigger:hover{
	transform: scale(1.1);
	cursor: pointer;
}

.video-modal.modal-dialog{
	max-width: 1100px;
}

.modal-header{
	border: 0!important;
}

.modal-header .btn-close{
	opacity: 1!important;
}

.iframe-wrapper{
	position: relative;
	overflow: hidden;
	width: 100%;
	padding-top: 56.25%;
}

.iframe-wrapper iframe{
	position: absolute;
	top: 0;
	left: 0;
	bottom: 0;
	right: 0;
	width: 100%;
	height: 100%;
}

.play-button{
    width: calc(100% - 30px);
    border-radius: 20px;
    height: 100%;
    font-size: 0;
    z-index: 99;
    transition: all .2s ease-in-out;
}

.play-button:after{
    margin: 0 auto;
    width: 78px;
    height: 78px;
    content: '';
    display: block;
    background: url('assets/images/icon-play.svg') #fff;
    background-size: contain;
    transition: all .2s ease-in-out;
    border-radius: 50%;
}

.image-wrapper{
	position: relative;
}

/* Forms */
input, textarea, select {
	font: inherit;
	padding: 0.5em;
	border: 1px solid #e6e9ee;
	border-radius: var(--radius-sm);
	background: #fff;
	color: var(--surface-text);
}

input::placeholder, select::placeholder{
  font-style: italic;
}

/* --- Main Wrapper --- */
.choices {
    width: 100%;                /* take full width of parent */
    font-family: inherit;       /* match your theme font */
    font-size: 1em;
    color: var(--surface-text);
	position: relative!important;
}

/* --- Inner input container --- */
.choices[data-type*=select-one] .choices__inner{
    background-color: #fff;
    border: 1px solid var(--surface-text);
    border-radius: 6px;
    padding: 6px 10px;
    min-height: 45px;
    box-shadow: none;
	z-index: 9;
	position: relative;
    transition: border-color 0.2s, box-shadow 0.2s;
}
.choices[data-type*=select-one]::after{
	z-index: 10;
    display: block;
    position: absolute;
    right: 20px;
    top: 21px;
    border: solid var(--text);
    border-width: 0 2px 2px 0;
    display: inline-block;
    padding: 3px;
    transform: rotate(45deg);
    -webkit-transform: rotate(45deg);
    transition: all 0.2s ease-in-out;
}
.choices[data-type*=select-one].is-open::after{
	margin-top: 0!important;
	border: solid var(--text)!important;
    border-width: 0 2px 2px 0!important;
	transform: rotate(-135deg);
    -webkit-transform: rotate(-135deg);
}
.choices__list--dropdown, .choices__list[aria-expanded]{
	border: 1px solid  var(--surface-text)!important;
	margin-top: -4px!important;
	padding: 12px 0;
}
.choices__list--dropdown .choices__item, .choices__list[aria-expanded] .choices__item{
	font-size: 1em;
	padding: 10px 18px;
}
.choices__list--single{
	padding: 6px 0!important;
}
.gtranslate_wrapper {
	margin-right: var(--space-2);
	min-width: 170px;
}
.gtranslate_wrapper .choices{
	margin-bottom: 0!important;
}
.gtranslate_wrapper .choices[data-type*=select-one]::after{
	right: 15px;
	top: 15px;
}
.gtranslate_wrapper .choices[data-type*=select-one] .choices__inner{
	background-color: transparent!important;
	font-size: 16px!important;
	font-weight: 400!important;
	min-height: 40px!important;
}
.gtranslate_wrapper .choices .choices__list--single{
	padding: 0!important;
}
.gtranslate_wrapper .choices__item--selectable{
	background-color: transparent!important;
	padding: 0 25px 0 5px!important;
	margin-right: 0!important;
}
.gtranslate_wrapper .choices__list--dropdown .choices__item, .choices__list[aria-expanded] .choices__item{
	font-size: 16px!important;
	padding: 5px 12px!important;
}
/* Focus state */
.choices.is-focused .choices__inner {
    border-color: var(--surface-text);
    box-shadow: 0 0 0 2px rgba(76, 175, 80, 0.2);
}

/* --- Placeholder text --- */
.choices__placeholder {
    color: var(--surface-text);
}

/* --- Dropdown list --- */
.choices__list--dropdown {
    background-color: var(--surface-button-bg);
    border: 1px solid var(--surface-text);
    border-radius: 6px;
    margin-top: 4px;
    max-height: 200px;
    overflow-y: auto;
    box-shadow: 0 4px 12px rgba(0,0,0,0.1);
    z-index: 999;
}

/* Dropdown items */
.choices__item--choice {
    padding: 8px 12px;
    cursor: pointer;
    transition: background-color 0.15s;
}

.choices__item--choice:hover {
    background-color: var(--surface-button-hover-bg);
    color: var(--surface-text);
}

/* Selected items (for multi-selects) */
.choices__item--selectable {
    background-color: var(--surface-button-hover-bg);
    color: var(--surface-text);
    border-radius: 4px;
    margin-right: 4px;
    padding: 3px 6px;
}

/* Remove button for selected items */
.choices__button {
    color: var(--surface-text);
    background: transparent;
    font-size: 12px;
    margin-left: 4px;
}

/* Scrollbar for dropdown */
.choices__list--dropdown::-webkit-scrollbar {
    width: 6px;
}
.choices__list--dropdown::-webkit-scrollbar-thumb {
    background-color: rgba(0,0,0,0.2);
    border-radius: 3px;
}

/* Utility: visually hidden */
.sr-only {
	position: absolute !important;
	width: 1px; height: 1px; padding: 0; margin: -1px;
	overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* Simple responsive helpers */
@media (max-width: 720px) {
	.container { padding-left: var(--space-2); padding-right: var(--space-2); }
}

/* Example token usage: components can consume tokens for themeability */
.card {
	background: var(--surface);
	border-radius: var(--radius);
	box-shadow: var(--shadow-sm);
	padding: var(--space-4);
}

/* ===== UTILITY CLASSES ===== */

/* Text color utilities */
.text { color: var(--text); }
.text-primary { color: var(--primary); }
.text-secondary { color: var(--secondary); }
.text-muted { color: var(--muted); }
.text-white { color: #ffffff; }

/* Background color utilities */
.bg { background-color: var(--bg); }
.bg-surface { background-color: var(--surface); }
.bg-theme-primary { background-color: var(--primary); }
.bg-theme-secondary { background-color: var(--secondary); }
.bg-theme-tertiary { background-color: var(--tertiary); }
.bg-muted { background-color: var(--muted); }
.bg-white{ background-color: #ffffff; }

/* Text on primary background (for contrast) */
.bg-theme-primary { color: var(--tertiary); }
.bg-theme-secondary { color: var(--tertiary); }

/* Padding utilities */
.p-1 { padding: var(--space-1); }
.p-2 { padding: var(--space-2); }
.p-3 { padding: var(--space-3); }
.p-4 { padding: var(--space-4); }

.px-1 { padding-left: var(--space-1); padding-right: var(--space-1); }
.px-1h { padding-left: calc(var(--space-1) * 1.5); padding-right: calc(var(--space-1) * 1.5); }
.px-2 { padding-left: var(--space-2); padding-right: var(--space-2); }
.px-3 { padding-left: var(--space-3); padding-right: var(--space-3); }
.px-4 { padding-left: var(--space-4); padding-right: var(--space-4); }

.py-1 { padding-top: var(--space-1); padding-bottom: var(--space-1); }
.py-2 { padding-top: var(--space-2); padding-bottom: var(--space-2); }
.py-3 { padding-top: var(--space-3); padding-bottom: var(--space-3); }
.py-4 { padding-top: var(--space-4); padding-bottom: var(--space-4); }

.pleft-1 { padding-left: var(--space-1); }
.pleft-2 { padding-left: var(--space-2); }
.pleft-3 { padding-left: var(--space-3); }
.pleft-4 { padding-left: var(--space-4); }
.pright-1 { padding-right: var(--space-1); }
.pright-2 { padding-right: var(--space-2); }
.pright-3 { padding-right: var(--space-3); }
.pright-4 { padding-right: var(--space-4); }

.ptop-1 { padding-top: var(--space-1); }
.ptop-2 { padding-top: var(--space-2); }
.ptop-3 { padding-top: var(--space-3); }
.ptop-4 { padding-top: var(--space-4); }

.pbottom-1 { padding-bottom: var(--space-1); }
.pbottom-1h { padding-bottom: calc(var(--space-1) * 1.5); }
.pbottom-2 { padding-bottom: var(--space-2); }
.pbottom-3 { padding-bottom: var(--space-3); }
.pbottom-4 { padding-bottom: var(--space-4); }

/* Margin utilities */
.m-1 { margin: var(--space-1); }
.m-2 { margin: var(--space-2); }
.m-3 { margin: var(--space-3); }
.m-4 { margin: var(--space-4); }

.mx-1 { margin-left: var(--space-1); margin-right: var(--space-1); }
.mx-2 { margin-left: var(--space-2); margin-right: var(--space-2); }
.mx-3 { margin-left: var(--space-3); margin-right: var(--space-3); }
.mx-4 { margin-left: var(--space-4); margin-right: var(--space-4); }

.my-1 { margin-top: var(--space-1); margin-bottom: var(--space-1); }
.my-2 { margin-top: var(--space-2); margin-bottom: var(--space-2); }
.my-3 { margin-top: var(--space-3); margin-bottom: var(--space-3); }
.my-4 { margin-top: var(--space-4); margin-bottom: var(--space-4); }

.mt-1 { margin-top: var(--space-1); }
.mt-2 { margin-top: var(--space-2); }
.mt-3 { margin-top: var(--space-3); }
.mt-4 { margin-top: var(--space-4); }

.mb-1 { margin-bottom: var(--space-1); }
.mb-1h { margin-bottom: calc(var(--space-1) * 1.5); }
.mb-2 { margin-bottom: var(--space-2); }
.mb-3 { margin-bottom: var(--space-3); }
.mb-4 { margin-bottom: var(--space-4); }

/* Border radius utilities */
.rounded-sm, .module .rounded-sm { border-radius: var(--radius-sm)!important; }
.rounded, .module .rounded { border-radius: var(--radius)!important; }
.rounded-full, .module .rounded-full { border-radius: 80px!important; }

/* Shadow utilities */
.shadow-sm { box-shadow: var(--shadow-sm); }
.shadow { box-shadow: var(--shadow); }

/* Display utilities */
.flex { display: flex; }
.flex-col { display: flex; flex-direction: column; }
.flex-center { display: flex; align-items: center; justify-content: center; }
.block { display: block; }
.inline-block { display: inline-block; }
.hidden { display: none; }

/* Flexbox utilities */
.gap-1 { gap: var(--space-1); }
.gap-2 { gap: var(--space-2); }
.gap-3 { gap: var(--space-3); }
.gap-4 { gap: var(--space-4); }

.items-center { align-items: center; }
.items-start { align-items: flex-start; }
.items-end { align-items: flex-end; }

.justify-start { justify-content: flex-start; }
.justify-center { justify-content: center; }
.justify-end { justify-content: flex-end; }
.justify-between { justify-content: space-between; }

/* Width utilities */
.w-full { width: 100%; }
.w-auto { width: auto; }

/* Font weight utilities */
.font-normal { font-weight: 400; }
.font-semibold { font-weight: 600; }
.font-bold { font-weight: 700; }

/* Text alignment */
.text-left { text-align: left; }
.text-center { text-align: center; }
.text-right { text-align: right; }

.container-fluid, div[class*="wp-container-core-columns-is-layout"]{
    padding-left: var(--space-4)!important;
    padding-right: var(--space-4)!important;
    margin-left: auto;
    margin-right: auto;
}

/* Border radius */
.radius-xs {
	border-radius: var(--radius-xs);
}
.radius-sm {
	border-radius: var(--radius-sm);
}
.radius-md {
	border-radius: var(--radius-md);
}
.radius-lg {
	border-radius: var(--radius-lg);
}
.radius-xl {
	border-radius: var(--radius-xl);
}
.radius-xxl {
	border-radius: var(--radius-xxl);
}
.radius{
	border-radius: var(--radius-sm);
}

/* End of token-driven neutral defaults */

/* Site header / logo styles */
.site-header #toolbar{
    padding-top: var(--space-1);
    padding-bottom: var(--space-1);
}
.site-branding{
	padding-top: var(--space-2);
    padding-bottom: var(--space-2);
}
.site-logo img {
    max-height: 64px;
    height: auto;
    width: 100px;
}
.wp-image{
	max-width: 100%;
}
.menu, .menu ul, .ctas{
    list-style: none;
    margin: 0;
    padding: 0;
}
.menu li a{
    color: inherit;
    text-decoration: none;
}
.menu .sub-menu{
    display: none;
}
.icon-phone{
	background: url('assets/images/icon-phone.svg') no-repeat center center;
	background-size: contain;
	display: inline-block;
	width: 24px;
	height: 24px;
}
.icon-email{
	background: url('assets/images/icon-email.svg') no-repeat center center;
	background-size: contain;
	display: inline-block;
	width: 30px;
	height: 26px;
}
.menu .has-icon{
	display: flex;
	align-items: center;
	gap: var(--space-1);
}
.flex-fill-2{
	flex: 0 0 50%;	
}
.flex-fill-3{
	flex: 0 0 33.33%;	
}
.flex-fill-4{
	flex: 0 0 25%;	
}
.flex-fill-5{
	flex: 0 0 20%;	
}
.swiper-button-prev svg,  .swiper-button-next svg{
  display: none!important;
}
.swiper-button-prev, .swiper-button-next{
  background: url('assets/images/icon-arrow-circle.svg') no-repeat center!important;
  background-size: contain!important;
  width: 30px!important;
  height: 30px!important;
  position: relative!important;
  left: auto!important;
  right: auto!important;
  margin: 0!important;
  top: 0!important;
  bottom: 0!important;
}
.swiper-button-next{
  transform: rotate(180deg);
}
.gap-1{
	gap: var(--space-1);
}
.gap-2{
	gap: var(--space-2);
}
.gap-3{
	gap: var(--space-3);
}
.gap-4{
	gap: var(--space-4);
}
.module .intro{
	margin-bottom: var(--space-3);
}
.font-large{
	font-size: 2em;
}
.font-large *{
	font-size: 1em;
}
.font-large .title{
	font-size: 2em;
}
.large-text{
	font-size: 1.2em;
	line-height: 1.4em;
}
.has-border{
	border: 1px solid var(--primary);
}
.nav-tabs .nav-item{
	width: 100%;
	margin-bottom: var(--space-1);
}
.nav-tabs .nav-link{
	width: 100%;
	border-radius: 0;
}
.social-links{
	list-style: none;
	padding-left: 0;
	display: flex;
	gap: 10px!important;
}
.social-links li a {
    font-size: 0!important;
    width: 32px;
    height: 32px;
    border-radius: 0;
    background: 0 0;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
}
.social-links li a:before {
    height: 32px;
    width: 32px;
}
.social-links a[href*="facebook"]:before{
    content: '';
    background: url('assets/images/social-fb.svg') no-repeat center;
    background-size: contain;
    display: block;
}
.social-links a[href*="instagram"]:before{
    content: '';
    background: url('assets/images/social-ig.svg') no-repeat center;
    background-size: contain;
    display: block;
}
.social-links a[href*="youtube"]:before{
    content: '';
    background: url('assets/images/social-youtube.svg') no-repeat center;
    background-size: contain;
    display: block;
}
.social-links a[href*="linkedin"]:before{
    content: '';
    background: url('assets/images/social-linkedin.svg') no-repeat center;
    background-size: contain;
    display: block;
}
.swiper-pagination-bullet{
	background: transparent!important;
	border: 1.5px solid var(--surface-button-bg)!important;
	opacity: 1!important;
}
.swiper-pagination-bullet.swiper-pagination-bullet-active{
	background: var(--surface-button-bg)!important;
}
.dotpoints-brand ul, .dotpoints-brand ol{
	list-style-type: none;
	padding-left: 0;
	margin-bottom: var(--space-2);
}
.dotpoints-brand ul:not(.ctas) li, .dotpoints-brand ol li{
	position: relative;
	padding-left: 25px;
}
.dotpoints-brand ul:not(.ctas) li:before, .dotpoints-brand ol li:before{
	content: '';
	background: url('assets/images/icon-gear.png');
	display: block;
    width: 16px; 
    height: 16px;
	position: absolute;
	left: 0;
    top: 4px;
    background-size: cover;
}
ul, ol{
	padding-left: 20px;
}
ul li, ol li{
	margin-bottom: var(--space-05);
}
.modal-dialog{
	max-width: calc(100% - 200px);
}
.ctas{
	margin-top: var(--space-2);
	margin-bottom: var(--space-1);
}
.column-count-2{
	column-count: 2;
}
.accordion-item-heading{
	font-weight: 700;
}
.accordion-item-button::after{
	background-color: var(--primary);
}
.accordion-item-button:hover::after{
	background-color: var(--surface-button-hover-bg);
}
.txt-center{
	text-align: center;
}
.mw-50{
	max-width: 50%;
}
.wp-block-columns .wp-block-columns{
	padding-left: 0!important;
	padding-right: 0!important;
}
.post-featured-image .wp-image{
	width: 100%;
}
.single .post-content *:not(.module, .wp-block-columns){
	max-width: 1000px;
	margin-left: auto;
	margin-right: auto;
}
.relative{
	position: relative;
}
.breadcrumbs ol{
	list-style: none;
	padding-left: 0;
	margin-bottom: 0;
}
.breadcrumbs li{
	display: inline-block;
	margin: 5px 10px 5px 0
}
.breadcrumbs li a {
	font-weight: 700;
	text-decoration: none;
}
.breadcrumb-separator{
	position: relative;
	margin-right: 10px;
}
.breadcrumb-separator::before{
	content: '';
	display: block;
	width: 7px;
	height: 7px;
	border: solid black;
	border-width: 0 2px 2px 0;
	display: inline-block;
	padding: 2px;
	transform: rotate(-45deg);
	-webkit-transform: rotate(-45deg);
	position: relative;
	top: -2px;
}
.site-footer .widget img{
	max-width: 100%;
}
.gform_wrapper form.grid{
	justify-content: space-between;
	align-items: flex-end;
}
body:not(.gform-admin) .module form.grid .gform_fields{
	display: flex!important;
}
.fade-slide-up{
	position: relative;
    opacity: 0;
    -webkit-transform: translateY(80px);
    -moz-transform: translateY(80px);
    -ms-transform: translateY(80px);
    -o-transform: translateY(80px);
    transform: translateY(80px);
    -webkit-transition: -webkit-transform .7s ease 0s, opacity .7s ease 0s;
    -moz-transition: -moz-transform .7s ease 0s,opacity .7s ease 0s;
    -ms-transition: -ms-transform .7s ease 0s,opacity .7s ease 0s;
    -o-transition: -o-transform .7s ease 0s,opacity .7s ease 0s;
    transition: transform .7s ease 0s, opacity .7s ease 0s;
}
.fade-slide-up.animate{
	opacity: 1;
    -webkit-transform: translateY(0);
    -moz-transform: translateY(0);
    -ms-transform: translateY(0);
    -o-transform: translateY(0);
    transform: translateY(0);
    -webkit-transition: -webkit-transform 1.4s ease 0s, opacity 1.4s ease 0s;
    -moz-transition: -moz-transform 1.4s ease 0s,opacity 1.4s ease 0s;
    -ms-transition: -ms-transform 1.4s ease 0s,opacity 1.4s ease 0s;
    -o-transition: -o-transform 1.4s ease 0s,opacity 1.4s ease 0s;
    transition: transform 1.4s ease 0s, opacity 1.4s ease 0s;
}
.mobile-menu-navbar, .mobile-menu{
	display: none;
}
.post-item.search-item{
	margin-bottom: var(--space-2);
}
.text-center .ctas.d-flex{
	justify-content: center;
}
.text-only .ctas:last-child{
	margin-bottom: 0;
}
span.button a{
	text-decoration: none;
}

@media screen and (max-width: 1199px){
	.modal-dialog{
		max-width: calc(100% - 120px);
	}
}

@media screen and (max-width: 991px){
	.modal-dialog{
		max-width: calc(100% - 60px);
	}
	.module:not(.split) .intro{
		display: block!important;
	}
	.module:not(.split) .intro .ctas{
		margin-top: var(--space-1)!important;
	}
	.mobile-menu-navbar{
		display: block;
	}
	.mobile-menu-navbar button{
		min-width: 40px!important;
		min-height: 40px!important;
		border-radius: 0!important;
		font-size: 0!important;
		padding: 0!important;
		position: relative;
		z-index: 3;
		background-color: transparent!important;
	}
	.navbar-header button .screen-reader{
		text-indent: -9999px;
		float: none;
		font-size: 0em;
		width: 0;
		height: 0;
	}
	.screen-reader.close{
		opacity: 0;
		visibility: hidden;
		position: absolute;
		left: 0;
		z-index: -1;
	}
	.menu-overlay .screen-reader{
		opacity: 0;
		visibility: hidden;
	}
	.menu-overlay .screen-reader.close{
		opacity: 1;
		visibility: visible;
	}
	body.menu-overlay{
		overflow: hidden;
	}
	.mobile-menu {
		display: block;
		-webkit-box-sizing: border-box;
		box-sizing: border-box;
		position: fixed;
		top: 0;
		left: 0;
		width: 100%;
		opacity: 0;
		visibility: hidden;
		-webkit-transition: opacity .2s,visibility 0s .2s;
		-o-transition: opacity .2s,visibility 0s .2s;
		transition: opacity .2s,visibility 0s .2s;
		z-index: 1000;
		-webkit-box-ordinal-group: 2;
		-webkit-order: 1;
		-ms-flex-order: 1;
		height: 100vh;
		margin: 0;
		padding: 0;
		background: #fff;
		overflow-x: auto;
		overflow-y: scroll;
		-webkit-overflow-scrolling: touch;
	}
	.icon-bar {
		background: var(--text);
		display: block;
		width: 35px;
		height: 4px;
		border-radius: 4px;
		margin: 0;
		z-index: 2;
		filter: unset!important;
	}
	.menu-overlay .icon-bar{
		background: var(--text);
	}
	.menu-overlay .navbar-header button .screen-reader{
		color: #fff;
	}
	.icon-bar.top {
		top: 7px;
		right: 0;
		-webkit-transition: -webkit-transform .4s,top .2s .2s;
		-o-transition: -o-transform .2s,top .2s .2s;
		transition: transform .2s,top .2s .2s;
		position: absolute;
	}
	.icon-bar.middle {
		top: 18px;
		right: 0;
		-webkit-transition: -webkit-transform .4s,top .2s .2s;
		-o-transition: -o-transform .2s,top .2s .2s;
		transition: transform .2s,top .2s .2s;
		position: absolute;
	}
	.icon-bar.bottom {
		bottom: 6px;
		right: 0;
		-webkit-transition: -webkit-transform .2s,bottom .2s .2s;
		-o-transition: -o-transform .2s,bottom .2s .4s;
		transition: transform .2s,bottom .2s .2s;
		position: absolute;
	}
	.mobile-menu #mega-menu, .mobile-menu #mega-menu .mega-menu-parents{
		display: block;
	}
	body.mega-menu-open .mobile-menu{
		opacity: 1;
		visibility: visible;
	}
	body.mobile-menu-open .icon-bar.top{
		transform: rotate(45deg);
		top: 18px;
	}
	body.mobile-menu-open .icon-bar.bottom{
		transform: rotate(-45deg);
		bottom: 18px;
	}
	body.mobile-menu-open .icon-bar.middle{
		opacity: 0;
	}
}