/*
 Theme Name:   Vida Health
 Description:  Child Theme based on Ultra Theme
 Author:       OFF unit
 Author URI:   https://offunit.com
 Template:     themify-ultra
 Version:      1.0.0
*/


/* Variables */
:root { --white: #fff; --black: #272727; --goldenrod: #fcb216; --orange-dark: #e64325; --orange-mid: #f26422; --orange-red: #e64425; --navy: #192d40; --gray: #e5e5e5; --light-gray: #f6f6f6; }

/* Custom Fonts */


/* Reset */
body { background-color: var(--light-gray); }
#headerwrap, #footerwrap {border: none; }
#content { padding:0; }

/* Sticky header hot fix */
.fixed-header .header-bar, .fixed-header .search-button, .fixed-header .header-widget {
    display: block;
}

/* Header */
#header { padding: 0; }
.header-widget-full { background-color: var(--black); }
.header-widget { padding: 0; }
#site-logo { padding: 0; margin: 0; margin-top: -5px; z-index: 2; position: relative; }

/* Header Widget */

.header-widget-links {
    display: flex;
    align-items: center;
    justify-content: flex-end;
	padding: .3em 0;
}

.header-widget-link {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 0 2em;
    text-decoration: none;
	color: var(--white); 
	 border-left: 1px solid var(--orange-mid);
}

.header-widget-link:hover { color: var(--orange-mid); }


.header-widget-link + .header-widget-link {
    border-right: 1px solid var(--orange-mid);
}

.header-widget-link img {
    width: 20px;
    height: 20px;
    object-fit: contain;
    display: block;
}

#themify-layout-parts-2 { width: 100%; }


/* END OF Header Widget */

/* Main Nav */
#main-nav li { border-left: 1px solid var(--black); }
#main-nav li:first-child { border-left: none; }
#main-nav li a { padding: 0 .8em; }

/* Footer */
#footerwrap { background-color: var(--black); }
#footer a { color: var(--white); }

/* Stylings */
.color--orange-mid { color: var(--orange-mid); }

/**
 * =========================================================
 * OFF-CANVAS NAVIGATION
 * =========================================================
 */

/**
 * ---------------------------------------------------------
 * Overlay
 * ---------------------------------------------------------
 */

:where(html.tf-mouse) #main-nav li:hover>.sub-menu { display: none; }

.offcanvas-overlay {
    position: fixed;
    z-index: 99998;

    top: 0;
    left: 0;

    width: 100%;
    height: 100%;

    background: rgba(0, 0, 0, 0.55);

    opacity: 0;
    visibility: hidden;

    transition:
        opacity 0.35s ease,
        visibility 0.35s ease;
}


body.offcanvas-open .offcanvas-overlay {
    opacity: 1;
    visibility: visible;
}


/**
 * ---------------------------------------------------------
 * Panel
 * ---------------------------------------------------------
 */

.offcanvas-panel {
    position: fixed;
    z-index: 99999;

    top: 0;
    right: 0;

    width: 90%;
    max-width: 1100px;
    height: 100vh;

    background: #fff;

    transform: translateX(100%);

    transition:
        transform 0.4s cubic-bezier(.77, 0, .175, 1);

    overflow: hidden;

    display: flex;
    flex-direction: column;
}


.offcanvas-panel.is-open {
    transform: translateX(0);
}


/**
 * ---------------------------------------------------------
 * Header
 * ---------------------------------------------------------
 */

.offcanvas-panel__header {
    position: relative;

    display: flex;
    align-items: center;

    min-height: 90px;

    padding: 20px 35px;

    border-bottom: 1px solid #e5e5e5;
}


.offcanvas-panel__title {
    flex: 1;

    font-size: 26px;
    font-weight: 600;

    line-height: 1.2;
}


/**
 * ---------------------------------------------------------
 * Back Button
 * ---------------------------------------------------------
 */

.offcanvas-panel__back {
    display: flex;

    align-items: center;
    justify-content: center;

    width: 42px;
    height: 42px;

    margin-right: 15px;

    padding: 0;

    border: 0;

    background: transparent;

    font-size: 25px;

    cursor: pointer;
}


.offcanvas-panel__back:hover {
    opacity: .6;
}


/**
 * ---------------------------------------------------------
 * Close Button
 * ---------------------------------------------------------
 */

.offcanvas-panel__close {
    position: relative;

    width: 42px;
    height: 42px;

    padding: 0;

    border: 0;

    background: transparent;

    cursor: pointer;
}


.offcanvas-panel__close span {
    position: absolute;

    top: 50%;
    left: 50%;

    width: 25px;
    height: 1px;

    background: #111;
}


.offcanvas-panel__close span:first-child {
    transform: translate(-50%, -50%) rotate(45deg);
}


.offcanvas-panel__close span:last-child {
    transform: translate(-50%, -50%) rotate(-45deg);
}


.offcanvas-panel__close:hover {
    opacity: .6;
}


/**
 * ---------------------------------------------------------
 * Body
 * ---------------------------------------------------------
 */

.offcanvas-panel__body {
    display: grid;

    grid-template-columns:
        minmax(220px, 0.8fr)
        minmax(400px, 1.2fr);

    gap: 60px;

    flex: 1;

    padding: 45px 50px;

    overflow-y: auto;
}


/**
 * ---------------------------------------------------------
 * Navigation
 * ---------------------------------------------------------
 */

.offcanvas-panel__navigation {
    min-width: 0;
}


.offcanvas-panel__heading {
    margin-bottom: 25px;

    font-size: 13px;
    font-weight: 600;

    text-transform: uppercase;
    letter-spacing: .08em;

    color: #777;
}


.offcanvas-panel__links {
    display: flex;
    flex-direction: column;

    gap: 0;
}


.offcanvas-panel__links a {
    display: block;

    padding: 14px 0;

    border-bottom: 1px solid #e5e5e5;

    color: #111;

    font-size: 20px;
    line-height: 1.3;

    text-decoration: none;

    transition:
        padding-left 0.2s ease,
        opacity 0.2s ease;
}


.offcanvas-panel__links a:hover {
    padding-left: 8px;

    opacity: .6;
}


/**
 * =========================================================
 * FEATURED CONTENT
 * =========================================================
 */

.offcanvas-panel__featured {
    min-width: 0;
}


.offcanvas-featured-heading {
    margin: 0 0 25px;

    font-size: 14px;
    font-weight: 600;

    text-transform: uppercase;
    letter-spacing: .08em;
}


.offcanvas-featured-grid {
    display: grid;

    grid-template-columns:
        repeat(2, minmax(0, 1fr));

    gap: 20px;
}


.offcanvas-featured-card {
    display: flex;
    flex-direction: column;

    background: #f5f5f5;
}


.offcanvas-featured-card img {
    display: block;

    width: 100%;

    aspect-ratio: 16 / 9;

    object-fit: cover;
}


.offcanvas-featured-card__content {
    padding: 20px;
}


.offcanvas-featured-card h4 {
    margin: 0 0 10px;

    font-size: 20px;
    line-height: 1.2;
}


.offcanvas-featured-card p {
    margin: 0 0 18px;

    font-size: 14px;
    line-height: 1.6;
}


.offcanvas-featured-card__link {
    display: inline-block;

    font-size: 13px;
    font-weight: 600;

    color: inherit;

    text-decoration: none;
}


.offcanvas-featured-card__link:hover {
    text-decoration: underline;
}


/**
 * ---------------------------------------------------------
 * Prevent Page Scrolling
 * ---------------------------------------------------------
 */

body.offcanvas-open {
    overflow: hidden;
}


/**
 * ---------------------------------------------------------
 * Mobile
 * ---------------------------------------------------------
 */

@media (max-width: 767px) {

    .offcanvas-panel {
        width: 100%;
    }


    .offcanvas-panel__header {
        min-height: 75px;

        padding: 15px 20px;
    }


    .offcanvas-panel__title {
        font-size: 22px;
    }


    .offcanvas-panel__body {
        display: block;

        padding: 30px 25px;
    }


    .offcanvas-panel__navigation {
        margin-bottom: 45px;
    }


    .offcanvas-panel__links a {
        font-size: 18px;
    }


    .offcanvas-featured-grid {
        grid-template-columns: 1fr;
    }

}


/**
 * =========================================================
 * OFF-CANVAS NAVIGATION
 * =========================================================
 */

/**
 * ---------------------------------------------------------
 * Overlay
 * ---------------------------------------------------------
 */

.offcanvas-overlay {
    position: fixed;
    z-index: 99998;

    top: 0;
    left: 0;

    width: 100%;
    height: 100%;

    background: rgba(0, 0, 0, 0.55);

    opacity: 0;
    visibility: hidden;

    transition:
        opacity 0.35s ease,
        visibility 0.35s ease;
}


body.offcanvas-open .offcanvas-overlay {
    opacity: 1;
    visibility: visible;
}


/**
 * ---------------------------------------------------------
 * Panel
 * ---------------------------------------------------------
 */

.offcanvas-panel {
    position: fixed;
    z-index: 99999;

    top: 0;
    right: 0;

    width: 90%;
    max-width: 1100px;
    height: 100vh;

    background: #fff;

    transform: translateX(100%);

    transition:
        transform 0.4s cubic-bezier(.77, 0, .175, 1);

    overflow: hidden;

    display: flex;
    flex-direction: column;
}


.offcanvas-panel.is-open {
    transform: translateX(0);
}


/**
 * ---------------------------------------------------------
 * Header
 * ---------------------------------------------------------
 */

.offcanvas-panel__header {
    position: relative;

    display: flex;
    align-items: center;

    min-height: 90px;

    padding: 20px 35px;

    border-bottom: 1px solid #e5e5e5;
}


.offcanvas-panel__title {
    flex: 1;

    font-size: 26px;
    font-weight: 600;

    line-height: 1.2;
}


/**
 * ---------------------------------------------------------
 * Back Button
 * ---------------------------------------------------------
 */

.offcanvas-panel__back {
    display: flex;

    align-items: center;
    justify-content: center;

    width: 42px;
    height: 42px;

    margin-right: 15px;

    padding: 0;

    border: 0;

    background: transparent;

    font-size: 25px;

    cursor: pointer;
}


.offcanvas-panel__back:hover {
    opacity: .6;
}


/**
 * ---------------------------------------------------------
 * Close Button
 * ---------------------------------------------------------
 */

.offcanvas-panel__close {
    position: relative;

    width: 42px;
    height: 42px;

    padding: 0;

    border: 0;

    background: transparent;

    cursor: pointer;
}


.offcanvas-panel__close span {
    position: absolute;

    top: 50%;
    left: 50%;

    width: 25px;
    height: 1px;

    background: #111;
}


.offcanvas-panel__close span:first-child {
    transform: translate(-50%, -50%) rotate(45deg);
}


.offcanvas-panel__close span:last-child {
    transform: translate(-50%, -50%) rotate(-45deg);
}


.offcanvas-panel__close:hover {
    opacity: .6;
}


/**
 * ---------------------------------------------------------
 * Body
 * ---------------------------------------------------------
 */

.offcanvas-panel__body {
    display: grid;

    grid-template-columns:
        minmax(220px, 0.8fr)
        minmax(400px, 1.2fr);

    gap: 60px;

    flex: 1;

    padding: 45px 50px;

    overflow-y: auto;
}


/**
 * ---------------------------------------------------------
 * Navigation
 * ---------------------------------------------------------
 */

.offcanvas-panel__navigation {
    min-width: 0;
}


.offcanvas-panel__heading {
    margin-bottom: 25px;

    font-size: 13px;
    font-weight: 600;

    text-transform: uppercase;
    letter-spacing: .08em;

    color: #777;
}


.offcanvas-panel__links {
    display: flex;
    flex-direction: column;

    gap: 0;
}


.offcanvas-panel__links a {
    display: block;

    padding: 14px 0;

    border-bottom: 1px solid #e5e5e5;

    color: #111;

    font-size: 20px;
    line-height: 1.3;

    text-decoration: none;

    transition:
        padding-left 0.2s ease,
        opacity 0.2s ease;
}


.offcanvas-panel__links a:hover {
    padding-left: 8px;

    opacity: .6;
}


/**
 * =========================================================
 * FEATURED CONTENT
 * =========================================================
 */

.offcanvas-panel__featured {
    min-width: 0;
}


.offcanvas-featured-heading {
    margin: 0 0 25px;

    font-size: 14px;
    font-weight: 600;

    text-transform: uppercase;
    letter-spacing: .08em;
}


.offcanvas-featured-grid {
    display: grid;

    grid-template-columns:
        repeat(2, minmax(0, 1fr));

    gap: 20px;
}


.offcanvas-featured-card {
    display: flex;
    flex-direction: column;

    background: #f5f5f5;
}


.offcanvas-featured-card img {
    display: block;

    width: 100%;

    aspect-ratio: 16 / 9;

    object-fit: cover;
}


.offcanvas-featured-card__content {
    padding: 20px;
}


.offcanvas-featured-card h4 {
    margin: 0 0 10px;

    font-size: 20px;
    line-height: 1.2;
}


.offcanvas-featured-card p {
    margin: 0 0 18px;

    font-size: 14px;
    line-height: 1.6;
}


.offcanvas-featured-card__link {
    display: inline-block;

    font-size: 13px;
    font-weight: 600;

    color: inherit;

    text-decoration: none;
}


.offcanvas-featured-card__link:hover {
    text-decoration: underline;
}


/**
 * ---------------------------------------------------------
 * Prevent Page Scrolling
 * ---------------------------------------------------------
 */

body.offcanvas-open {
    overflow: hidden;
}


/**
 * ---------------------------------------------------------
 * Mobile
 * ---------------------------------------------------------
 */

@media (max-width: 767px) {

    .offcanvas-panel {
        width: 100%;
    }


    .offcanvas-panel__header {
        min-height: 75px;

        padding: 15px 20px;
    }


    .offcanvas-panel__title {
        font-size: 22px;
    }


    .offcanvas-panel__body {
        display: block;

        padding: 30px 25px;
    }


    .offcanvas-panel__navigation {
        margin-bottom: 45px;
    }


    .offcanvas-panel__links a {
        font-size: 18px;
    }


    .offcanvas-featured-grid {
        grid-template-columns: 1fr;
    }

}

/*
 * =========================================================
 * OFF-CANVAS FEATURED CONTENT
 * =========================================================
 */

.offcanvas-panel__featured {
    min-width: 0;
}


.offcanvas-featured-heading {
    margin: 0 0 25px;

    font-size: 14px;
    font-weight: 600;

    text-transform: uppercase;
    letter-spacing: .08em;
}


.offcanvas-featured-grid {
    display: grid;

    grid-template-columns:
        repeat(2, minmax(0, 1fr));

    gap: 20px;
}


.offcanvas-featured-card {
    display: flex;
    flex-direction: column;

    background: #f5f5f5;
}


.offcanvas-featured-card img {
    display: block;

    width: 100%;

    aspect-ratio: 16 / 9;

    object-fit: cover;
}


.offcanvas-featured-card__content {
    padding: 20px;
}


.offcanvas-featured-card h4 {
    margin: 0 0 10px;

    font-size: 20px;
    line-height: 1.2;
}


.offcanvas-featured-card p {
    margin: 0 0 18px;

    font-size: 14px;
    line-height: 1.6;
}


.offcanvas-featured-card__link {
    display: inline-block;

    font-size: 13px;
    font-weight: 600;

    text-decoration: none;
}


.offcanvas-featured-card__link:hover {
    text-decoration: underline;
}


/*
 * ---------------------------------------------------------
 * Mobile Featured Content
 * ---------------------------------------------------------
 */

@media (max-width: 767px) {

    .offcanvas-featured-grid {
        grid-template-columns: 1fr;
    }

}

/**
 * =========================================================
 * OFF-CANVAS NAVIGATION
 * =========================================================
 */


/**
 * ---------------------------------------------------------
 * Overlay
 * ---------------------------------------------------------
 */

.offcanvas-overlay {
    position: fixed;
    z-index: 99998;

    top: 0;
    left: 0;

    width: 100%;
    height: 100%;

    background: rgba(0, 0, 0, 0.55);

    opacity: 0;
    visibility: hidden;

    transition:
        opacity 0.35s ease,
        visibility 0.35s ease;
}


body.offcanvas-open .offcanvas-overlay {
    opacity: 1;
    visibility: visible;
}


/**
 * ---------------------------------------------------------
 * Panel
 * ---------------------------------------------------------
 */

.offcanvas-panel {
    position: fixed;
    z-index: 99999;

    top: 0;
    right: 0;

    width: 90%;
    max-width: 1100px;
    height: 100vh;

    background: #fff;

    transform: translateX(100%);

    transition:
        transform 0.4s cubic-bezier(.77, 0, .175, 1);

    overflow: hidden;

    display: flex;
    flex-direction: column;
}


.offcanvas-panel.is-open {
    transform: translateX(0);
}


/**
 * ---------------------------------------------------------
 * Header
 * ---------------------------------------------------------
 */

.offcanvas-panel__header {
    position: relative;

    display: flex;
    align-items: center;

    min-height: 90px;

    padding: 20px 35px;

    border-bottom: 1px solid #e5e5e5;
}


.offcanvas-panel__title {
    flex: 1;

    font-size: 26px;
    font-weight: 600;

    line-height: 1.2;
}


/**
 * ---------------------------------------------------------
 * Back
 * ---------------------------------------------------------
 */

.offcanvas-panel__back {
    display: flex;

    align-items: center;
    justify-content: center;

    width: 42px;
    height: 42px;

    margin-right: 15px;

    padding: 0;

    border: 0;

    background: transparent;

    font-size: 25px;

    cursor: pointer;
}


.offcanvas-panel__back:hover {
    opacity: .6;
}


/**
 * ---------------------------------------------------------
 * Close
 * ---------------------------------------------------------
 */

.offcanvas-panel__close {
    position: relative;

    width: 42px;
    height: 42px;

    padding: 0;

    border: 0;

    background: transparent;

    cursor: pointer;
}


.offcanvas-panel__close span {
    position: absolute;

    top: 50%;
    left: 50%;

    width: 25px;
    height: 1px;

    background: #111;
}


.offcanvas-panel__close span:first-child {
    transform:
        translate(-50%, -50%)
        rotate(45deg);
}


.offcanvas-panel__close span:last-child {
    transform:
        translate(-50%, -50%)
        rotate(-45deg);
}


.offcanvas-panel__close:hover {
    opacity: .6;
}


/**
 * ---------------------------------------------------------
 * Body
 * ---------------------------------------------------------
 */

.offcanvas-panel__body {
    display: grid;

    grid-template-columns:
        minmax(220px, .8fr)
        minmax(400px, 1.2fr);

    gap: 60px;

    flex: 1;

    padding: 45px 50px;

    overflow-y: auto;
}


/**
 * ---------------------------------------------------------
 * Navigation
 * ---------------------------------------------------------
 */

.offcanvas-panel__navigation {
    min-width: 0;
}


.offcanvas-panel__heading {
    margin-bottom: 25px;

    font-size: 13px;
    font-weight: 600;

    text-transform: uppercase;

    letter-spacing: .08em;

    color: #777;
}


.offcanvas-panel__links {
    display: flex;

    flex-direction: column;

    gap: 0;
}


/**
 * Each navigation item is a row.
 */
.offcanvas-nav-item {
    display: flex;

    align-items: center;

    border-bottom: 1px solid #e5e5e5;
}


/**
 * Navigation link.
 */
.offcanvas-nav-item > a {
    flex: 1;

    display: block;

    padding: 14px 0;

    border: 0;

    color: #111;

    font-size: 20px;

    line-height: 1.3;

    text-decoration: none;

    transition:
        padding-left .2s ease,
        opacity .2s ease;
}


/**
 * Arrow.
 */
.offcanvas-nav-arrow {
    flex: 0 0 auto;

    padding-left: 15px;

    font-size: 20px;

    color: #777;

    transition:
        transform .2s ease,
        opacity .2s ease;
}


/**
 * Hover.
 */
.offcanvas-nav-item:hover
.offcanvas-nav-arrow {

    transform:
        translateX(4px);

    opacity: .6;
}


.offcanvas-nav-item:hover
.offcanvas-nav-item > a {

    padding-left: 8px;

    opacity: .7;
}


/**
 * =========================================================
 * FEATURED CONTENT
 * =========================================================
 */

.offcanvas-panel__featured {
    min-width: 0;
}


.offcanvas-featured-heading {
    margin: 0 0 25px;

    font-size: 14px;

    font-weight: 600;

    text-transform: uppercase;

    letter-spacing: .08em;
}


.offcanvas-featured-grid {
    display: grid;

    grid-template-columns:
        repeat(2, minmax(0, 1fr));

    gap: 20px;
}


.offcanvas-featured-card {
    display: flex;

    flex-direction: column;

    background: #f5f5f5;
}


.offcanvas-featured-card img {
    display: block;

    width: 100%;

    aspect-ratio: 16 / 9;

    object-fit: cover;
}


.offcanvas-featured-card__content {
    padding: 20px;
}


.offcanvas-featured-card h4 {
    margin: 0 0 10px;

    font-size: 20px;

    line-height: 1.2;
}


.offcanvas-featured-card p {
    margin: 0 0 18px;

    font-size: 14px;

    line-height: 1.6;
}


.offcanvas-featured-card__link {
    display: inline-block;

    font-size: 13px;

    font-weight: 600;

    color: inherit;

    text-decoration: none;
}


.offcanvas-featured-card__link:hover {
    text-decoration: underline;
}


/**
 * =========================================================
 * PAGE SCROLL LOCK
 * =========================================================
 */

body.offcanvas-open {
    overflow: hidden;
}


/**
 * =========================================================
 * MOBILE
 * =========================================================
 */

@media (max-width: 767px) {

    .offcanvas-panel {
        width: 100%;
    }


    .offcanvas-panel__header {
        min-height: 75px;

        padding: 15px 20px;
    }


    .offcanvas-panel__title {
        font-size: 22px;
    }


    .offcanvas-panel__body {
        display: block;

        padding: 30px 25px;
    }


    .offcanvas-panel__navigation {
        margin-bottom: 45px;
    }


    .offcanvas-panel__links a {
        font-size: 18px;
    }


    .offcanvas-featured-grid {
        grid-template-columns: 1fr;
    }

}