.header {position: fixed;top: 0;z-index: 9000;width: 100%;max-width: 1920px;left: 50%;transform: translateX(-50%);font-weight: 400;height: 4.3076923077rem;box-shadow: 0;transition-duration: 0.5s;transition-property: height, box-shadow; } @media (min-width: 992px) {.header {background-image: linear-gradient(to bottom, #000 0%, transparent 100%);background-repeat: repeat-x;height: 6.125rem;} } .header::before {content: " ";position: absolute;width: 100%;heitht: 100%;inset: 0;background: transparent;transition-duration: 0.5s;transition-property: background, height;background: var(--primary); } @media (min-width: 992px) {.header::before {background: transparent;} } .header.active {height: 4.3076923077rem;box-shadow: 0 0.3125rem 0.625rem rgba(0, 0, 0, 0.5); } .header.active::before {background: var(--primary); } .header.active .navbar-brand .img-fluid {width: 6.25rem;top: 1rem; } .header .container {height: 100%;flex-wrap: nowrap;display: flex; } .header .btn-menu {margin-left: -0.9375rem;margin-right: 0.9375rem;color: var(--white);z-index: 1;box-shadow: none !important; } @media (min-width: 992px) {.header .btn-menu {display: none;} } .header .navbar-brand {display: flex;align-items: center;justify-content: center;top: 0;width: 12.5rem;height: 100%;position: relative; } .header .navbar-brand .img-fluid {position: absolute;left: 0;top: 0.625rem;display: block;width: auto;height: calc(100% - 1.25rem);transition-duration: 0.5s;transition-property: width, height, top; } @media (min-width: 992px) {.header .navbar-brand .img-fluid {top: 2.5rem;width: 12.5rem;height: auto;} } .header .navbar-brand:hover, .header .navbar-brand:focus {text-decoration: none; } .header .navbar {height: 100%;padding: 0;flex-wrap: nowrap;width: 100%; } .header .navbar .navbar-nav {flex-grow: 1;flex-direction: column;position: fixed;left: -300px;background: var(--primary);top: 4.3076923077rem;width: 270px;height: calc(100vh - 4.3076923077rem);overflow: auto;transition-duration: 0.25s;transition-property: width, left; } .header .navbar .navbar-nav.show {left: 0; } @media (min-width: 992px) {.header .navbar .navbar-nav {display: flex;position: relative;background: transparent;width: auto;top: auto;left: auto;height: 100%;flex-direction: row;justify-content: flex-end;overflow: visible;} } .header .navbar .navbar-nav .nav-item {position: relative; } .header .navbar .navbar-nav .nav-item .nav-link {display: flex;align-items: center;justify-content: flex-start;padding: 1.125rem 1.4375rem;color: var(--white);position: relative;height: auto;text-transform: uppercase; } @media (min-width: 992px) {.header .navbar .navbar-nav .nav-item .nav-link {justify-content: center;height: 100%;padding: 0 0.6875rem;white-space: nowrap;} } @media (min-width: 1360px) {.header .navbar .navbar-nav .nav-item .nav-link {padding: 0 1.4375rem;} } .header .navbar .navbar-nav .nav-item .nav-link:after {content: "";height: 2px;background-color: var(--secondary);position: absolute;width: 0;left: 0.6875rem;top: auto;bottom: 0;transition-duration: 0.25s;transition-property: width, left; } @media (min-width: 992px) {.header .navbar .navbar-nav .nav-item .nav-link:after {top: calc(50% + 0.625rem);bottom: auto;left: 50%;} } .header .navbar .navbar-nav .nav-item .nav-link:hover, .header .navbar .navbar-nav .nav-item .nav-link:focus {text-decoration: none;color: var(--secondary); } .header .navbar .navbar-nav .nav-item .nav-link:hover:after, .header .navbar .navbar-nav .nav-item .nav-link:focus:after {background-color: var(--secondary);width: calc(100% - 1.375rem);left: 0.6875rem; } @media (min-width: 1360px) {.header .navbar .navbar-nav .nav-item .nav-link:hover:after, .header .navbar .navbar-nav .nav-item .nav-link:focus:after {width: calc(100% - 2.875rem);left: 1.4375rem;} } .header .navbar .navbar-nav .nav-item .nav {flex-direction: column; } @media (min-width: 992px) {.header .navbar .navbar-nav .nav-item .nav {position: absolute;background: var(--white);top: calc(50% + 1.75rem);right: 0;min-width: 15.625rem;box-shadow: 0 0.3125rem 0.625rem rgba(0, 0, 0, 0.5);visibility: hidden;opacity: 0;transition-duration: 0.5s;transition-property: visibility, opacity;} } .header .navbar .navbar-nav .nav-item .nav .nav-item .nav-link {justify-content: flex-start;padding: 0.625rem 1.25rem 0.625rem 3.125rem;color: var(--white); } @media (min-width: 992px) {.header .navbar .navbar-nav .nav-item .nav .nav-item .nav-link {padding: 0.625rem 1.25rem 0.625rem 1.25rem;color: var(--black);white-space: nowrap;} } .header .navbar .navbar-nav .nav-item .nav .nav-item .nav-link:after {content: none; } .header .navbar .navbar-nav .nav-item .nav .nav-item .nav-link:hover, .header .navbar .navbar-nav .nav-item .nav .nav-item .nav-link:focus {color: var(--secondary); } @media (min-width: 992px) {.header .navbar .navbar-nav .nav-item .nav .nav-item:first-child a {padding-top: 1.25rem;}.header .navbar .navbar-nav .nav-item .nav .nav-item:last-child a {padding-bottom: 1.25rem;} } @media (min-width: 768px) {.header .navbar .navbar-nav .nav-item:hover .nav, .header .navbar .navbar-nav .nav-item:focus .nav {visibility: visible;opacity: 1;} } .header .navbar .navbar-social a {color: var(--white); } .header .navbar .navbar-social a svg {width: 2.8125rem;height: auto; } .header-slideshow {width: 100%;max-width: 1920px;background: var(--dark);aspect-ratio: 1920/250;margin-left: auto;margin-right: auto; } .header-slideshow .carousel .holder {height: 100%;overflow: hidden; } .header-slideshow .carousel .holder .row {left: 0 !important;transition-duration: 0s !important; } .header-slideshow .carousel .holder .slide {inset: 0;position: absolute;opacity: 0;visibility: hidden;transition-duration: 1s;transition-property: opacity, visibility; } .header-slideshow .carousel .holder .slide.active {opacity: 1;visibility: visible;z-index: 1; } .header-slideshow .carousel .holder .image {height: 100%; } .header-slideshow .pager {position: relative;margin-left: auto;display: flex;align-items: center;justify-content: center;z-index: 2; } .header-slideshow .pager .nav {justify-content: center;position: absolute;bottom: 0.625rem; } .header-slideshow .pager .nav .nav-link {color: transparent;width: 1.25rem;height: 0.1875rem;background: #fff;display: block;cursor: pointer;overflow: hidden;margin: 0.625rem 0.125rem;border: 0;padding: 0;transition-duration: 0.5s;transition-property: background; } .header-slideshow .pager .nav .nav-link.active {background: var(--primary); }