header .blog-search input {
display: none;
}
header .blog-search .btn-search {
background: transparent;
border: none;
display: flex;
}
#searchform:hover ~ input{
display: flex;
}
header {
position: fixed;
top: 0;
left: 0;
width: 100%;
background: var(--white-color);
z-index: 998;
transition: transform 0.4s;
}
header.sticky {
-webkit-box-shadow: 0 2px 3px rgba(0, 0, 0, 0.05);
-moz-box-shadow: 0 2px 3px rgba(0, 0, 0, 0.05);
box-shadow: 0 2px 3px rgba(0, 0, 0, 0.05);
}
header.scroll-down {
transform: translate3d(0, -40px, 0);
}
.header-top-link ul {
display: flex;
flex-wrap: wrap;
}
.header-top { background: var(--bg-color);
}
.header-top-link li {
margin-left: 0rem;
max-height: 40px;
border-bottom: 4px solid var(--border-bottom-color);
}
.header-top-link li:first-child {
margin-left: 0;
}
.header-top-link li.active {
border-color: var(--white-color);
background: var(--white-color);
}
.header-top-link a {
padding: 1rem 1.6rem;
font-size: 1.2rem;
line-height: 2rem;
display: block;
color: var(--top-menu-text-color) !important;
text-decoration: none !important;
}
.header-top-link li.active a {
color: var(--top-menu-text-active-color) !important;
font-weight: 700 !important;
background: var(--white-color);
}
.header-top-link li:hover a {
color: var(--top-menu-text-hover-color) !important;
background: var(--white-color);
}
.header-top-link li:hover {
color: var(--top-menu-hover-text-color) !important;
background: var(--white-color);
border-color: var(--white-color) !important;
}
.language-switch {
margin-left: 1.85rem;
position: relative;
}
.language-outer {
display: flex;
flex-wrap: wrap;
align-items: center;
cursor: pointer;
color: var(--top-menu-text-color);
}
.language-text {
margin-left: 0.65rem;
position: relative;
font-size: 1.2rem;
line-height: 2rem;
display: flex;
padding-right: 1.2rem;
align-items: center;
}
.language-dropdown {
position: absolute;
z-index: 5;
border: 1px solid #a5bfe5;
min-width: 10.2rem;
border-radius: 0.4rem;
overflow: hidden;
background: var(--white-color);
top: 3.4rem;
right: -1.435rem;
-webkit-transform-origin: top center;
transform-origin: top center;
-webkit-transform: scale(1, 0);
-moz-transform: scale(1, 0);
-ms-transform: scale(1, 0);
transform: scale(1, 0);
opacity: 0;
visibility: hidden;
-webkit-transition: 0.2s ease;
-moz-transition: 0.2s ease;
transition: 0.2s ease;
}
.language-dropdown.toggle {
-webkit-transform: scale(1, 1);
-moz-transform: scale(1, 1);
-ms-transform: scale(1, 1);
transform: scale(1, 1);
opacity: 1;
visibility: visible;
}
.language-dropdown li a {
display: block;
padding: 0.8rem 1rem 0.8rem 1.6rem;
color: var(--primary-color) !important;
text-decoration: none !important;
}
.language-dropdown li:hover a,
.language-dropdown li.active a {
background: #eef3fc;
}
.header-top-mobile {
display: none;
padding: 0.8rem 0;
}
.select {
position: relative;
margin-bottom: 0;
width: 100%;
margin: auto;
}
.select .selectBtn {
padding: 0.8rem 5.2rem 0.8rem 1.6rem;
width: 100%;
cursor: pointer;
position: relative;
font-size: 1.6rem;
line-height: 2.4rem;
color: var(--primary-color);
display: flex;
align-items: center;
}
.select .selectBtn:visited {
background: transparent !important;
}
.select .selectBtn:after {
content: '';
position: absolute;
right: 3.2rem;
width: 1.1rem;
height: 1.1rem;
-webkit-transform: translateY(-50%) rotate(45deg);
transform: translateY(-50%) rotate(45deg);
border-right: 2px solid var(--primary-color);
border-bottom: 2px solid var(--primary-color);
transition: 0.2s ease;
}
.select .selectBtn.toggle:after {
-webkit-transform: rotate(-135deg);
transform: rotate(-135deg);
}
.select .selectDropdown {
position: absolute;
top: 100%;
width: 100%;
overflow: hidden;
background: var(--white-color);
z-index: 1;
-webkit-transform: scale(1, 0);
transform: scale(1, 0);
-webkit-transform-origin: top center;
transform-origin: top center;
visibility: hidden;
transition: 0.2s ease;
}
.select .selectDropdown .option {
padding: 1.1rem 1.6rem;
box-sizing: border-box;
cursor: pointer;
font-size: 1.6rem;
line-height: 2.6rem;
color: var(--primary-color);
}
.select .selectDropdown.toggle {
visibility: visible;
-webkit-transform: scale(1, 1);
transform: scale(1, 1);
}
.header-center {
position: relative;
padding: 1.6rem 0;
}
.logo a {
display: block;
text-decoration: none !important;
}
.logo img {
width: auto;
height: 4.8rem;
}
.header-btn {
display: flex;
flex-wrap: wrap;
align-items: center;
}
.header-btn .btn {
margin-left: 1.6rem;
}
.header-btn:first-child .btn {
margin-left: 0;
}
.submenu-item ul.row {
justify-content: space-between;
}
.submenu-title h6 {
margin-bottom: 2rem !important;
}
.submenu-children ul > li {
margin-top: 1rem;
}
.submenu-children ul > li a {
text-decoration: none;
}
.submenu-children:nth-child(n + 2) {
padding-left: 10px;
}
.header-action {
display: flex;
align-items: center;
position: relative;
font-size: 1.2rem;
line-height: 1.8rem;
margin-left: 3.2rem;
color: var(--primary-color) !important;
text-decoration: none !important;
}
.header-action:hover {
color: var(--secondary-color) !important;
}
.header-action:first-child {
margin-left: 0;
}
.header-account span {
margin-right: 0.4rem;
}
.header-center-mobile {
display: none;
flex-wrap: wrap;
align-items: center;
}
.toggleMenu {
position: relative;
width: 1.75rem;
height: 1.2rem;
margin-right: 1.2rem;
}
.toggleMenu span {
position: absolute;
display: block;
width: 100%;
height: 0.2rem;
pointer-events: none;
background: var(--primary-color);
}
.toggleMenu span.bar1 {
top: 0;
transform: rotate(0);
transition: top 0.15s ease 0.15s, transform 0.15s ease-out 0.05s;
}
.toggleMenu.active span.bar1 {
top: 0.5rem;
transform: rotate(45deg);
transition: top 0.15s ease 0.05s, transform 0.15s ease-out 0.25s;
}
.toggleMenu span.bar2 {
top: 0.5rem;
opacity: 1;
transition: 0.15s ease 0.15s;
}
.toggleMenu.active span.bar2 {
opacity: 0;
}
.toggleMenu span.bar3 {
top: 1rem;
transform: rotate(0);
transition: top 0.15s ease 0.15s, transform 0.15s ease-out 0.05s;
}
.toggleMenu.active span.bar3 {
top: 0.5rem;
transform: rotate(-45deg);
transition: top 0.15s ease 0.05s, transform 0.15s ease-out 0.25s;
}
.menu ul {
margin: 0;
}
.menu li {
padding: 0;
margin: 0;
}
.menu li:after {
content: none;
}
.menu > ul {
display: flex;
flex-wrap: wrap;
align-items: center;
}
.menu > ul > li {
margin-left: 0rem;
}
.menu > ul > li:first-child {
margin-left: 0;
}
.menu > ul > li > a {
display: flex;
padding: 0.8rem 1.6rem;
font-size: 1.4rem;
line-height: 2.3rem;
position: relative;
color: var(--menu-text-color) !important;
text-decoration: none !important;
}
.menu > ul > li.active > a,
.menu > ul > li:hover > a {
background: var(--bg-color);
color: var(--menu-text-color-hover) !important;
}
.menu > ul > li.haschild > a > span {
margin-left: 0.4rem;
-webkit-transition: 0.3s ease;
-moz-transition: 0.3s ease;
transition: 0.3s ease;
}
.menu > ul > li.haschild:hover > a > span {
-webkit-transform: rotate(-180deg);
-moz-transform: rotate(-180deg);
-ms-transform: rotate(-180deg);
transform: rotate(-180deg);
}
.submenu {
position: absolute;
top: 100%;
left: 0;
width: 100%;
min-width: 24.2rem;
background: var(--bg-color);
padding: 1.6rem;
-webkit-transform-origin: top center;
transform-origin: top center;
-webkit-transform: scale(1, 0);
-moz-transform: scale(1, 0);
-ms-transform: scale(1, 0);
transform: scale(1, 0);
opacity: 0;
visibility: hidden;
-webkit-transition: 0.3s ease;
-moz-transition: 0.3s ease;
transition: 0.3s ease;
}
.menu > ul > li.haschild:hover .submenu {
-webkit-transform: scale(1, 1);
-moz-transform: scale(1, 1);
-ms-transform: scale(1, 1);
transform: scale(1, 1);
opacity: 1;
visibility: visible;
z-index: 2;
}
.submenu-title h5 {
margin: 0;
color: var(--white-color);
}
.submenu-children {
max-width: 23rem;
}
.submenu-item > ul > li {
margin-top: 1.6rem;
}
.submenu-item > ul > li > a {
color: var(--sub-menu-text-color) !important;
display: block;
text-decoration: none !important;
}
.submenu-item > ul > li:hover > a,
.submenu-item > ul > li.active > a {
color: var(--sub-menu-text-hover-color) !important;
}
.mobile-menu-outer {
display: none;
}
.mobile-menu .submenu-title:not(:first-child) {
margin-top: 20px !important;
}
.mobile-menu .submenu-title {
margin-bottom: 10px !important;
padding: 0;
}
.submenu-back * {
pointer-events: none;
}
.selectDropdown a {
text-decoration: none !important;
}
.header-img-link {
max-width: 16.7rem;
margin-left: 1.6rem;
}
.header-img-link + .header-btn {
margin-left: 2.4rem;
}
.header-img-link a {
display: block;
}
@media (min-width: 1200px) and (max-width: 1259px) {
.header-top-link li { }
.language-switch {
margin-left: 1.05rem;
}
.menu > ul > li {
margin-left: 1rem;
}
.menu > ul > li > a {
padding: 0.8rem 1.2rem;
}
}
@media (min-width: 992px) and (max-width: 1199px) {
.header-center {
padding: 1.2rem 0;
}
.header-top-link li { }
.language-switch {
margin-left: 1.05rem;
}
.menu > ul > li > a {
font-size: 1.25rem;
padding: 0.8rem 1rem;
}
.menu > ul > li.haschild > a {
padding-left: 1rem;
padding-right: 1rem;
}
.submenu-item > ul > li > a {
font-size: 1.4rem;
line-height: 2.3rem;
}
.submenu {
min-width: 22.2rem;
padding: 1rem;
}
.header-top-link a {
padding: 1rem 1.2rem;
}
}
@media (max-width: 991px) {
body.active {
overflow: hidden;
}
body.active header[data-bg-mobile='bg-primary'] {
background: var(--primary-color);
}
body.active header[data-bg-mobile='bg-secondary'] {
background: var(--secondary-color);
}
.header-top,
.header-center-right,
.header-menu {
display: none;
}
body.active header[data-bg-mobile='bg-primary'] .select .selectBtn,
body.active header[data-bg-mobile='bg-secondary'] .select .selectBtn {
color: var(--white-color);
}
body.active header[data-bg-mobile='bg-primary'] .select .selectBtn:after,
body.active header[data-bg-mobile='bg-secondary'] .select .selectBtn:after {
border-right-color: var(--white-color);
border-bottom-color: var(--white-color);
}
body.active header[data-bg-mobile='bg-primary'] .select .selectDropdown {
background: var(--primary-color);
}
body.active header[data-bg-mobile='bg-secondary'] .select .selectDropdown {
background: var(--secondary-color);
}
body.active
header[data-bg-mobile='bg-primary']
.select
.selectDropdown
.option,
body.active
header[data-bg-mobile='bg-secondary']
.select
.selectDropdown
.option {
color: var(--white-color);
}
header.scroll-down {
transform: translate3d(0, -56px, 0);
}
.header-top-mobile {
display: block;
}
.header-center {
padding: 1.121rem 0;
}
.logo img {
height: 3.3rem;
}
body.active header[data-bg-mobile='bg-secondary'] .logo img {
-webkit-filter: brightness(0) invert(100%);
filter: brightness(0) invert(100%);
}
.header-center-mobile {
display: flex;
}
.header-search-icon span {
color: var(--primary-color);
}
body.active header[data-bg-mobile='bg-primary'] .header-search-icon span,
body.active header[data-bg-mobile='bg-secondary'] .header-search-icon span {
color: var(--white-color);
}
.header-search-icon {
height: 2.4rem;
width: 2.4rem;
}
.select {
max-width: 720px;
}
.mobile-menu-outer {
display: block;
position: fixed;
top: 5.2rem;
overflow: hidden;
overflow-y: auto;
right: -100%;
width: 100%;
padding-bottom: 3.2rem;
background: var(--white-color);
height: calc(100% - 5.2rem);
-webkit-transition: all 0.2s;
-moz-transition: all 0.2s;
transition: all 0.2s;
}
.mobile-menu-outer.open-submenu{
overflow: initial;
}
body.active header {
z-index: 9999;
}
#hs-web-interactives-top-anchor {
z-index: 999;
}
header.scroll-down .mobile-menu-outer {
height: calc(100% - 5.2rem);
}
header.scroll-down .submenu-mobile.open {
top: 5.2rem;
}
body.active header[data-bg-mobile='bg-primary'] .mobile-menu-outer {
background: var(--primary-color);
}
body.active header[data-bg-mobile='bg-secondary'] .mobile-menu-outer {
background: var(--secondary-color);
}
body.active header[data-bg-mobile='bg-primary'] .toggleMenu span,
body.active header[data-bg-mobile='bg-secondary'] .toggleMenu span {
background: var(--white-color);
}
.mobile-menu-outer.active {
right: 0;
z-index: 9999;
}
.mobile-menu-button {
padding-top: 3.2rem;
}
.mobile-menu-button .btn {
width: 100%;
}
body.active
header[data-bg-mobile='bg-primary']
.mobile-menu-button
.btn-blue-outline,
body.active
header[data-bg-mobile='bg-secondary']
.mobile-menu-button
.btn-blue-outline {
background: transparent !important;
border-color: var(--white-color) !important;
color: var(--white-color) !important;
}
body.active header[data-bg-mobile='bg-primary'] .mobile-menu-button .btn-blue,
body.active
header[data-bg-mobile='bg-secondary']
.mobile-menu-button
.btn-blue {
background: var(--white-color) !important;
border-color: var(--white-color) !important;
color: var(--primary-color) !important;
}
.mobile-menu-button .btn + .btn {
margin-top: 1.6rem;
}
.mobile-menu ul {
margin: 0;
}
.mobile-menu li {
padding: 0;
margin: 0;
}
.mobile-menu li:after {
content: none;
}
.mobile-menu li a{
display: flex;
align-items: center;
padding: 0.95rem 0;
color: var(--primary-color) !important;
position: relative;
font-size: 1.4rem;
line-height: 2.1rem;
text-decoration: none;
}
.mobile-menu ul li p{
padding: 0.95rem 0;
}
body.active header[data-bg-mobile='bg-primary'] .mobile-menu li a,
body.active header[data-bg-mobile='bg-secondary'] .mobile-menu li a {
color: var(--white-color) !important;
}
.mobile-menu li a span {
margin-right: 0.8rem;
}
.mobile-menu li.haschild > a:after,
.mobile-menu li.hassubchild > a:after{
position: absolute;
content: '\e5cc';
font-family: 'Material Symbols Outlined';
font-size: 24px;
line-height: 1;
right: 0;
}
.language-menu li.haschild > a { }
.language-menu li.haschild > a:after { }
.mobile-menu-title {
font-size: 1.8rem !important;
margin-bottom: 1.6rem !important;
line-height: 2.3rem !important;
color: var(--primary-color);
}
body.active header[data-bg-mobile='bg-primary'] .mobile-menu-title,
body.active header[data-bg-mobile='bg-secondary'] .mobile-menu-title {
color: var(--white-color) !important;
}
.border-top {
position: relative;
}
.border-top:before {
position: absolute;
content: '';
top: 0;
left: -100%;
width: 300%;
height: 1px;
background: #eef4fe;
}
.logout-menu li a {
padding: 0 !important;
}
.submenu-mobile,.subsubmenu-mobile{
position: fixed;
top: 0;
right: -100%;
width: 100%;
height: 100vh;
overflow: hidden;
background: var(--white-color);
overflow-y: auto;
z-index: 2;
-webkit-transition: all 0.2s;
-moz-transition: all 0.2s;
transition: all 0.2s;
}
.submenu-mobile.open-subsubmenu{
overflow: initial;
}
body.active header[data-bg-mobile='bg-primary'] .submenu-mobile,
body.active header[data-bg-mobile='bg-primary'] .subsubmenu-mobile{
background: var(--primary-color);
}
body.active header[data-bg-mobile='bg-secondary'] .submenu-mobile,
body.active header[data-bg-mobile='bg-secondary'] .subsubmenu-mobile {
background: var(--secondary-color);
}
.submenu-mobile.open,
.subsubmenu-mobile.open {
right: 0;
}
.submenu-back,
.subsubmenu-back {
cursor: pointer;
padding: 1.2rem 0;
color: var(--primary-color);
}
body.active header[data-bg-mobile='bg-primary'] .submenu-back,
body.active header[data-bg-mobile='bg-secondary'] .submenu-back,
body.active header[data-bg-mobile='bg-primary'] .subsubmenu-back,
body.active header[data-bg-mobile='bg-secondary'] .subsubmenu-back {
color: var(--white-color);
}
.closeMenu {
position: relative;
color: var(--primary-color);
height: 2.4rem;
cursor: pointer;
}
body.active header[data-bg-mobile='bg-primary'] .closeMenu,
body.active header[data-bg-mobile='bg-secondary'] .closeMenu {
color: var(--white-color);
}
.submenu-title,
.subsubmenu-title {
font-size: 1.8rem !important;
line-height: 2.3rem !important;
color: var(--primary-color);
font-weight: 600;
}
body.active header[data-bg-mobile='bg-primary'] .submenu-title,
body.active header[data-bg-mobile='bg-secondary'] .submenu-title,
body.active header[data-bg-mobile='bg-primary'] .subsubmenu-title,
body.active header[data-bg-mobile='bg-secondary'] .subsubmenu-title {
color: var(--white-color);
}
.header-btn {
margin-top: 16px;
}
.header-btn:first-child {
margin-top: 32px;
}
.header-btn .btn {
margin-left: 0;
width: 100%;
}
.submenu-head + .mt-32 > a,
.subsubmenu-head + .mt-32 > a{
padding: 0 !important;
}
.submenu-head + .mt-32 > a > .submenu-title,
.submenu-head + .mt-32 > .submenu-title,
.subsubmenu-head + .mt-32 > a > .submenu-title,
.subsubmenu-head + .mt-32 > .submenu-title{
margin: 0 !important;
padding: 0 !important;
}
.mobile-menu li a > .submenu-title{
margin-bottom: 0px !important;
}
}
@media (max-width: 767px) {
.select {
max-width: 540px;
}
}
.sub-menu-text-color .submenu-title,
.sub-menu-text-color a{
color: var(--sub-menu-text-color) !important;
}
.header-center-mobile a:has(>.search) {
position: relative;
height: 2.2rem;
margin-right: 2rem;
}
.header-center-right>a:has(>.search) {
position: relative;
height: 2.2rem;
margin-right: 0;
}