.header {position: relative;z-index: 9000;min-width: 300px;transition-duration: 0.25s;transition-property: box-shadow;max-width: 1920px;margin-left: auto;margin-right: auto;width: 100%;height: 6.6666666667rem; } @media (min-width: 768px) {.header {height: 11.9444444444rem;} } .header.active {box-shadow: 0 0 0.5555555556rem rgba(0, 0, 0, 0.1); } .header .container {position: relative;padding-top: 2.2222222222rem;padding-bottom: 2.2222222222rem; } .header .container .col-brand {display: flex;flex-direction: row;justify-content: flex-start;flex-grow: 0;flex-shrink: 0; } @media (min-width: 768px) {.header .container .col-brand {justify-content: center;} } .header .container .col-brand .brand {position: relative;display: block;max-width: 17.7777777778rem;z-index: 1;background-size: cover;background-position: center; } .header .container .col-brand .brand .img-fluid, .header .container .col-brand .brand svg {height: 100%;width: 8.3333333333rem; } @media (min-width: 768px) {.header .container .col-brand .brand .img-fluid, .header .container .col-brand .brand svg {width: 17.7777777778rem;} } .header .container .col-brand .brand.active {width: 4.5555555556rem;height: 4.5555555556rem; } @media (max-width: 767.98px) {.header .container .col-brand .brand.active {width: 4.7777777778rem;height: 4.7777777778rem;} } @media (min-width: 768px) {.header .container .col-brand .brand {transition-property: width, height;transition-duration: 0.25s;} } .header .container .col-menu {position: absolute;top: 1.1111111111rem;right: 0.5555555556rem;z-index: 9002;display: flex;align-items: center;padding: 0; } @media (min-width: 768px) {.header .container .col-menu {top: 50%;transform: translateY(-50%);flex-direction: row;} } .header .container .col-menu .menu-icon {width: 3.0555555556rem;display: inline-block;position: relative; } .header .container .col-menu .menu-label {color: var(--black);font-size: 1rem;text-transform: uppercase;margin-bottom: 0.8333333333rem; } @media (min-width: 768px) {.header .container .col-menu .menu-label {font-size: 1.7777777778rem;margin-bottom: 0;} } .header .container .col-menu .btn-menu {height: 100%;box-shadow: none;position: relative;display: flex;align-items: center;gap: 0.5555555556rem;z-index: 9999;padding: 0.5555555556rem; } .header .container .col-menu .btn-menu.collapsed .menu-label {color: var(--primary); } .header .container .col-menu .menu-toggle {display: flex;flex-direction: column; } @media (min-width: 768px) {.header .container .col-menu .menu-toggle {flex-direction: row;} } .header .container .col-menu .menu-toggle.collapsed .menu-toggle-bar--top {transform: translate(0, 0) rotate(45deg);background-color: var(--primary); } .header .container .col-menu .menu-toggle.collapsed .menu-toggle-bar--middle {opacity: 0; } .header .container .col-menu .menu-toggle.collapsed .menu-toggle-bar--bottom {transform: translate(0, 0) rotate(-45deg);background-color: var(--primary); } .header .container .col-menu .menu-toggle-bar {display: block;position: absolute;top: 50%;margin-top: -1px;right: 0;width: 100%;height: 3px;border-radius: 4px;background-color: var(--black);transition: all 0.3s ease; } .header .container .col-menu .menu-toggle-bar.menu-toggle-bar--top {transform: translate(0, -8px); } .header .container .col-menu .menu-toggle-bar.menu-toggle-bar--bottom {transform: translate(0, 8px); } .header .container .col-menu.white-menu .menu-label {color: var(--white); } .header .container .col-menu.white-menu .menu-toggle-bar {background-color: var(--white); } .header .navbar {display: flex;flex-direction: column;justify-content: center;padding: 0;margin-bottom: 0;position: fixed;z-index: 9001;width: 100%;height: 100vh;inset: 0;top: 0;left: -100%;overflow-y: auto;opacity: 0;visibility: hidden;background: rgba(255, 255, 255, 0.95);overscroll-behavior: contain;transition-duration: 0.25s;transition-property: left, opacity, visibility; } .header .navbar .nav {display: flex;flex-direction: column; } .header .navbar .nav ul {list-style: none;padding: 0;margin: 0;text-align: center; } .header .navbar .nav ul .nav-item {font-size: 2.2222222222rem;color: var(--black);text-transform: uppercase;font-weight: 700;padding: 1.6666666667rem; } @media (min-width: 768px) {.header .navbar .nav ul .nav-item {font-size: 3.0555555556rem;} } .header .navbar.animated {transition-duration: 0.25s;transition-property: left; } .header .navbar.show {left: 0;opacity: 1;visibility: visible; }