header { position: fixed; top: 0; right: 0; bottom: 0; left: 0; z-index: 30; height: 7.33333rem; padding: 1rem 0; background-color: #ffffff; } body.logged-in header { top: 31px; } header::after { content: ''; position: absolute; top: 100%; right: 0; left: 0; display: block; height: 0.33333rem; 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: flex; height: 100%; flex-direction: row; flex-wrap: nowrap; align-items: center; } header .header-logo-container { position: static; padding: 0.22222rem 0; color: #333333; line-height: 1; flex-grow: 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: 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; transition: opacity .5s; } .header-button span { position: relative; z-index: 1; } .header-lang { position: absolute; top: 10px; right: calc((100% - 1170px) / 2); 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; 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 { 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; } }