@charset "UTF-8";

/* -------------------------------- 

File#: _1_anim-menu-btn
Title: Animated Menu Button
Descr: A menu button w/ a morphing icon
Usage: codyhouse.co/license

-------------------------------- */
:root {
    --anim-menu-btn-size: 48px;
    --anim-menu-btn-transition-duration: .2s;
    --anim-menu-btn-icon-size: 32px;
    --anim-menu-btn-icon-stroke: 2px
}

.anim-menu-btn {
    display: flex;
    justify-content: center;
    align-items: center;
    width: var(--anim-menu-btn-size);
    height: var(--anim-menu-btn-size)
}

.anim-menu-btn__icon {
    position: relative;
    display: block;
    font-size: var(--anim-menu-btn-icon-size);
    width: 1em;
    height: var(--anim-menu-btn-icon-stroke);
    color: inherit;
    background-image: linear-gradient(currentColor, currentColor);
    background-repeat: no-repeat;
    transform: scale(1)
}

.anim-menu-btn__icon::before,
.anim-menu-btn__icon::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    background-image: inherit;
    border-radius: inherit
}

.anim-menu-btn__icon--close {
    background-size: 100% 100%;
    will-change: transform, background-size;
    transition-property: transform, background-size;
    transition-duration: var(--anim-menu-btn-transition-duration, 0.2s)
}

.anim-menu-btn:active .anim-menu-btn__icon--close {
    transform: scale(0.9)
}

.anim-menu-btn__icon--close::before,
.anim-menu-btn__icon--close::after {
    will-change: inherit;
    transition: inherit
}

.anim-menu-btn__icon--close::before {
    transform: translateY(-0.25em) rotate(0)
}

.anim-menu-btn__icon--close::after {
    transform: translateY(0.25em) rotate(0)
}

.anim-menu-btn--state-b .anim-menu-btn__icon--close {
    background-size: 0% 100%
}

.anim-menu-btn--state-b .anim-menu-btn__icon--close::before {
    transform: translateY(0) rotate(45deg)
}

.anim-menu-btn--state-b .anim-menu-btn__icon--close::after {
    transform: translateY(0) rotate(-45deg)
}

.anim-menu-btn__icon--arrow-left,
.anim-menu-btn__icon--arrow-right,
.anim-menu-btn__icon--arrow-up,
.anim-menu-btn__icon--arrow-down {
    border-radius: 50em;
    will-change: transform;
    transition-property: transform;
    transition-duration: var(--anim-menu-btn-transition-duration, 0.2s)
}

.anim-menu-btn:active .anim-menu-btn__icon--arrow-left,
.anim-menu-btn:active .anim-menu-btn__icon--arrow-right,
.anim-menu-btn:active .anim-menu-btn__icon--arrow-up,
.anim-menu-btn:active .anim-menu-btn__icon--arrow-down {
    transform: scale(0.9)
}

.anim-menu-btn__icon--arrow-left::before,
.anim-menu-btn__icon--arrow-left::after,
.anim-menu-btn__icon--arrow-right::before,
.anim-menu-btn__icon--arrow-right::after,
.anim-menu-btn__icon--arrow-up::before,
.anim-menu-btn__icon--arrow-up::after,
.anim-menu-btn__icon--arrow-down::before,
.anim-menu-btn__icon--arrow-down::after {
    transform-origin: calc(var(--anim-menu-btn-icon-stroke) / 2) 50%;
    will-change: transform, width;
    transition-property: transform, width;
    transition-duration: var(--anim-menu-btn-transition-duration, 0.2s)
}

.anim-menu-btn__icon--arrow-left::before,
.anim-menu-btn__icon--arrow-right::before,
.anim-menu-btn__icon--arrow-up::before,
.anim-menu-btn__icon--arrow-down::before {
    transform: translateY(-0.25em) rotate(0)
}

.anim-menu-btn__icon--arrow-left::after,
.anim-menu-btn__icon--arrow-right::after,
.anim-menu-btn__icon--arrow-up::after,
.anim-menu-btn__icon--arrow-down::after {
    transform: translateY(0.25em) rotate(0)
}

.anim-menu-btn__icon--arrow-right {
    transform: rotate(180deg)
}

.anim-menu-btn:active .anim-menu-btn__icon--arrow-right {
    transform: rotate(180deg) scale(0.9)
}

.anim-menu-btn--state-b .anim-menu-btn__icon--arrow-left::before,
.anim-menu-btn--state-b .anim-menu-btn__icon--arrow-left::after,
.anim-menu-btn--state-b .anim-menu-btn__icon--arrow-right::before,
.anim-menu-btn--state-b .anim-menu-btn__icon--arrow-right::after,
.anim-menu-btn--state-b .anim-menu-btn__icon--arrow-up::before,
.anim-menu-btn--state-b .anim-menu-btn__icon--arrow-up::after,
.anim-menu-btn--state-b .anim-menu-btn__icon--arrow-down::before,
.anim-menu-btn--state-b .anim-menu-btn__icon--arrow-down::after {
    width: 50%
}

.anim-menu-btn--state-b .anim-menu-btn__icon--arrow-left::before,
.anim-menu-btn--state-b .anim-menu-btn__icon--arrow-right::before,
.anim-menu-btn--state-b .anim-menu-btn__icon--arrow-up::before,
.anim-menu-btn--state-b .anim-menu-btn__icon--arrow-down::before {
    transform: translateY(0) rotate(-45deg)
}

.anim-menu-btn--state-b .anim-menu-btn__icon--arrow-left::after,
.anim-menu-btn--state-b .anim-menu-btn__icon--arrow-right::after,
.anim-menu-btn--state-b .anim-menu-btn__icon--arrow-up::after,
.anim-menu-btn--state-b .anim-menu-btn__icon--arrow-down::after {
    transform: translateY(0) rotate(45deg)
}

.anim-menu-btn--state-b:active .anim-menu-btn__icon--arrow-up {
    transform: rotate(90deg) scale(0.9)
}

.anim-menu-btn--state-b .anim-menu-btn__icon--arrow-up {
    transform: rotate(90deg)
}

.anim-menu-btn--state-b:active .anim-menu-btn__icon--arrow-down {
    transform: rotate(-90deg) scale(0.9)
}

.anim-menu-btn--state-b .anim-menu-btn__icon--arrow-down {
    transform: rotate(-90deg)
}

/* -------------------------------- 

File#: _2_flexi-header
Title: Flexi Header
Descr: Customizable header template
Usage: codyhouse.co/license

-------------------------------- */
:root {
    --f-header-height: 50px;
    --f-header-logo-width: 104px
}

@media (min-width: 64rem) {
    :root {
        --f-header-height: 70px
    }
}

.f-header {
    height: var(--f-header-height);
    width: 100%;
    z-index: var(--z-index-header, 3)
}

.f-header {
    transition: background-color 0.3s, box-shadow 0.3s, transform 0.3s;
}

.f-header-scrol {
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
    transform: translateY(0);
    /* Пример изменения позиции */
}

@media (min-width: 64rem) {
    .f-header .f-header__nav-logo-wrapper {
        display: none;
    }

    .f-header.f-header-scrol .f-header__nav-logo-wrapper {
        display: block;
    }
}

.f-header .f-header__list {

}

.f-header.f-header-scrol .f-header__list {
    justify-content: flex-end;
}



.f-header::before {
    /* used in JS to detect menu style */
    display: none;
    content: "mobile"
}

.f-header--expanded {
    /* class added when navigation is visible - small devices only */
}

.f-header__mobile-content {
    /* logo + menu button on small devices */
    position: relative;
    display: flex;
    height: 100%;
    justify-content: space-between;
    align-items: center;
    z-index: 2
}

.f-header__logo {
    display: block;
    flex-shrink: 0;
    text-decoration: none
}

.f-header__logo svg,
.f-header__logo img {
    display: block
}

.f-header__nav-control {
    /* menu button */
    --anim-menu-btn-size: 40px;
    /* 🍔 icon */
    --anim-menu-btn-icon-size: 28px;
    --anim-menu-btn-icon-stroke: 2px
}

.f-header__nav {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    max-height: calc(100vh - var(--f-header-offset, 0px));
    overflow: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
    padding: 0 0 var(--space-md);
    background-color: var(--color-bg);
    box-shadow: var(--shadow-md);
    z-index: 1;
    visibility: hidden;
    opacity: 0;
    transform: translateY(-1em)
}

.f-header__nav::before {
    /* top header bg + border */
    content: "";
    display: block;
    position: sticky;
    top: 0;
    height: var(--f-header-height);
    background-color: inherit;
    border-bottom: 1px solid var(--color-contrast-lower)
}

.f-header__nav--is-visible {
    visibility: visible;
    opacity: 1;
    transform: translateY(0);
    transition: visibility 0s, opacity 0.3s, transform 0.3s
}

.f-header__nav-logo-wrapper {
    display: none
        /* hide logo nav on small devices */
}

.f-header__item {
    flex-shrink: 0;
    border-bottom: 1px solid var(--color-contrast-lower)
}

.f-header__dropdown-icon {
    --size: 16px;
    flex-shrink: 0;
    margin: 0 10px 0 auto;
    display: none
        /* hide on mobile if link */
}

.f-header__dropdown-control .f-header__dropdown-icon {
    display: block
}

.f-header__link,
.f-header__dropdown-control,
.f-header__dropdown-link,
.f-header__btn,
.f-header__form-control {
    font-size: var(--text-md)
}

.f-header__link,
.f-header__dropdown-control,
.f-header__dropdown-link {
    display: flex;
    align-items: center;
    color: var(--color-contrast-high);
    text-decoration: none;
    padding: var(--space-xs) 0
}

.f-header__link:hover,
.f-header__link[aria-current=page],
.f-header__dropdown-control:hover,
.f-header__dropdown-control[aria-current=page],
.f-header__dropdown-link:hover,
.f-header__dropdown-link[aria-current=page] {
    color: var(--color-primary)
}

.f-header__btn,
.f-header__form-control {
    width: 100%;
    margin: var(--space-xs) 0
}

.f-header__dropdown-control {
    width: 100%
}

.f-header__dropdown {
    /* sub navigation */
    padding-left: var(--space-md)
        /* offset sub nav */
}

.f-header__dropdown-control+.f-header__dropdown {
    display: none
}

.f-header__dropdown-control[aria-expanded=true]+.f-header__dropdown {
    display: block
}

@media (min-width: 64rem) {
    .f-header::before {
        content: "desktop"
    }

    .f-header__mobile-content {
        display: none
            /* hide logo + menu (mobile content) */
    }

    .f-header__nav {
        /* reset */
        position: static;
        padding: 0;
        background-color: transparent;
        box-shadow: none;
        visibility: visible;
        opacity: 1;
        transform: translateY(0);
        transition: none;
        max-height: none;
        overflow: visible;
        overscroll-behavior: auto;
        height: var(--f-header-height)
    }

    .f-header__nav::before {
        /* reset */
        display: none
    }

    .f-header__nav-logo-wrapper {
        display: flex
    }

    .f-header__nav-grid,
    .f-header__list {
        display: flex;
        align-items: center
    }

    .f-header__nav-grid {
        height: 100%
    }

    .f-header__item {
        position: relative;
        border-bottom: none;
        margin-right: var(--space-xs)
            /* margin between nav items */
    }

    .f-header__item:last-child {
        margin-right: 0
    }

    .f-header__dropdown-icon {
        --size: 12px;
        display: block;
        margin: 0 0 0 var(--space-xxxxs)
    }

    .f-header__link,
    .f-header__dropdown-control,
    .f-header__dropdown-link,
    .f-header__btn,
    .f-header__form-control {
        font-size: var(--text-sm);
        font-weight: 500;
    }

    .f-header__link {
        padding: var(--space-xxxs) var(--space-xxs)
    }

    .f-header__link--icon span {
        display: none
            /* hide icon label */
    }

    .f-header__btn,
    .f-header__form-control {
        margin: 0
            /* reset */
    }

    .f-header__dropdown {
        position: absolute;
        top: 100%;
        width: 220px;
        left: calc(50% - 110px);
        padding: var(--space-xxxs) 0;
        background-color: var(--color-bg-light);
        border-radius: var(--radius-md);
        box-shadow: var(--inner-glow), var(--shadow-md);
        z-index: var(--z-index-popover, 5);
        /* hide */
        pointer-events: none;
        visibility: hidden;
        opacity: 0;
        transition: visibility 0.2s 0.2s, opacity 0.2s 0s
    }

    .f-header__dropdown-control+.f-header__dropdown {
        display: block
            /* reset style */
    }

    .f-header__item:hover .f-header__dropdown,
    .f-header__dropdown-control[aria-expanded=true]+.f-header__dropdown {
        pointer-events: auto;
        visibility: visible;
        opacity: 1;
        transition: visibility 0.2s 0s, opacity 0.2s 0s
    }

    .f-header__dropdown-link {
        color: var(--color-contrast-high);
        padding: var(--space-xs) var(--space-sm);
        transition: 0.2s
    }

    .f-header__dropdown-link:hover {
        background-color: hsla(var(--color-contrast-higher-h), var(--color-contrast-higher-s), var(--color-contrast-higher-l), 0.075);
        color: var(--color-contrast-higher)
    }
}

/* --------------------------------

File#: _1_sub-navigation
Title: Sub Navigation
Descr: Secondary navigation template
Usage: codyhouse.co/license

-------------------------------- */
.subnav__nav {
    position: relative;
    display: flex
}

.subnav__nav::after {
    content: "";
    width: 1em;
    height: 100%;
    position: absolute;
    top: 0;
    right: 0;
    background: linear-gradient(to right, hsla(var(--color-bg-dark-h), var(--color-bg-dark-s), var(--color-bg-dark-l), 0), hsla(var(--color-bg-dark-h), var(--color-bg-dark-s), var(--color-bg-dark-l), 1));
    pointer-events: none
}

.subnav__list {
    display: flex;
    overflow: auto
}

.subnav__item {
    display: inline-block;
    flex-shrink: 0
}

.subnav__link {
    display: block;
    font-size: var(--text-sm);
    padding: 1.5625em;
    text-decoration: none;
    color: hsla(var(--color-contrast-high-h), var(--color-contrast-high-s), var(--color-contrast-high-l), 0.65);
    border: 3px solid transparent;
    border-right-width: 0;
    border-left-width: 0;
    transition: 0.2s
}

.subnav__link:hover {
    color: var(--color-contrast-high)
}

.subnav__link[aria-current=page] {
    border-bottom-color: var(--color-primary);
    color: var(--color-contrast-high)
}

.subnav:not(.subnav--collapsed) .subnav__control,
.subnav:not(.subnav--collapsed) .subnav__close-btn {
    display: none
}

.subnav--collapsed {
    display: inline-block
}

.subnav--collapsed .subnav__wrapper {
    position: fixed;
    display: block;
    z-index: var(--z-index-overlay, 15);
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: hsla(var(--color-black-h), var(--color-black-s), var(--color-black-l), 0.9);
    visibility: hidden;
    opacity: 0
}

.subnav--collapsed .subnav__wrapper--is-visible {
    visibility: visible;
    opacity: 1;
    transition: opacity 0.3s
}

.subnav--collapsed .subnav__wrapper--is-visible .subnav__nav {
    transform: translateY(0);
    transition: transform 0.3s
}

.subnav--collapsed .subnav__nav {
    display: block;
    background-color: var(--color-bg);
    box-shadow: var(--shadow-md);
    max-height: 100%;
    overflow: auto;
    transform: translateY(-1em)
}

.subnav--collapsed .subnav__nav::after {
    display: none
}

.subnav--collapsed .subnav__list {
    flex-direction: column;
    overflow: visible;
    padding: 0 var(--space-md) var(--space-md)
}

.subnav--collapsed .subnav__link {
    border-width: 0;
    font-size: var(--text-md);
    padding: var(--space-xs) 0
}

.subnav--collapsed .subnav__link[aria-current=page] {
    color: var(--color-primary)
}

.subnav__close-btn {
    --size: 2em;
    width: var(--size);
    height: var(--size);
    display: flex;
    margin: var(--space-xs) var(--space-xs) 0 auto;
    justify-content: center;
    align-items: center;
    border-radius: 50%;
    background-color: var(--color-bg-light);
    box-shadow: var(--inner-glow), var(--shadow-sm);
    transition: 0.2s
}

.subnav__close-btn:hover {
    background-color: var(--color-bg-lighter);
    box-shadow: var(--inner-glow), var(--shadow-md)
}

.subnav__close-btn .icon {
    display: block;
    color: var(--color-contrast-high)
}

[class*=subnav--expanded]::before {
    display: none;
    content: "collapsed"
}

@media (min-width: 32rem) {
    .subnav--expanded\@xs::before {
        content: "expanded"
    }
}

@media (min-width: 48rem) {
    .subnav--expanded\@sm::before {
        content: "expanded"
    }
}

@media (min-width: 64rem) {
    .subnav--expanded\@md::before {
        content: "expanded"
    }
}

@media (min-width: 80rem) {
    .subnav--expanded\@lg::before {
        content: "expanded"
    }
}

@media (min-width: 90rem) {
    .subnav--expanded\@xl::before {
        content: "expanded"
    }
}

/* -------------------------------- 

File#: _3_hiding-nav
Title: Auto Hiding Navigation
Descr: A Navigation container that auto-hides when the user scrolls down, and is revealed when they scrolls back up
Usage: codyhouse.co/license

-------------------------------- */
.hide-nav {
    --hide-nav-transition-duration: 0.3s;
    position: sticky !important;
    top: 0;
    will-change: transform;
    transition: transform var(--hide-nav-transition-duration), background-color var(--hide-nav-transition-duration)
}

.hide-nav--fixed {
    background-color: transparent
}

.hide-nav--has-bg {
    background-color: var(--color-bg)
}