/* flyout trigger buttons only viewable in backend */
body:not(.fl-builder-edit) .uabb-offcanvas-trigger {
    display: none !important;
}
body.fl-builder-edit .uabb-offcanvas-trigger {
    margin-top: 66px;
}


/* when uabb-offcanvas is open */
html:has(.uabb-off-canvas-show){
    overflow-y: hidden; /* prevent document from scrolling behind overlay */
}
.admin-bar .uabb-offcanvas {
    margin-top: 32px; 
    padding-bottom: 32px;
}
.uabb-offcanvas {
    overscroll-behavior: contain; /* prevents scroll chaining, which causes grey-ed out document to scroll while flyout is open */
}

/**************************/
/*  START :: Flyout Hero  */
/**************************/
.hero-flyout {
    position: relative;
}
.hero-flyout .fl-row-content:before {
    border-left: 1.5px dashed var(--blood-red);
    bottom: 0;
    content: '';
    height: 100%;
    left: 70px;
    position: absolute;
    top: 0;
    width: 1px;
    z-index: 2;
}
@media only screen and (min-width: 1367px) {
    .hero-flyout > .fl-row-content-wrap {
        padding-left: 28px !important;
    }
}
/* Everything below XL Desktop */
@media only screen and (max-width: 1366px) {
    .hero-flyout .maxwidth700 {
        max-width: 490px;
    }
    .hero-flyout > .fl-row-content-wrap {
        padding-left: 36px !important;
    }
}
/* Tablet */
@media only screen and (max-width: 992px) {
    .hero-flyout .fl-row-content:before {
        left: 69px;
    }
    .hero-flyout > .fl-row-content-wrap,
    .row--3card .fl-row-content > .fl-module-box {
        padding-left: 52px !important;
    }
}
/* Mobile */
@media only screen and (max-width: 768px) {
    .hero-flyout .fl-row-content:before {
        display: none;
    }
    .hero-flyout > .fl-row-content-wrap,
    .row--3card .fl-row-content > .fl-module-box {
        padding-left: 18px !important;
    }
}
/**************************/
/*  END   :: Flyout Hero  */
/**************************/

/* flyout as individual post */

body:not(.fl-builder-edit).flyout-template-default .hero-grayscale .fl-row-content-wrap {
    opacity: 0;
}
body:not(.fl-builder-edit).flyout-template-default .hero .fl-row-content-wrap{
    padding-top: 170px !important;
    padding-left: var(--content-padding) !important;
    padding-right: var(--content-padding) !important;
}
body:not(.fl-builder-edit).flyout-template-default .flyout--bio .fl-row-content-wrap {
    padding-top: 170px !important;
}
body:not(.fl-builder-edit).flyout-template-default .flyout--spacer {
    display: none;
}

body:not(.fl-builder-edit).flyout-template-default .flyout--bio .fl-col-group-equal-height > div:first-of-type > .fl-col-content {
    padding-left: var(--content-padding) !important;
}
body:not(.fl-builder-edit).flyout-template-default .flyout--bio .fl-col-group-equal-height > div:last-of-type > .fl-col-content{
    padding-right: var(--content-padding) !important;
}
/* BB XL DESKTOP, and up */
@media only screen and (min-width: 1367px) {
    body:not(.fl-builder-edit).flyout-template-default .hero .fl-row-content,
    body:not(.fl-builder-edit).flyout-template-default .content .fl-row-content {
        max-width: 1366px;
        margin: auto;
        padding-left: var(--content-padding) !important;
        padding-right: var(--content-padding) !important;
    }
}
/* BB Tablet */
@media only screen and (max-width: 768px) {
    body:not(.fl-builder-edit).flyout-template-default .hero .fl-row-content-wrap,
    body:not(.fl-builder-edit).flyout-template-default .flyout--bio .fl-row-content-wrap {
        padding-top: 84px !important;
    }
    body:not(.fl-builder-edit).flyout-template-default .flyout--bio .fl-row-content-wrap {
        padding-left: 0;
        padding-right: 0;
    }
}
        

/* flyout */
.uabb-offcanvas {
    max-width: 100% !important;
}
.uabb-offcanvas-animating, .uabb-offcanvas, .uabb-offcanvas-overlay {
    -webkit-transition: all .75s;
    transition: all .75s;
}

/* close button */
.uabb-offcanvas .uabb-offcanvas-close-icon-wrapper .uabb-offcanvas-close {
    background: var(--Pink);
    border: 1px solid var(--Pink) !important;
    border-radius: 50%;
    height: 51px;
    line-height: 0;
    margin: 10px 8px;
    /* opacity: 0; */
    /* pointer-events: none; disable buttons on flyouts that aren't open, so they don't block ones that are */
    /* position: fixed; */
    /* top: 50px; */
    /* transition: all .05s ease-in-out;
    transition-delay: -.25s;
    transition-property: opacity; */
    width: 51px;
}
/* .uabb-offcanvas.uabb-off-canvas-show .uabb-offcanvas-close-icon-wrapper .uabb-offcanvas-close {
    opacity: 1;
    pointer-events: auto; /* reenable button on flyout that is open 
    right: 0;
    transition-delay: 1.5s;
    transition: opacity 1s ease-in-out;
} */
body.admin-bar .uabb-offcanvas-close-icon-wrapper .uabb-offcanvas-close {
    margin-top: calc(var(--admin-bar-height) + 19px);
}

.uabb-offcanvas-close-icon-wrapper .uabb-offcanvas-close-icon {
    line-height: 0.65;
    pointer-events: none;
}
.uabb-offcanvas-close .fa-times:before {
    content: url('/wp-content/uploads/action-close.svg');
    pointer-events: none;
}
.uabb-offcanvas .fl-builder-content { 
    background-color: var(--Beige); 
}

/* BB Tablet */
@media only screen and (max-width: 992px) {
     .uabb-offcanvas .uabb-offcanvas-close-icon-wrapper .uabb-offcanvas-close {
        margin: 15px 8px;
    }
}
/* BB Mobile */
@media only screen and (max-width: 768px) {
    /* close button */
    .uabb-offcanvas .uabb-offcanvas-close-icon-wrapper .uabb-offcanvas-close {
        height: 31px;
        margin: 7px 3px;
        width: 31px
    }
    .uabb-offcanvas-close .fa-times:before {
        content: "\f00d"; /* reset to webfont version for mobile */
    }
    .uabb-offcanvas .uabb-offcanvas-close-icon-wrapper .uabb-offcanvas-close-icon {
        color: var(--Purple);
    }
}