.header {
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
width: 100%;
padding-top: 1.25rem;
position: absolute;
width: 100%;
top: 0;
left: 0;
}
.header > .container {
-webkit-flex-wrap: unset;
-moz-flex-wrap: unset;
-ms-flex-wrap: unset;
flex-wrap: unset;
-webkit-box-pack: justify;
-ms-flex-pack: justify;
-moz-justify-content: space-between;
-webkit-justify-content: space-between;
justify-content: space-between;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
gap: 1.25rem;
}
.header__logo {
-webkit-box-flex: 0;
-ms-flex: 0 0 15.9375rem;
flex: 0 0 15.9375rem;
}
.header__logo > img {
vertical-align: top;
display: block;
max-width: 100%;
height: auto;
}
.header__nav {
display: -webkit-inline-flex;
display: -ms-inline-flexbox;
display: inline-flex;
}
.header__nav > ul {
display: -webkit-inline-flex;
display: -ms-inline-flexbox;
display: inline-flex;
padding: 0;
margin: 0;
list-style: none;
gap: 2rem;
}
.header__nav > ul > li {}
.header__nav > ul > li > a,
.header__nav > ul > li > span {
display: -webkit-inline-flex;
display: -ms-inline-flexbox;
display: inline-flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
gap: .3125rem;
font-size: 1rem;
}
.header__nav > ul > li > span {
cursor: pointer;
}
.header__nav > ul > li:hover > a,
.header__nav > ul > li:hover > span {
color: #FFDC00;
}
.header__nav > ul > li.header__nav-hasSub {
position: relative;
}
.header__nav > ul > li.header__nav-hasSub > a::after,
.header__nav > ul > li.header__nav-hasSub > span::after {
content: "\e907";
font-size: .375rem;
transition: rotate .3s;
-webkit-transition: rotate .3s;
-moz-transition: rotate .3s;
-ms-transition: rotate .3s;
-o-transition: rotate .3s;
}
.header__nav > ul > li.header__nav-hasSub:hover > a::after,
.header__nav > ul > li.header__nav-hasSub:hover > span::after {
rotate: 180deg;
}
.header__nav-submenu {
background-color: #08171e;
padding: 1.25rem;
opacity: 0;
font-size: .9375rem;
visibility: hidden;
position: absolute;
top: 100%;
left: -1.25rem;
list-style: none;
margin: 0;
}
.header__nav > ul > li.header__nav-hasSub:hover > .header__nav-submenu {
opacity: 1;
visibility: visible;
}
.header__nav-submenu > li + li {
margin-top: .625rem;
}
.header__nav-submenu > li > a {
white-space: nowrap;
}
.header__nav-submenu > li > a:hover {
color: #FFDC00;
}
.header__actions {
display: -webkit-inline-flex;
display: -ms-inline-flexbox;
display: inline-flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
gap: 1.875rem;
} .header__nav-areas {
position: static;
}
.header__nav-areas > .header__nav-submenu {
left: calc(50% - 50px);
top: calc(100% + 16px);
transform: translateX(-50%);
-webkit-transform: translateX(-50%);
-moz-transform: translateX(-50%);
-ms-transform: translateX(-50%);
-o-transform: translateX(-50%);
width: 1200px;
max-width: 1200px;
border-radius: 6px;
background: #010101;
padding: 20px 50px;
}
.header__nav-areas > .header__nav-submenu::before {
content: '';
position: absolute;
bottom: 100%;
left: calc(50% + 50px);
transform: translateX(-50%);
-webkit-transform: translateX(-50%);
-moz-transform: translateX(-50%);
-ms-transform: translateX(-50%);
-o-transform: translateX(-50%);
border: 8px solid transparent;
border-bottom-color: #010101;
}
.header__nav-areas-grid {
display: grid;
grid-template-columns: 1fr 1fr 1fr 1fr;
gap: 16px;
}
.header__nav-areas-item {
display: grid;
grid-template-columns: 37px 1fr;
align-items: center;
gap: 20px;
text-decoration: none;
}
.header__nav-areas-item img {
width: 37px;
height: 37px;
object-fit: cover;
display: block;
}
.header__nav-areas-item span {
color: #FFF;
font-family: Rubik;
font-size: 16px;
font-weight: 400;
line-height: 16px;
}
.header__nav-areas-item:hover span {
color: #F8DC3E;
text-decoration: underline;
}
.header__lang {
position: relative;
}
.header__lang > button {
display: -webkit-inline-flex;
display: -ms-inline-flexbox;
display: inline-flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
gap: .3125rem;
font-size: .375rem;
color: #F8DC3E;
cursor: pointer;
background-color: transparent;
border: none;
padding: 0;
}
.header__lang > button::after {
content: "\e907";
font-size: .375rem;
transition: rotate .3s;
-webkit-transition: rotate .3s;
-moz-transition: rotate .3s;
-ms-transition: rotate .3s;
-o-transition: rotate .3s;
}
.header__lang > button:hover::after {
rotate: 180deg;
}
.lang__submenu {
background-color: #08171e;
padding: 1.25rem;
opacity: 0;
visibility: hidden;
list-style: none;
margin: 0;
position: absolute;
top: 100%;
left: -1.25rem;
z-index: 2;
}
.header__lang:hover > .lang__submenu {
opacity: 1;
visibility: visible;
}
.lang__submenu > li + li {
margin-top: .625rem;
}
.lang__submenu > li > a {
text-transform: uppercase;
font-size: .9375rem;
}
.lang__submenu > li > a:hover {
color: #F8DC3E;
}
.header__buttons {
display: -webkit-inline-flex;
display: -ms-inline-flexbox;
display: inline-flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
gap: 1.875rem;
}
.header__started {
font-size: .9375rem;
}
.header__started:hover {
color: #FFDC00;
}
.header__mob {
display: none;
-webkit-flex-direction: column;
-moz-flex-direction: column;
-ms-flex-direction: column;
flex-direction: column;
-moz-justify-content: center;
-webkit-justify-content: center;
justify-content: center;
-webkit-align-items: center;
align-items: center;
width: 32px;
height: 32px;
background-color: transparent;
border: none;
cursor: pointer;
padding: 0;
outline: none;
position: relative;
z-index: 11; }
.header__mob > span {
display: -webkit-inline-flex;
display: -ms-inline-flexbox;
display: inline-flex;
width: 100%;
height: 3px;
background-color: #F8DC3E;
border-radius: 50px;
-webkit-border-radius: 50px;
-moz-border-radius: 50px;
-ms-border-radius: 50px;
-o-border-radius: 50px;
}
.header__mob > span + span {
margin-top: 5px;
}
body.navOpen {
overflow: hidden;
}
body.navOpen .header__mob > span {
background-color: #fff;
}
body.navOpen .header__nav {
visibility: visible;
right: 0;
}
body.navOpen .header__mob > span:nth-of-type(1) {
animation: stick-1-open .85s ease-out forwards;
-webkit-animation: stick-1-open .85s ease-out forwards;
}
body.navOpen .header__mob > span:nth-of-type(2) {
width: 29px;
margin-left: 0;
animation: stick-2-open .85s linear forwards;
-webkit-animation: stick-2-open .85s linear forwards;
}
body.navOpen .header__mob > span:nth-of-type(3) {
animation: stick-3-open .85s linear forwards;
-webkit-animation: stick-3-open .85s linear forwards;
}
body.navClose .header__mob > span:nth-of-type(1) {
width: 3px;
animation: stick-1-close .85s ease-out forwards;
-webkit-animation: stick-1-close .85s ease-out forwards;
}
body.navClose .header__mob > span:nth-of-type(2) {
margin-left: 0;
animation: stick-2-close .85s ease-out forwards;
-webkit-animation: stick-2-close .85s ease-out forwards;
}
body.navClose .header__mob > span:nth-of-type(3) {
animation: stick-3-close .85s ease-out forwards;
-webkit-animation: stick-3-close .85s ease-out forwards;
}
.header__nav-mob {
display: none;
}