/*
Theme Name: The Pageking Framework
Theme URI: https://www.pageking.nl
Version: 2.0
Description: Framework of the kings
Author: Pageking - Full swing digital agency
Author URI: https://www.pageking.nl
template: bb-theme
*/

/* Add your custom styles here... */ 
.fl-page{
  overflow: clip;
}

:root{
  /* Headings */
  --heading-1-large: clamp(64px, 9.8vw, 120px);
  --heading-1: clamp(54px, 8.1632653061vw, 100px);

  --heading-2: clamp(38px, 4.7346938776vw, 58px);

  --heading-3: clamp(32px, 3.4285714286vw, 42px);

  --heading-4: clamp(28px, 2.9387755102vw, 36px);

  --heading-5: clamp(22px, 2.2857142857vw, 28px);

  /* Text Variables */
  --body-xl: 22px;
  --body-l: 20px;
  --body-m: 18px;
  --body-s: 16px;
  --body-xs: 14px;


  /* Text Weights */
  --weight-regular: 400;
  --weight-bold: 500;

  
  /* -- Primary Colors -- */
  --tech-green: #9EFF00;
  --circuit-blue: #003A51;
  --charcoal: #2F3034;

  
  /* -- Secondary Colors -- */
  --turquoise-light: #CDE1B0;
  --turquoise-medium: #6BBE98;
  --turquoise-dark: #1A6D75;

  --blue-light: #ACC6FA;
  --blue-medium: #6A9FD3;
  --blue-dark: #2C678E;

  --purple-light: #B9ACD1;
  --purple-medium: #825699;
  --purple-dark: #5D286F;

  --orange-light: #E8A166;
  --orange-medium: #DF7A2E;
  --orange-dark: #D85839;

  
  /* -- Neutrals -- */
  --pure-white: #FFFFFF;
  --off-white: #F8F7F5;
  --beige: #EAE8E3;
  --light-gray: #EDEDED;

  --pure-black: #000000;
  --off-black: #1F212B;
  --dark-gray: #585A5F;
  --mid-gray: #8C8C90;

  /* ??? extra ofzo ??? */
  --blue: #003042;

  /* NOTE: alle spacings op de website op REM basis!!! 1rem = 16px */
}
html .fl-page-content{
    position: relative;
    z-index: 1;
    background-color: var(--off-white);
    overflow:  clip;
}
html body:not(.wp-admin) h1{
    font-size: var(--heading-1);
    line-height: 1;
}
html body:not(.wp-admin) h2{
    font-size: var(--heading-2);
    line-height: 1.2;
}
html body:not(.wp-admin) h3{
    font-size: var(--heading-3);
    line-height: 1.2;
}
html body:not(.wp-admin) h4{
    font-size: var(--heading-4);
    line-height: 1.2;
}
html body:not(.wp-admin) h5{
    font-size: var(--heading-5);
    line-height: 1.2;
}

html body dialog{
    border-radius: 1rem;
    text-align: left;
}
html body dialog > .dialog-wrapper{
    position: relative;
}

html body dialog > .dialog-wrapper h3{
  margin-bottom: 0.7em;
}

html body dialog > .dialog-wrapper .close-button{
    position: absolute;
    top: 0; right: 0;
}

html body .text_wrapper ul{
  padding-left: 20px;
}

html body #pk_flex_content .text_wrapper blockquote:has(+ p > i),
html body #pk_flex_content .text_wrapper blockquote:has(+ p > em){
  margin-bottom: 0px;
}

html body #pk_flex_content .text_wrapper blockquote:has(+ p > i) > p,
html body #pk_flex_content .text_wrapper blockquote:has(+ p > em) > p{
  margin-bottom: 0.7rem; 
}

html body #pk_flex_content .text_wrapper blockquote + p > i,
html body #pk_flex_content .text_wrapper blockquote + p > em{
  font-style: normal;
  font-weight: 500;
}

html body .text_wrapper p{
  margin-bottom: 1.5rem;
}

html body .text_wrapper h1,
html body .text_wrapper h2,
html body .text_wrapper h3,
html body .text_wrapper h4,
html body .text_wrapper h5,
html body .text_wrapper h6{
  margin-top: 0.9em;
  margin-bottom: 0.6em;
}

html body .text_wrapper > h1:nth-child(1),
html body .text_wrapper > h2:nth-child(1),
html body .text_wrapper > h3:nth-child(1),
html body .text_wrapper > h4:nth-child(1),
html body .text_wrapper > h5:nth-child(1),
html body .text_wrapper > h6:nth-child(1){
  margin-top: 0em;
}

html body .text_wrapper h2{
  font-size: var(--heading-3);
}

html body .text_wrapper h3{
  font-size: var(--heading-4);
}

html body .text_wrapper h4{
  font-size: var(--heading-5);
}

html body .text_wrapper h5{
  font-size: var(--heading-6);
}

html body .text_wrapper img{
  margin-top: 0.9em;
  margin-bottom: 0.6em;
}

html body .fl-page a.button{
    background-color: var(--tech-green);
    color: var(--pure-black);
    font-weight: var(--weight-bold);
    border-radius: .5rem;
    display: flex;
    width: fit-content;
    align-items: center;
    padding: .75rem 1.125rem;
    transition: background-color 300ms ease-in-out,
                color 300ms ease-in-out;
}

html body .fl-page a.button:is(:hover,:active,:focus){
    background-color: var(--off-black);
    color: var(--pure-white);
    border-radius: .5rem;
}

html body .fl-page a.button .button_text{
    display: flex; align-items: center; gap: .75rem;
    color: inherit;
    font-weight: var(--weight-bold);
    font-family: 'PP Neue Montreal';
}

html body .fl-page a.button.sec_knop {
	background-color: transparent;
	padding: 0px;
	border: 0px;
	color: var(--wp--preset--color--fl-accent);
}

html body .fl-page a.button.sec_knop .button_text {
	align-items: center;
	color: white;
}

html body .fl-page a.button.sec_knop .button_text::after {
	content: '';
	width: 2.25rem;
	height: 2.25rem;
	background-image: url("data:image/svg+xml,%3Csvg width='32' height='33' viewBox='0 0 32 33' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Crect y='0.444336' width='32' height='32' rx='4' fill='%239EFF00'/%3E%3Cpath d='M8 16.4443L24 16.4443M24 16.4443L18 10.4443M24 16.4443L18 22.4443' stroke='%232F3034' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E%0A");
	background-position: center;
	background-size: contain;
	background-repeat: no-repeat;
	transition: all 0.3s;
}

html body .fl-page a.button.sec_knop:is(:hover,:active,:focus){
	background-color: transparent;
	padding-inline: 0px;
	border: 0px;
	color: white;
}

html body .fl-page a.button.sec_knop:hover .button_text::after {
	transform: translateX(5px);
}


* {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

header:not(.fl-theme-builder-header-sticky){
  position: relative;
  z-index: 99999;
}


button.cc-revoke.cc-bottom:active,
#cmplz-manage-consent .cmplz-manage-consent:active{
    top: unset !important;
    bottom: 0px !important;
    position: fixed !important;
}

/*LIST STYLE UL OL*/
.site-inner ul li, .site-inner ol li{
    list-style-position: inside;
}

.site-inner ul li{
    list-style-type: disc;
}

.site-inner ol li{
    list-style-type: decimal;
}

/*VERWIJDERD OMLIJNING POSTGRID*/
.fl-post-grid-post {
    border: 0px solid #e6e6e6;
}

/* video player lightbox */
.fl-button-lightbox-wrap .mfp-content{
    background: transparent !important;
}
.mfp-iframe{
    border: 0px !Important;
}
div.mfp-wrap .mfp-content button.mfp-close{
    background: transparent !important;
    color: white !important;
    font-size: 39px !important;
    margin-top: -30px !important;
    margin-right: -20px !important;
}

.accordion .accordion-content {
    max-height: 0; overflow: hidden; transition: all 0.3s ease-in-out;
}

#regionPopup{
    overflow: visible;
}

#regionPopup .close-button{
    display: flex;
    align-items: center;
    gap: 1rem;
    top: 3.5rem; right: 3.5rem;
    background-color: transparent;
    border: none;
    border-radius: unset;
    color: var(--charcoal);
    font-size: var(--body-m);
    padding: 0;
    z-index: 1;
}

#regionPopup .close-button::after{
    content: '';
    width: 3.25rem; aspect-ratio: 1;
    background-color: rgba(47, 48, 52, 0.05);
    border-radius: .25rem;
    background-image: url(/wp-content/themes/bb-theme-child/assets/images/x.svg);
    background-size: 50% 50%;
    background-position: center;
    background-repeat: no-repeat;

}

#regionPopup button[type="submit"]{
    background-color: var(--tech-green);
    padding: .8rem 1.3rem;
    border-radius: .5rem;
    margin-top: 1.5rem;
    transition: all 0.3s;
}

#regionPopup button[type="submit"]:hover{
  color: white;
  background-color: black;
}

.custom_region_selector{
    border: 1px solid rgb(0, 58, 81, 0.75);
    cursor: pointer;
    border-radius: .25rem;
    padding: 1rem 1.5rem;
    position: relative;
}
.custom_region_selector::after {
    background-color: var(--tech-green);
    border-radius: .25rem;
    content: '';
    position: absolute;
    top: 50%; right: 2.25rem;
    transform: translateY(-50%);
    width: 2rem;
    height: 2rem;
    background-image: url(/wp-content/themes/bb-theme-child/assets/images/dropdown_arrow.svg);
    background-size: 100% 150%;
    background-position: 50% -30%;
    background-repeat: repeat-x;
    transition: background-position 250ms ease-in-out;
}
.custom_region_selector.open::after{
    background-position: 50% 130%;
}
.custom_region_selector .label{
    color: rgb(0, 58, 81, 0.75);
    font-size: var(--body-s);
}
.custom_region_selector .selected{
    font-weight: var(--weight-bold);
    font-size: var(--body-l);
}
.custom_region_selector.open .options{
    opacity: 1;
    pointer-events: all;
    max-height: 300px;
    overflow: scroll;
}
.custom_region_selector .options{
    position: absolute;
    width: calc(100% + 2px);
    top: calc(100% - .2rem);
    left: -1px;
    border: 1px solid rgb(0, 58, 81, 0.75);
    border-radius: 0 0 .25rem .25rem;
    overflow: hidden;
    pointer-events: none;
    opacity: 0;
}
.custom_region_selector .option{
    position: relative;
}
.custom_region_selector .option input{
    appearance: none;
    position: absolute;
}
.custom_region_selector .option label{
    width: 100%;
    padding: 1rem 1.5rem;
    margin-bottom: 0;
    cursor: pointer;
}
.custom_region_selector .option:nth-child(odd) label{
    background-color: var(--off-white);
}
.custom_region_selector .option:nth-child(even) label{
    background-color: var(--pure-white);
}


#ecommercePopup{
    right: 0;
    left: auto;
    border-radius: 0;
    height: 100dvh;
    max-height: unset;
    margin-block: 0;
    overflow: auto;
}

#ecommercePopup .dialog-wrapper{
    width: clamp(500px, 30vw, 800px);
    height: 100%;
    background-color: var(--circuit-blue);
    overflow: auto;
    color: var(--pure-white);
    display: flex; flex-direction: column;
    padding: 0;
}

#ecommercePopup .dialog-wrapper > div{
    padding: 2.5rem 3.5rem 1rem 3.5rem;
}
#ecommercePopup .dialog-wrapper .header{
    padding: 1rem 1.5rem;
    background-color: var(--circuit-blue);
    position: sticky; top: 0;

    display: flex; align-items: center;
    justify-content: space-between;
    border-bottom: 1px solid rgba(255, 255, 255, 0.2)
}

#ecommercePopup .dialog-wrapper .header h4{
    color: inherit;
    margin-bottom: 0;
    font-size: var(--heading-5); 
}

#ecommercePopup .dialog-wrapper .content{
    display: flex; flex-direction: column;
    gap: 1.5rem; 
}
#ecommercePopup .dialog-wrapper .content .image{
    text-align: center;
    color: inherit;
}

#ecommercePopup .dialog-wrapper .content .image .heading{
    font-size: var(--heading-5);
    font-weight: var(--weight-bold);
    color: currentColor;
}

#ecommercePopup .dialog-wrapper .content .usps{
    list-style: none;
    padding-left: 0;
    margin-top: 1em;
    width: fit-content;
    margin-inline: auto;
}

#ecommercePopup .dialog-wrapper .content .usps li{
    display: flex;
    align-items: center;
    gap: .75em;
    margin-block: 1em;
}

#ecommercePopup .dialog-wrapper .content .usps li::before{
    content: '';
    width: 1em; height: 1em;
    background-color: var(--tech-green);
    mask: url(/wp-content/themes/bb-theme-child/assets/images/check.svg) no-repeat center / contain;
    -webkit-mask: url(/wp-content/themes/bb-theme-child/assets/images/check.svg) no-repeat center / contain;

}

#ecommercePopup .dialog-wrapper .footer{
    margin-top: auto;
    padding: 0rem 3.5rem 2.5rem 3.5rem;
}
#ecommercePopup .dialog-wrapper .footer a{
    width: 100%;
    justify-content: center;
}

#ecommercePopup .dialog-wrapper .footer a.contact_cta_btn{
    width: fit-content;
    margin-inline: auto;
	display: block;
    margin-top: 1rem;
}

#ecommercePopup .close-button{
    position: static;
    /* display: flex; */
    display: grid;
    grid-template-areas: "text icon";
    place-content: center;
    align-items: center;
    gap: 1rem;
    background-color: transparent;
    border: none;
    border-radius: unset;
    color: inherit;
    font-size: var(--body-m);
    padding: 0;
}

#ecommercePopup .close-button::before,
#ecommercePopup .close-button::after{
    grid-area: icon;
}

#ecommercePopup .close-button::before{
    content: '';
    width: 1.25rem; aspect-ratio: 1;
    margin-inline: auto;
    mask: url(/wp-content/themes/bb-theme-child/assets/images/x.svg) no-repeat center / contain;
    -webkit-mask: url(/wp-content/themes/bb-theme-child/assets/images/x.svg) no-repeat center / contain;
    background-color: currentColor;
}

#ecommercePopup .close-button::after{
    content: '';
    width: 3rem; aspect-ratio: 1;
    background-color: rgba(255,255,255, 0.05);
    border-radius: .25rem;
}

/************************/
/* MEDIA QUERIES DESKTOP*/
/************************/
@media screen and (min-width: 993px){
    .pp-content-posts-inner:not(.owl-carousel) .pp-content-post{ 
        width: 31.9% !important;
    }
	.fl-rich-text > blockquote {
		max-width: 75%;
	}
}

/************************/
/* MEDIA QUERIES TABLET */
/************************/
@media screen and (max-width: 992px) {
    
}

/************************/
/* MEDIA QUERIES MOBILE */
/************************/
@media screen and (max-width: 767px) {
    
    .fl-col-small:not(.fl-col-small-full-width) {
        max-width: 100%;
    }
    
    .owl-carousel.owl-loaded{
        overflow: hidden!important;
    }
    
    div.mfp-wrap .mfp-content button.mfp-close{
        background: transparent !important;
        color: white !important;
        font-size: 39px !important;
        margin-top: -40px !important;
        margin-right: 10px !important;
    }

    #regionPopup .close-button{
        top: 1.5rem; right: 1.5rem;
    }

    #regionPopup .close-button::after{
        width: 2.5rem;
    }
    
}







/* HEADER */
#main_menu ul.menu{
    display: flex;
}
#main_menu ul.menu::before,
#main_menu ul.menu::after{
    display: none;
}

#main_menu ul.menu > li:not(.search-button, .menu-btn, .region-button){
    margin-right: 2rem;
}

#main_menu .mega-menu.menu-item-has-children .fl-has-submenu-container a,
#main_menu ul.menu > li:not(.search-button, .menu-btn, .region-button) > a{
    transition: font-weight 300ms ease-in-out;
}

#main_menu .mega-menu.menu-item-has-children .fl-has-submenu-container a:hover,
#main_menu ul.menu > li:not(.search-button, .menu-btn, .region-button) > a:hover{
    font-weight: var(--weight-bold);
}

#main_menu ul.menu li{
    border-left: 0 !important;
}

#main_menu ul.menu > li .spacing{
    font-weight: var(--weight-bold);
    display: block;
    width: fit-content;
    height: 0;
    overflow: hidden;
}

#main_menu ul.menu > li > a{
    display: flex;
    flex-direction: column;
    align-items: center;
}
#main_menu .search-button{
    order: 2;
    margin-right: 1rem;
}
#main_menu .search-button svg{
    display: block;
    width: 1em;
}

#main_menu .region-button{
    order: 4;
    margin-left: .5rem;
}
#main_menu .region-button a{
    background-color: var(--off-white);
    padding: .5rem;
    border-radius: .5rem;
    transition: all 0.3s;
}
#main_menu .region-button a:hover{
    background-color: var(--pure-black);
    color: var(--off-white);
}
#main_menu .region-button svg{
    display: block;
    width: 1.6em;
}

#main_menu .region-button a:hover svg path{
  fill: var(--off-white);
}

#main_menu .menu-btn{
    order: 3;
}
#main_menu .menu-btn a{
    display: block;
    background-color: var(--tech-green);
    color: var(--pure-black);
    line-height: 1.6;
    padding: .5em 1em;
    border-radius: .75rem;
    font-weight: 500;
    transition: all 0.3s;
}
#main_menu .menu-btn a:hover{
  background-color: var(--pure-black);
  color: var(--pure-white);
}
#main_menu .mega-menu.menu-item-has-children .fl-has-submenu-container a{
    display: flex;
    flex-direction: column;
    align-items: center;
}
#main_menu .mega-menu.menu-item-has-children .fl-has-submenu-container{
    display: flex;
    align-items: center;
    gap: .75rem;
}
#main_menu .mega-menu.menu-item-has-children .fl-has-submenu-container::after{
    content: '';
    width: 1em;
    height: 1em;
    background-color: rgba(0,0,0,0.35);
    mask: url(/wp-content/themes/bb-theme-child/assets/images/parent_icon-1.svg) no-repeat center / contain;
    -webkit-mask: url(/wp-content/themes/bb-theme-child/assets/images/parent_icon-1.svg) no-repeat center / contain;
    
    transition: transform 300ms ease-in-out;
}

#main_menu .mega-menu.menu-item-has-children .fl-has-submenu-container:hover::after,
#main_menu .mega-menu.menu-item-has-children .fl-has-submenu-container:has(+ .sub-menu:hover)::after{
    transform: rotate(180deg);
}

#main_menu .mega-menu > .sub-menu .menu-heading span.menu_heading{
    font-size: var(--heading-5);
    font-weight: 500;
    margin-bottom: 0;
    padding-bottom: 1.5rem;
    border-bottom: 1px solid rgba(0,0,0,0.25);
}
#main_menu .mega-menu .fl-has-submenu-container{
    isolation: isolate;
}
#main_menu .mega-menu .fl-has-submenu-container::before{
    content: '';
    width: 300%;
    height: 60px;
    z-index: -1;
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    pointer-events: none;
}
#main_menu .mega-menu:is(:hover, :active, :focus) .fl-has-submenu-container::before{
    pointer-events: all;
}
#main_menu .mega-menu > .sub-menu::before{
    content: '';
    position: absolute;
    width: 100vw;
    height: 100%;
    top: 0; left: 50%;
    transform: translateX(-50%);
    background-color: var(--off-white);
}
#main_menu .mega-menu > .sub-menu{
    top: 100% !important;
    box-shadow: none;
    gap: 2rem;
    padding-block: 4rem;
    width: min(calc(100vw - 40px), calc(1512px - 8.5rem)) !important;
    left: 50% !important;
    /* transform: translateX(-50%); */
    transition: all 0.3s;
    visibility: visible;
    opacity: 0;
    display: flex;
    pointer-events: none;
    transition-delay: 0.2s;
    transform: translate(-50%, -10px);
}

#main_menu .mega-menu > .sub-menu::after{
  content: '';
  position: absolute;
  top: 100%;
  left: -50vw;
  z-index: 1;
  width: 200vw;
  height: 100vh;
  background: linear-gradient(180deg, rgba(0, 0, 0, 0.7) 0%, rgba(0, 0, 0, 0) 100%);
  pointer-events: none;
}

#main_menu .mega-menu:hover > .sub-menu{
    opacity: 1;
    pointer-events: auto;
    transform: translate(-50%, 0px);
}

#main_menu .mega-menu > .sub-menu > .menu-item{
    background-color: var(--pure-white);
    border-radius: .5rem;
    padding: 2.5rem;
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
    width: 50%;
}

#main_menu .mega-menu > .sub-menu > .menu-item .menu-item.counter .count{
    flex-shrink: 0;
    aspect-ratio: 1;
    margin-right: auto; margin-left: .5rem;
    width: 1.25rem; height: auto;
    font-size: var(--body-xs);
    display: flex;
    justify-content: center; align-items: center;
    border-radius: 50%;
    background-color: var(--tech-green);
    
    /* Vraag van Aicha */
    display: none; 
}

#main_menu .mega-menu > .sub-menu .menu-item.cta,
#mobile_menu .menu-item.cta{
    color: var(--pure-white);
    background-color: var(--circuit-blue);
}
.menu-item.cta:not(.featured, .contact){
    background-image: url(/wp-content/themes/bb-theme-child/assets/images/cta_lines.svg);
    background-size: cover;
}

.menu-item.cta span.title{
    font-size: var(--heading-5);
    font-weight: var(--weight-bold);
}
.menu-item.cta > .content > div{
  font-size: 16px;
}

.menu-item.cta.featured .post{
    display: grid;
    color: var(--pure-white);
    grid-template-columns: auto 1fr;
    column-gap: 1rem;
}
.menu-item.cta.featured .post .image{
    grid-row: 1 / 3;
    aspect-ratio: 1;
    max-height: 3rem;
}
.menu-item.cta.featured .post img{
    aspect-ratio: 1;
    border-radius: .5rem;
}
.menu-item.cta.featured .post .title,
.menu-item.cta.featured .post .info{
    grid-column: 2 / 3;
}
.menu-item.cta.featured .post .title{
    font-weight: var(--weight-bold);
    -webkit-line-clamp: 1;
    display: -webkit-box;
    direction: vertical;
    overflow: hidden;
    font-size: 1rem;
    display: block;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.menu-item.cta.featured .post .info{
    display: flex; flex-direction: row; align-items: center;
    gap: .5rem;
    font-size: 1rem;
}
.menu-item.cta.featured .post .info span{
    /* font-size: var(--body-s); */
    font-size: 1rem;
    opacity: .75;
    order: 3;
}
.menu-item.cta.featured .post .info span:nth-child(1){
    order: 1;
}
.menu-item.cta.featured .post .info::before{
    content: '';
    width: .25rem; height: .25rem;
    border-radius: 50%; background-color: var(--tech-green);
    order: 2;
}

#main_menu .mega-menu > .sub-menu > .menu-item.cta.contact{
    display: grid;
    grid-template-columns: 2fr 1fr;
}

#main_menu .mega-menu > .sub-menu > .menu-item.cta.contact .image{
    position: relative;
    overflow: clip;
    aspect-ratio: 1;
    border-radius: .25rem;
}

#main_menu .mega-menu > .sub-menu > .menu-item.cta.contact .image img{
    position: absolute;
    width: 100%; height: 100%;
    object-fit: cover;
}

#main_menu .mega-menu > .sub-menu > .menu-item.cta.contact .content{
    display: flex;
    flex-direction: column;
}

#main_menu .mega-menu > .sub-menu > .menu-item.cta.contact .content a{
    margin-top: auto;
}

.menu-item.cta h5{
    color: inherit;
}
.menu-item.cta .button .menu-item-description{
    display: none;
}
.menu-item.cta .button .icon{
    display: block;
    background-color: currentColor;
    width: 1em; height: 1em;
}
#main_menu .mega-menu > .sub-menu > .menu-item > .sub-menu{
    display: flex;
    flex-direction: column;
    gap: .75rem;
}
#main_menu .mega-menu > .sub-menu > .menu-item.large > .sub-menu{
    gap: 2rem;
}

#main_menu .mega-menu > .sub-menu > .menu-item.two-cols > .sub-menu{
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: 3.5rem;
}


#main_menu .mega-menu > .sub-menu > .menu-item .menu-item a{
    display: flex;
    align-items: center;
    justify-content: space-between;
    white-space: nowrap;
    -webkit-line-clamp: 1;
    overflow: hidden;
}

#main_menu .mega-menu > .sub-menu > .menu-item.large .menu-item a::after{
    background-color: var(--tech-green);
    border-radius: .25rem;
}
#main_menu .mega-menu > .sub-menu > .menu-item .menu-item a::after{
    flex-shrink: 0;
    content: '';
    width: 2rem; height: 2rem;
    background-image: url(/wp-content/themes/bb-theme-child/assets/images/arrow.svg);
    background-size: 200% 45%;
    background-position: 250% 50%;
    background-repeat: repeat-x;
}

@keyframes moveArrow{
    0%{
        background-position: 250% 50%;
    }
    100%{
        background-position: 50% 50%;
    }
}

#main_menu .mega-menu > .sub-menu > .menu-item .menu-item a.animating::after{
    animation: moveArrow 300ms ease-in-out;
}


#searchbar,
#searchbar_mobile{
    position: absolute;
    z-index: 1;
    top: 100%;
    width: 101vw;
    left: 50%;
    /* transform: translate(-50%, -100%); */
    transform: translate(-50%, 0%);
    background-color: var(--circuit-blue);
    padding: 2rem;
    transition: all 300ms ease-in-out;
    pointer-events: none;
    opacity: 0;
}

#searchbar_mobile{
    top: 64px;
    z-index: 101;
    left: 0; right: 0;
    width: 100%;
    transform: translate(0, 0);
    transition: opacity 300ms ease-in-out;
}

.mobile_mega_menu.search_open{
    background-color: transparent;
}
.mobile_mega_menu.search_open #searchbar_mobile{
    opacity: 1;
    pointer-events: all;
    padding: 20px;
}
.mobile_mega_menu.search_open > *:not(#searchbar_mobile){
    opacity: 0;
    pointer-events: none;
}
#searchbar.open{
    /* transform: translate(-50%, 0); */
    pointer-events: all;
    opacity: 1;
}

#searchbar.open::after{
  content: '';
  position: absolute;
  top: 100%;
  left: -50vw;
  z-index: 1;
  width: 200vw;
  height: 100vh;
  background: linear-gradient(180deg, rgba(0, 0, 0, 0.7) 0%, rgba(0, 0, 0, 0) 100%);
  pointer-events: none;
}

#searchbar_mobile .wrapper,
#searchbar .wrapper{
    max-width: 1225px;
    margin-inline: auto;
    display: flex;
    align-items: center;
    gap: 1.5rem;
}
#searchbar_mobile .wrapper form,
#searchbar .wrapper form{
    flex-grow: 1;
}
#searchbar a.close-searchbar svg{
    width: var(--body-m);
}
#searchbar_mobile .is-form-style input.is-search-input,
#searchbar .is-form-style input.is-search-input{
    background: rgba(255,255,255,0.08);
    color: var(--pure-white);
    height: fit-content;
    padding: 1.25rem 2rem;
    font-size: var(--body-l) !important;
    border-radius: .5rem;
    border: 1px solid var(--tech-green) !important;
}
#searchbar .is-form-style input.is-search-input{
    border-color: rgba(255,255,255,0.3) !important;
    transition: border-color 300ms ease-in-out;
}
#searchbar .is-form-style input.is-search-input:focus{
    border-color: var(--tech-green) !important;
}

#searchbar_mobile .is-form-style input.is-search-input{
    font-size: var(--body-s) !important;
    padding: 1rem 1.5rem;
}

#searchbar_mobile .is-form-style input.is-search-input::placeholder,
#searchbar .is-form-style input.is-search-input::placeholder{
    color: var(--pure-white);
    opacity: .5;
}
#searchbar .is-form-style input.is-search-submit,
#searchbar_mobile .is-form-style input.is-search-submit,
#searchbar .is-form-style input.is-search-submit:hover,
#searchbar_mobile .is-form-style input.is-search-submit:hover,
#searchbar .is-form-style input.is-search-submit:active,
#searchbar_mobile .is-form-style input.is-search-submit:active,
#searchbar .is-form-style input.is-search-submit:focus,
#searchbar_mobile .is-form-style input.is-search-submit:focus{
    width: fit-content;
    position: absolute;
    height: calc(100% - 1.5rem);
    background-color: transparent;
    border: 1px solid var(--tech-green) !important;
    border-radius: .5rem;
    font-size: var(--body-m) !important;
    padding: .6rem 1em !important;
    top: .75rem; right: .75rem; bottom: .75rem;
    line-height: 1;
    color: var(--tech-green); font-weight: var(--weight-bold);
    font-family: "PP Neue Montreal",Verdana,Arial,sans-serif;
}


#searchbar_mobile .is-form-style input.is-search-submit,
#searchbar_mobile .is-form-style input.is-search-submit:active,
#searchbar_mobile .is-form-style input.is-search-submit:focus,
#searchbar_mobile .is-form-style input.is-search-submit:hover{
    padding: .2rem 0.75em !important;
    font-size: var(--body-s) !important;
    height: calc(100% - 1rem);
    top: .5rem;
    right: .5rem;
    bottom: .5rem;
}



@media only screen and (max-width: 1099px){
    #main_menu ul.menu{
        font-size: var(--body-xs);
    }
}
@media only screen and (min-width: 1100px){
    #main_menu ul.menu{
        font-size: var(--body-s);
    }
}
@media only screen and (min-width: 1220px){
    #main_menu ul.menu{
        font-size: var(--body-m);
    }
}
@media only screen and (max-width: 1320px){
    #main_menu ul.menu > li:not(.search-button, .menu-btn, .region-button){
        margin-right: 1rem;
    }
    #main_menu .mega-menu.menu-item-has-children .fl-has-submenu-container{
        gap: .5rem;
    }
}










/* FOOTER */
.contact_links a span{
    font-size: var(--heading-4);
    font-weight: var(--weight-bold);
}
.socials{
    display: flex; flex-wrap: wrap;
    flex-direction: row; gap: .5rem;
    margin-top: 1.5rem;
}
.socials a{
    display: flex; align-items: center; justify-content: center; 
    width: 2rem; height: 2rem;
    background-color: rgba(255,255,255,0.07);
    border-radius: .5rem;
    
    transition: background-color 300ms ease-in-out;
}
.socials a:hover,
.socials a:active,
.socials a:focus{
    background-color: rgba(255,255,255,0.2);
}
.socials a span{
    display: block;
    background-color: var(--pure-white);
    width: 1.25rem; height: 1.25rem;
    mask-size: contain; mask-position: center; mask-repeat: no-repeat;
    -webkit-mask-size: contain; -webkit-mask-position: center; -webkit-mask-repeat: no-repeat;
}

.location_grid{
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: 3.5rem;
    row-gap: 3.5rem;
}
.location{
    color: var(--pure-white);
}
.location .title{
    display: flex; align-items: flex-start;
    gap: .5rem;
    font-weight: var(--weight-bold);
    margin-bottom: .5rem;
}
.location .title::before{
    content: '';
    flex-shrink: 0;
    width: .75rem; height: .75rem;
    margin-top: .5rem;
    border-radius: 50%;
    background-color: var(--tech-green);
}

#footer_menu ul.menu::before,
#footer_menu ul.menu::after{
    display: none;
}
#footer_menu ul.menu{
    gap: 2rem;
}

@media only screen and (min-width: 1020px){
    body:not(.wp-admin) footer{
        pointer-events: none;
        isolation: isolate; 
    }
    .footer_row{
        z-index: 1;
        position: relative;
    }
    .footer_row .fl-row-content{
        pointer-events: all;
    }
    .reveal_row{
        position: fixed;
        bottom: 0;
        width: 100%;
        z-index: -1;
    }
    .reveal_row .fl-row-content{
        pointer-events: all;
    }
    .reveal_row::before{
        content: '';
        width: 100%;
        height: 100px;
        position: absolute;
        top: 0;
        left: 0;
        transform: translate(0, -100%);
        background-color: var(--charcoal);
    }
}
@media only screen and (max-width: 1020px){
    .location_grid{
        background-color: rgba(255, 255, 255, 0.07);
        padding: 1rem;
        border-radius: .5rem;
        row-gap: 1.5rem; column-gap: 2.5rem;
        grid-template-columns: repeat(2, minmax(0,1fr));
    }
    #footer_menu ul.menu{
        flex-direction: column;
        align-items: flex-start;
        gap: 1rem;
    }
}
@media only screen and (max-width: 767px){
    .location_grid{
        grid-template-columns: minmax(0,1fr);
    }
}