diff --git a/kit/css/header.css b/kit/css/header.css
new file mode 100644
index 0000000..cdf4988
--- /dev/null
+++ b/kit/css/header.css
@@ -0,0 +1,328 @@
+header {
+ position: fixed;
+ top: 0;
+ right: 0;
+ bottom: 0;
+ left: 0;
+ z-index: 30;
+ height: 7.33333rem;
+ padding: 1rem 0;
+ background-color: #ffffff;
+}
+
+header::after {
+ content: '';
+ position: absolute;
+ top: 100%;
+ right: 0;
+ left: 0;
+ display: block;
+ height: 0.33333rem;
+ background-image: -webkit-gradient(linear, left top, left bottom, from(rgba(51, 51, 51, 0.15)), to(rgba(51, 51, 51, 0)));
+ background-image: -webkit-linear-gradient(top, rgba(51, 51, 51, 0.15), rgba(51, 51, 51, 0));
+ background-image: -o-linear-gradient(top, rgba(51, 51, 51, 0.15), rgba(51, 51, 51, 0));
+ background-image: linear-gradient(to bottom, rgba(51, 51, 51, 0.15), rgba(51, 51, 51, 0));
+}
+
+header + * {
+ display: block;
+ margin-top: 7.33333rem;
+}
+
+header .content-wrap {
+ display: -webkit-box;
+ display: -ms-flexbox;
+ display: flex;
+ height: 100%;
+ -webkit-box-orient: horizontal;
+ -webkit-box-direction: normal;
+ -ms-flex-direction: row;
+ flex-direction: row;
+ -ms-flex-wrap: nowrap;
+ flex-wrap: nowrap;
+ -webkit-box-align: center;
+ -ms-flex-align: center;
+ align-items: center;
+ -webkit-box-pack: start;
+ -ms-flex-pack: start;
+ justify-content: flex-start;
+}
+
+header .header-logo-container {
+ position: static;
+ padding: 0.22222rem 0;
+ margin-right: auto;
+ color: #333333;
+ line-height: 1;
+}
+
+header .header-logo-container::after {
+ display: none;
+}
+
+header .header-button-container {
+ margin-left: 3.33333rem;
+}
+
+header:not(.sticky-header) nav {
+ margin-top: 3.11111rem;
+}
+
+header:not(.sticky-header) .header-button-container {
+ margin-top: 2.88889rem;
+}
+
+.header-logo {
+ display: block;
+ width: 10rem;
+ height: 4.61111rem;
+}
+
+.header-logo-text {
+ display: none;
+}
+
+.header-logo-mobile {
+ display: none;
+ width: 6.11111rem;
+ height: 2.77778rem;
+}
+
+.header-burger-button {
+ display: none;
+}
+
+.header-burger-button + label {
+ position: relative;
+ display: none;
+ width: 40px;
+ height: 40px;
+ background-image: url(../img/burger-menu.svg);
+ background-repeat: no-repeat;
+ background-position: center center;
+ background-size: contain;
+ cursor: pointer;
+}
+
+.header-burger-button + label span {
+ display: none;
+}
+
+.header-button {
+ position: relative;
+ display: block;
+ padding: 0.55556rem 2.5rem;
+ color: #ffffff;
+ font-weight: 500;
+ white-space: nowrap;
+ background-image: -webkit-gradient(linear, left bottom, left top, from(#009982), to(#00c8ad));
+ background-image: -webkit-linear-gradient(bottom, #009982, #00c8ad);
+ background-image: -o-linear-gradient(bottom, #009982, #00c8ad);
+ background-image: linear-gradient(0deg, #009982, #00c8ad);
+ border-radius: 3px;
+}
+
+.header-button:hover::before {
+ opacity: 1;
+}
+
+.header-button::before {
+ content: '';
+ position: absolute;
+ top: 0;
+ right: 0;
+ bottom: 0;
+ left: 0;
+ display: block;
+ width: 100%;
+ height: 100%;
+ background-color: #333333;
+ border-radius: 3px;
+ opacity: 0;
+ -webkit-transition: opacity .5s;
+ -o-transition: opacity .5s;
+ transition: opacity .5s;
+}
+
+.header-button span {
+ position: relative;
+ z-index: 1;
+}
+
+.header-lang {
+ position: absolute;
+ top: 10px;
+ right: calc((100% - 1170px) / 2);
+ display: -webkit-box;
+ display: -ms-flexbox;
+ display: flex;
+ padding: 0.61111rem 0;
+}
+
+.header-lang li {
+ border-left: 1px solid #333333;
+ line-height: 1;
+}
+
+.header-lang li:first-child {
+ border-left: none;
+}
+
+.header-lang li a {
+ padding: 0 8px;
+ line-height: 1rem;
+ -webkit-transition: color .3s;
+ -o-transition: color .3s;
+ transition: color .3s;
+}
+
+.header-lang li a:hover {
+ color: #009982;
+}
+
+.header-lang li.active a {
+ color: #009982;
+ font-weight: 700;
+}
+
+.header-search {
+ display: none;
+}
+
+.header-search img {
+ width: 25px;
+ padding: 0.77778rem 0;
+}
+
+.header-search span {
+ display: none;
+}
+
+@media (max-width: 1280px) {
+ .header-lang {
+ right: 30px;
+ }
+}
+
+@media (max-width: 960px) {
+ header {
+ position: fixed;
+ top: 0;
+ right: 0;
+ left: 0;
+ z-index: 30;
+ height: 4.44444rem;
+ padding: 0.55556rem 0;
+ }
+ header + * {
+ margin-top: 4.44444rem;
+ }
+ header .header-logo {
+ display: none;
+ }
+ header .header-logo-mobile {
+ display: block;
+ }
+ header .header-button-container {
+ margin-left: 1.66667rem;
+ }
+ header .header-button {
+ padding: 0.66667rem 2.5rem;
+ }
+ header .header-burger-button + label {
+ -webkit-box-ordinal-group: 11;
+ -ms-flex-order: 10;
+ order: 10;
+ display: block;
+ margin-left: 15px;
+ }
+ header:not(.sticky-header) nav {
+ margin-top: 0;
+ }
+ header:not(.sticky-header) .header-button-container {
+ margin-top: 0;
+ }
+ + * {
+ display: block;
+ margin-top: 4.44444rem;
+ }
+ .header-lang {
+ position: static;
+ padding: 0.72222rem 0;
+ margin-right: 10px;
+ font-size: 18px;
+ }
+ .header-lang li {
+ line-height: initial;
+ }
+ .header-search {
+ display: block;
+ }
+}
+
+@media (max-width: 500px) {
+ header .header-button-container {
+ display: none;
+ }
+}
+
+.sticky-header {
+ height: 4.44444rem;
+ padding: 0.55556rem 0;
+}
+
+.sticky-header + * {
+ margin-top: 4.44444rem;
+}
+
+.sticky-header .header-logo {
+ display: none;
+}
+
+.sticky-header .header-logo-mobile {
+ display: block;
+}
+
+.sticky-header nav > ul > li:hover > a::after,
+.sticky-header nav > ul > li:active > a::after {
+ bottom: -1.72222rem;
+ height: 1.66667rem;
+}
+
+.sticky-header .header-button-container .header-button {
+ padding: 12px 35px;
+ font-size: 14px;
+}
+
+.sticky-header .header-lang {
+ position: static;
+ padding: 0.72222rem 0;
+ margin-bottom: 2px;
+ font-size: 18px;
+}
+
+.sticky-header .header-lang li {
+ line-height: initial;
+}
+
+.sticky-header .header-search {
+ display: none;
+}
+
+@media (max-width: 1280px) {
+ .sticky-header .header-lang {
+ margin-bottom: 4px;
+ }
+}
+
+@media (max-width: 960px) {
+ .sticky-header .header-search {
+ display: block;
+ }
+ .sticky-header .header-button-container .header-button {
+ padding: 0.66667rem 2.5rem;
+ }
+ .sticky-header nav {
+ padding: 0;
+ }
+}
diff --git a/kit/css/menu.css b/kit/css/menu.css
new file mode 100644
index 0000000..b92c164
--- /dev/null
+++ b/kit/css/menu.css
@@ -0,0 +1,405 @@
+nav .container-3-cols {
+ flex-wrap: wrap;
+}
+
+nav .container-3-cols .column {
+ margin-top: 1.66667rem;
+}
+
+nav .container-3-cols .column:nth-of-type(1), nav .container-3-cols .column:nth-of-type(2), nav .container-3-cols .column:nth-of-type(3) {
+ margin-top: 0;
+}
+
+nav .container-3-cols .column:nth-of-type(3n+1) {
+ margin-left: 0;
+}
+
+nav > ul {
+ display: flex;
+ flex-direction: row;
+ flex-wrap: nowrap;
+ align-items: flex-start;
+ justify-content: flex-start;
+}
+
+nav > ul > li {
+ margin-left: 2.5rem;
+}
+
+nav > ul > li > a {
+ position: relative;
+ display: block;
+ font-weight: 500;
+ line-height: 1;
+}
+
+nav > ul > li:hover > a,
+nav > ul > li:active > a {
+ color: #009982;
+}
+
+nav > ul > li:hover > a::after,
+nav > ul > li:active > a::after {
+ content: '';
+ position: absolute;
+ bottom: -1.61111rem;
+ left: 0;
+ width: 100%;
+ height: 1.55556rem;
+ border-bottom: 4px solid #009982;
+}
+
+nav > ul > li.opened .nav-first-level-opener::after {
+ transform: rotateX(90deg);
+}
+
+nav > ul > li .nav-first-level-opener {
+ position: absolute;
+ top: 12px;
+ right: 12px;
+ z-index: 1;
+ display: none;
+ width: 30px;
+ height: 30px;
+ cursor: pointer;
+}
+
+nav > ul > li .nav-first-level-opener span {
+ display: none;
+}
+
+nav > ul > li .nav-first-level-opener::before, nav > ul > li .nav-first-level-opener::after {
+ content: '';
+ position: absolute;
+ background-color: #009982;
+ transition: transform .3s;
+}
+
+nav > ul > li .nav-first-level-opener::before {
+ top: 45%;
+ right: 25%;
+ left: 25%;
+ width: 50%;
+ height: 10%;
+}
+
+nav > ul > li .nav-first-level-opener::after {
+ top: 25%;
+ bottom: 25%;
+ left: 45%;
+ width: 10%;
+ height: 50%;
+}
+
+@media (max-width: 1280px) {
+ nav > ul > li:hover a::after,
+ nav > ul > li:active a::after {
+ border-bottom-width: 3px;
+ }
+}
+
+@media (max-width: 1024px) {
+ nav > ul > li:hover a::after,
+ nav > ul > li:active a::after {
+ border-bottom-width: 2px;
+ }
+}
+
+@media (max-width: 960px) {
+ nav {
+ position: fixed;
+ top: 4.44444rem;
+ right: -360px;
+ z-index: 20;
+ width: 360px;
+ max-width: 100%;
+ height: calc(100vh - 80px + 20px);
+ padding: 0;
+ overflow: hidden;
+ overflow-y: scroll;
+ background-color: #f2f2f2;
+ transition: right .3s;
+ }
+ nav > ul {
+ flex-direction: column;
+ flex-wrap: nowrap;
+ align-items: flex-start;
+ justify-content: flex-start;
+ }
+ nav > ul > li {
+ position: relative;
+ z-index: 2;
+ width: 100%;
+ margin-left: 0;
+ border-bottom: 1px solid #cccccc;
+ }
+ nav > ul > li > a {
+ padding: 20px;
+ line-height: 1;
+ background-color: #ffffff;
+ }
+ nav > ul > li:nth-of-type(1) {
+ border-top: 1px solid #cccccc;
+ }
+ nav > ul > li:hover > a::after,
+ nav > ul > li:active > a::after {
+ display: none;
+ }
+ nav > ul > li .nav-first-level-opener {
+ display: block;
+ }
+ .header-burger-button:checked + label + nav {
+ right: 0;
+ }
+}
+
+.nav-second-level {
+ position: absolute;
+ top: 100%;
+ z-index: 10;
+ width: 17.77778rem;
+ padding-top: 2.5rem;
+ padding-bottom: 3.33333rem;
+ overflow: hidden;
+ transform: translateZ(0);
+ background-color: #f2f2f2;
+ opacity: 0;
+ visibility: hidden;
+ transition: opacity .3s, visibility .3s;
+}
+
+.nav-second-level::before {
+ content: '';
+ position: absolute;
+ top: -10px;
+ display: block;
+ width: 100%;
+ padding-top: 10px;
+}
+
+.nav-second-level.mega-flyout {
+ right: 0;
+ left: 0;
+ width: 100%;
+ min-width: 100%;
+ max-width: none;
+ padding-top: 4.44444rem;
+ padding-bottom: 8.88889rem;
+}
+
+.nav-second-level.mega-flyout::after {
+ content: '';
+ position: absolute;
+ top: 100%;
+ right: 0;
+ left: 0;
+ display: block;
+ height: 0.83333rem;
+ background-image: linear-gradient(to bottom, rgba(51, 51, 51, 0.5), rgba(51, 51, 51, 0));
+}
+
+.nav-second-level .content-wrap {
+ align-items: stretch;
+ justify-content: flex-start;
+}
+
+.nav-second-level .container {
+ width: 100%;
+}
+
+.nav-second-level .container .column {
+ overflow: hidden;
+ overflow-wrap: break-word;
+ overflow-wrap: anywhere;
+}
+
+.nav-second-level-group {
+ position: relative;
+}
+
+.nav-second-level-group + .nav-second-level-group {
+ margin-top: 2.66667rem;
+}
+
+.nav-second-level-group-headline {
+ position: relative;
+ display: inline-block;
+ margin-bottom: 1rem;
+ margin-left: 2rem;
+ color: #009982;
+ font-weight: 700;
+}
+
+.nav-second-level-group-headline .icon {
+ position: absolute;
+ top: 1px;
+ left: -2rem;
+ width: 1.33333rem;
+ height: 1.33333rem;
+ background-repeat: no-repeat;
+ background-position: left center;
+ background-size: contain;
+}
+
+.nav-second-level-group-headline span {
+ margin-left: -2rem;
+}
+
+.nav-second-level-group-headline .icon + span {
+ margin-left: 0;
+}
+
+.nav-second-level-group-headline:hover {
+ text-decoration: underline;
+}
+
+.nav-second-level-group.opened .nav-second-level-opener::after {
+ transform: rotateX(90deg);
+}
+
+.nav-second-level ul li a {
+ position: relative;
+ display: block;
+ margin-left: 1.33333rem;
+ font-size: 0.88889rem;
+ font-weight: 300;
+}
+
+.nav-second-level ul li a::before {
+ content: '';
+ position: absolute;
+ top: 0.33333rem;
+ left: -1.33333rem;
+ width: 0.88889rem;
+ height: 0.88889rem;
+ font-size: 1.44444rem;
+ background-image: url(img/arrow-right-grey.svg);
+ background-repeat: no-repeat;
+ background-position: center;
+ background-size: contain;
+}
+
+.nav-second-level ul li a:hover {
+ text-decoration: underline;
+}
+
+.nav-second-level .nav-second-level-opener {
+ position: absolute;
+ top: 0.88889rem;
+ right: 14px;
+ z-index: 1;
+ display: none;
+ width: 24px;
+ height: 24px;
+ cursor: pointer;
+}
+
+.nav-second-level .nav-second-level-opener span {
+ display: none;
+}
+
+.nav-second-level .nav-second-level-opener::before, .nav-second-level .nav-second-level-opener::after {
+ content: '';
+ position: absolute;
+ background-color: #009982;
+ transition: transform .3s;
+}
+
+.nav-second-level .nav-second-level-opener::before {
+ top: 45%;
+ right: 25%;
+ left: 25%;
+ width: 12px;
+ height: 2px;
+}
+
+.nav-second-level .nav-second-level-opener::after {
+ top: 25%;
+ bottom: 25%;
+ left: 45%;
+ width: 2px;
+ height: 12px;
+}
+
+nav ul li:hover .nav-second-level {
+ overflow: visible;
+ opacity: 1;
+ visibility: visible;
+}
+
+@media (max-width: 960px) {
+ .nav-second-level,
+ nav ul li:hover .nav-second-level {
+ position: static;
+ width: 100%;
+ height: auto;
+ padding-top: 0;
+ padding-bottom: 0.83333rem;
+ border-top: 1px solid #cccccc;
+ overflow: hidden;
+ opacity: 1;
+ visibility: visible;
+ }
+ .nav-second-level.mega-flyout,
+ nav ul li:hover .nav-second-level.mega-flyout {
+ padding-top: 0;
+ padding-bottom: 0.83333rem;
+ }
+ .nav-second-level .container,
+ nav ul li:hover .nav-second-level .container {
+ flex-direction: column;
+ }
+ .nav-second-level .container-3-cols,
+ nav ul li:hover .nav-second-level .container-3-cols {
+ flex-direction: column;
+ }
+ .nav-second-level .container-3-cols .column,
+ .nav-second-level .container-3-cols .column + .column,
+ nav ul li:hover .nav-second-level .container-3-cols .column,
+ nav ul li:hover .nav-second-level .container-3-cols .column + .column {
+ width: 100%;
+ margin-left: 0;
+ }
+ .nav-second-level .container-3-cols .column:nth-of-type(n+3),
+ nav ul li:hover .nav-second-level .container-3-cols .column:nth-of-type(n+3) {
+ margin-top: 0;
+ }
+ .nav-second-level .content-wrap,
+ nav ul li:hover .nav-second-level .content-wrap {
+ padding: 0;
+ }
+ .nav-second-level::after,
+ nav ul li:hover .nav-second-level::after {
+ display: none;
+ }
+ .nav-second-level .nav-second-level-opener,
+ nav ul li:hover .nav-second-level .nav-second-level-opener {
+ display: block;
+ }
+ .nav-second-level-group + .nav-second-level-group {
+ margin-top: 0;
+ }
+ .nav-second-level-group-headline {
+ margin-top: 0.83333rem;
+ margin-bottom: 0;
+ margin-left: 2.77778rem;
+ }
+ .nav-second-level-group-headline .icon {
+ top: 0;
+ left: -1.55556rem;
+ }
+ .nav-second-level-group-headline span {
+ margin-left: -1.55556rem;
+ }
+ .nav-second-level-group-headline .icon + span {
+ margin-left: 0;
+ }
+ .nav-second-level-group ul {
+ padding: 0.83333rem 1.44444rem;
+ margin-top: 0;
+ overflow: hidden;
+ }
+ .opened > a {
+ color: #009982;
+ }
+}
diff --git a/kit/header.php b/kit/header.php
index 0720bf0..65cbaf1 100644
--- a/kit/header.php
+++ b/kit/header.php
@@ -15,6 +15,7 @@
+
diff --git a/kit/style.css b/kit/style.css
index 8b4ac27..147acb0 100644
--- a/kit/style.css
+++ b/kit/style.css
@@ -1324,336 +1324,7 @@ body.page-theme-color-quaternary h2::after {
src: local("Roboto Black Italic"), local("Roboto-BlackItalic"), url("../fonts/roboto-v18-latin-900italic.woff2") format("woff2"), url("../fonts/roboto-v18-latin-900italic.woff") format("woff");
}
-header {
- position: fixed;
- top: 0;
- right: 0;
- bottom: 0;
- left: 0;
- z-index: 30;
- height: 7.33333rem;
- padding: 1rem 0;
- background-color: #ffffff;
-}
-
-header::after {
- content: '';
- position: absolute;
- top: 100%;
- right: 0;
- left: 0;
- display: block;
- height: 0.33333rem;
- background-image: -webkit-gradient(linear, left top, left bottom, from(rgba(51, 51, 51, 0.15)), to(rgba(51, 51, 51, 0)));
- background-image: -webkit-linear-gradient(top, rgba(51, 51, 51, 0.15), rgba(51, 51, 51, 0));
- background-image: -o-linear-gradient(top, rgba(51, 51, 51, 0.15), rgba(51, 51, 51, 0));
- background-image: linear-gradient(to bottom, rgba(51, 51, 51, 0.15), rgba(51, 51, 51, 0));
-}
-
-header + * {
- display: block;
- margin-top: 7.33333rem;
-}
-
-header .content-wrap {
- display: -webkit-box;
- display: -ms-flexbox;
- display: flex;
- height: 100%;
- -webkit-box-orient: horizontal;
- -webkit-box-direction: normal;
- -ms-flex-direction: row;
- flex-direction: row;
- -ms-flex-wrap: nowrap;
- flex-wrap: nowrap;
- -webkit-box-align: center;
- -ms-flex-align: center;
- align-items: center;
- -webkit-box-pack: start;
- -ms-flex-pack: start;
- justify-content: flex-start;
-}
-
-header .header-logo-container {
- position: static;
- padding: 0.22222rem 0;
- margin-right: auto;
- color: #333333;
- line-height: 1;
-}
-
-header .header-logo-container::after {
- display: none;
-}
-
-header .header-button-container {
- margin-left: 3.33333rem;
-}
-
-header:not(.sticky-header) nav {
- margin-top: 3.11111rem;
-}
-
-header:not(.sticky-header) .header-button-container {
- margin-top: 2.88889rem;
-}
-
-.header-logo {
- display: block;
- width: 10rem;
- height: 4.61111rem;
-}
-
-.header-logo-text {
- display: none;
-}
-
-.header-logo-mobile {
- display: none;
- width: 6.11111rem;
- height: 2.77778rem;
-}
-
-.header-burger-button {
- display: none;
-}
-
-.header-burger-button + label {
- position: relative;
- display: none;
- width: 40px;
- height: 40px;
- background-image: url(../img/burger-menu.svg);
- background-repeat: no-repeat;
- background-position: center center;
- background-size: contain;
- cursor: pointer;
-}
-
-.header-burger-button + label span {
- display: none;
-}
-
-.header-button {
- position: relative;
- display: block;
- padding: 0.55556rem 2.5rem;
- color: #ffffff;
- font-weight: 500;
- white-space: nowrap;
- background-image: -webkit-gradient(linear, left bottom, left top, from(#009982), to(#00c8ad));
- background-image: -webkit-linear-gradient(bottom, #009982, #00c8ad);
- background-image: -o-linear-gradient(bottom, #009982, #00c8ad);
- background-image: linear-gradient(0deg, #009982, #00c8ad);
- border-radius: 3px;
-}
-
-.header-button:hover::before {
- opacity: 1;
-}
-
-.header-button::before {
- content: '';
- position: absolute;
- top: 0;
- right: 0;
- bottom: 0;
- left: 0;
- display: block;
- width: 100%;
- height: 100%;
- background-color: #333333;
- border-radius: 3px;
- opacity: 0;
- -webkit-transition: opacity .5s;
- -o-transition: opacity .5s;
- transition: opacity .5s;
-}
-
-.header-button span {
- position: relative;
- z-index: 1;
-}
-
-.header-lang {
- position: absolute;
- top: 10px;
- right: calc((100% - 1170px) / 2);
- display: -webkit-box;
- display: -ms-flexbox;
- display: flex;
- padding: 0.61111rem 0;
-}
-
-.header-lang li {
- border-left: 1px solid #333333;
- line-height: 1;
-}
-
-.header-lang li:first-child {
- border-left: none;
-}
-
-.header-lang li a {
- padding: 0 8px;
- line-height: 1rem;
- -webkit-transition: color .3s;
- -o-transition: color .3s;
- transition: color .3s;
-}
-
-.header-lang li a:hover {
- color: #009982;
-}
-
-.header-lang li.active a {
- color: #009982;
- font-weight: 700;
-}
-
-.header-search {
- display: none;
-}
-
-.header-search img {
- width: 25px;
- padding: 0.77778rem 0;
-}
-
-.header-search span {
- display: none;
-}
-
-@media (max-width: 1280px) {
- .header-lang {
- right: 30px;
- }
-}
-
-@media (max-width: 960px) {
- header {
- position: fixed;
- top: 0;
- right: 0;
- left: 0;
- z-index: 30;
- height: 4.44444rem;
- padding: 0.55556rem 0;
- }
- header + * {
- margin-top: 4.44444rem;
- }
- header .header-logo {
- display: none;
- }
- header .header-logo-mobile {
- display: block;
- }
- header .header-button-container {
- margin-left: 1.66667rem;
- }
- header .header-button {
- padding: 0.66667rem 2.5rem;
- }
- header .header-burger-button + label {
- -webkit-box-ordinal-group: 11;
- -ms-flex-order: 10;
- order: 10;
- display: block;
- margin-left: 15px;
- }
- header:not(.sticky-header) nav {
- margin-top: 0;
- }
- header:not(.sticky-header) .header-button-container {
- margin-top: 0;
- }
- + * {
- display: block;
- margin-top: 4.44444rem;
- }
- .header-lang {
- position: static;
- padding: 0.72222rem 0;
- margin-right: 10px;
- font-size: 18px;
- }
- .header-lang li {
- line-height: initial;
- }
- .header-search {
- display: block;
- }
-}
-
-@media (max-width: 500px) {
- header .header-button-container {
- display: none;
- }
-}
-
-.sticky-header {
- height: 4.44444rem;
- padding: 0.55556rem 0;
-}
-
-.sticky-header + * {
- margin-top: 4.44444rem;
-}
-
-.sticky-header .header-logo {
- display: none;
-}
-
-.sticky-header .header-logo-mobile {
- display: block;
-}
-
-.sticky-header nav > ul > li:hover > a::after,
-.sticky-header nav > ul > li:active > a::after {
- bottom: -1.72222rem;
- height: 1.66667rem;
-}
-
-.sticky-header .header-button-container .header-button {
- padding: 12px 35px;
- font-size: 14px;
-}
-
-.sticky-header .header-lang {
- position: static;
- padding: 0.72222rem 0;
- margin-bottom: 2px;
- font-size: 18px;
-}
-
-.sticky-header .header-lang li {
- line-height: initial;
-}
-
-.sticky-header .header-search {
- display: none;
-}
-
-@media (max-width: 1280px) {
- .sticky-header .header-lang {
- margin-bottom: 4px;
- }
-}
-
-@media (max-width: 960px) {
- .sticky-header .header-search {
- display: block;
- }
- .sticky-header .header-button-container .header-button {
- padding: 0.66667rem 2.5rem;
- }
- .sticky-header nav {
- padding: 0;
- }
-}
-
-/* header menu in seperate css file */
+/* header & header menu in seperate css file */
aside {
position: fixed;
diff --git a/kit/template-parts/site-nav.php b/kit/template-parts/site-nav.php
new file mode 100644
index 0000000..514f0ee
--- /dev/null
+++ b/kit/template-parts/site-nav.php
@@ -0,0 +1,118 @@
+