@import url("https://fonts.googleapis.com/css2?family=Oswald:wght@300;400;500;600;700&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Questrial&display=swap");
.header-navbar {
background-color: #fff;
position: relative;
width: 100vw;
height: 88px;
padding-top: 22px;
}
@media (max-width: 1199.98px) {
.header-navbar {
max-width: none !important;
position: fixed;
height: 76px;
padding-top: 10px;
top: 0;
z-index: 99999999;
}
}
.header-navbar-logo img {
position: absolute;
width: auto;
height: 54px;
top: 50%;
margin-top: -27px;
}
.header-navbar-main-menu {
width: fit-content;
position: relative;
float: right;
}
.header-navbar-main-menu-container input {
background: transparent;
border: 0;
width: 100%;
height: 100%;
position: absolute;
opacity: 0;
z-index: 1;
}
.header-navbar-main-menu-container ul {
position: relative;
padding-left: 0;
list-style: none;
}
.header-navbar-main-menu-container ul li {
position: relative;
padding: 8px 40px;
}
@media (max-width: 1199.98px) {
.header-navbar-main-menu-container ul li {
border-bottom: rgba(255, 255, 255, 0.2) solid 1px;
}
}
.header-navbar-main-menu-container ul li a {
transition: all 0.25s ease-out;
width: fit-content;
height: auto;
font-family: 'Oswald', sans-serif;
text-transform: uppercase;
color: #152048;
font-size: 18px;
line-height: 26px;
letter-spacing: 0.9px;
font-weight: 600;
z-index: 0;
}
@media (max-width: 1199.98px) {
.header-navbar-main-menu-container ul li a {
font-family: 'Questrial', sans-serif;
text-transform: capitalize;
font-weight: 400;
font-size: 19px;
line-height: 60px;
padding-left: 8px;
}
}
.header-navbar-main-menu-container ul li a:hover {
color: #cd2027;
text-decoration: none;
}
.header-navbar-main-menu-container ul li input {
display: none;
}
.header-navbar-main-menu-container ul li.current_page_item a {
position: relative;
color: #cd2027;
}
@media (max-width: 1199.98px) {
.header-navbar-main-menu-container ul li.current_page_item a {
color: rgba(255, 255, 255, 0.5) !important;
}
}
.header-navbar-main-menu-container ul li.current_page_item a::after {
content: '';
position: absolute;
border-bottom: #cd2027 solid 2px;
width: 100%;
height: 0;
left: 0;
bottom: -2px;
}
@media (max-width: 1199.98px) {
.header-navbar-main-menu-container ul li.current_page_item a::after {
display: none;
}
}
.header-navbar-main-menu-container ul li.menu-item-has-children::after {
content: '';
position: absolute;
right: 20px;
top: 15px;
transition: all 0.25s ease-out;
transform: rotate(45deg);
-webkit-transform: rotate(45deg);
border: solid #152048;
border-radius: 1px;
border-width: 0 3px 3px 0;
display: inline-block;
padding: 3px;
}
.header-navbar-main-menu-container ul li.menu-item-has-children:hover::after {
-webkit-transform: rotate(-134deg);
transform: rotate(-134deg);
top: 18px;
}
@media (max-width: 1199.98px) {
.header-navbar-main-menu-container ul li.menu-item-has-children {
display: block;
}
}
.header-navbar-main-menu-container ul li.menu-item-has-children input {
display: block;
cursor: pointer;
}
.header-navbar-main-menu-container > ul > li:last-child {
background-color: #001e57;
margin-left: 25px;
}
@media (max-width: 1199.98px) {
.header-navbar-main-menu-container > ul > li:last-child {
margin-left: 0;
}
}
.header-navbar-main-menu-container > ul > li:last-child:hover {
transition: all 0.25s ease-out;
opacity: 0.7;
}
.header-navbar-main-menu-container > ul > li:last-child a {
font-size: 14px;
color: #fff;
}
@media (max-width: 1199.98px) {
.header-navbar-main-menu-container > ul > li:last-child a {
font-size: 19px;
}
}
.header-navbar-main-menu-container > ul {
display: inline-flex;
flex-wrap: wrap;
}
@media (max-width: 1199.98px) {
.header-navbar-main-menu-container > ul {
display: none;
flex-wrap: nowrap;
}
}
.header-navbar-main-menu-container > ul li {
display: flex;
position: relative;
}
.header-navbar-main-menu-container > ul li ul.sub-menu {
transition: all 0.25s ease-out;
position: absolute;
background-color: #fff;
padding-left: 0;
margin-top: 45px;
padding: 15px 0 15px 15px;
width: 220%;
height: inherit;
display: none;
left: 0;
top: 0;
z-index: 3;
}
.header-navbar-main-menu-container > ul li ul.sub-menu li > input {
display: none;
}
.header-navbar-main-menu-container > ul li:hover ul.sub-menu {
display: block;
}
.header-navbar-main-menu-container > ul li ul.sub-menu li a {
line-height: 24px !important;
}
.header-navbar-main-menu-container #hm-menu {
background: transparent url(//kontrolautomationtechnical.com/wp-content/themes/kat/assets/img/btn-menu.svg) center / 100% auto no-repeat;
position: absolute;
width: 25px;
height: 20px;
top: 50%;
right: 15px;
margin-top: 15px;
cursor: pointer;
display: none;
}
@media (max-width: 1199.98px) {
.header-navbar-main-menu-container #hm-menu {
display: block;
}
}
.header-navbar-main-menu-container #hm-input[type=checkbox] {
cursor: pointer;
width: 51px;
height: 50px;
right: 7px;
}
.header-navbar-main-menu-container #hm-input[type=checkbox]:checked {
right: calc(240px + 15px);
}
@media (max-width: 767.98px) {
.header-navbar-main-menu-container #hm-input[type=checkbox]:checked {
right: calc(70vw + 7px);
}
}
.header-navbar-main-menu-container #hm-input[type=checkbox]:checked ~ #hm-menu {
background-image: url(//kontrolautomationtechnical.com/wp-content/themes/kat/assets/img/btn-cross.svg);
background-size: 18px;
right: calc(240px + 15px);
}
@media (max-width: 767.98px) {
.header-navbar-main-menu-container #hm-input[type=checkbox]:checked ~ #hm-menu {
right: calc(70vw + 15px);
}
.header-navbar-main-menu-container #hm-input[type=checkbox]:checked ~ #hm-menu::before {
content: '';
position: absolute;
background: #fff url(//kontrolautomationtechnical.com/wp-content/themes/kat/assets/img/btn-cross.svg) center / 18px no-repeat;
width: 100vw;
height: 83.9px;
z-index: 0;
left: -45vw;
top: -32px;
}
}
@media (max-width: 1199.98px) {
.header-navbar-main-menu-container #hm-input[type=checkbox]:checked ~ #header-menu-nav {
background-color: #001e57;
width: 240px;
height: 100vh;
position: fixed;
display: block;
right: 0;
top: 0;
z-index: 10;
overflow-y: auto;
}
}
@media (max-width: 767.98px) {
.header-navbar-main-menu-container #hm-input[type=checkbox]:checked ~ #header-menu-nav {
width: 70vw;
}
}
@media (max-width: 1199.98px) {
.header-navbar-main-menu-container #hm-input[type=checkbox]:checked ~ #header-menu-nav li {
padding: 8px 0 8px 18px;
}
.header-navbar-main-menu-container #hm-input[type=checkbox]:checked ~ #header-menu-nav li a {
color: #fff;
}
.header-navbar-main-menu-container #hm-input[type=checkbox]:checked ~ #header-menu-nav li ul.sub-menu {
left: 0;
position: relative;
background: transparent;
width: 100%;
display: none;
}
.header-navbar-main-menu-container #hm-input[type=checkbox]:checked ~ #header-menu-nav li.menu-item-has-children {
padding: 8px 0;
}
.header-navbar-main-menu-container #hm-input[type=checkbox]:checked ~ #header-menu-nav li.menu-item-has-children::after {
display: none;
}
.header-navbar-main-menu-container #hm-input[type=checkbox]:checked ~ #header-menu-nav li.menu-item-has-children > a {
width: 100%;
padding-left: 26px;
}
.header-navbar-main-menu-container #hm-input[type=checkbox]:checked ~ #header-menu-nav li.menu-item-has-children > a::after {
content: '';
position: absolute;
display: block;
transition: all 0.25s ease-out;
background: transparent url(//kontrolautomationtechnical.com/wp-content/themes/kat/assets/img/arr-mob.svg) center / cover no-repeat;
width: 5px;
height: 10px;
top: 33px;
right: 25px;
}
.header-navbar-main-menu-container #hm-input[type=checkbox]:checked ~ #header-menu-nav li input.item-sub[type=checkbox]:checked ~ a {
color: rgba(255, 255, 255, 0.5) !important;
}
.header-navbar-main-menu-container #hm-input[type=checkbox]:checked ~ #header-menu-nav li input.item-sub[type=checkbox]:checked ~ a::after {
transform: rotate(90deg);
-webkit-transform: rotate(90deg);
}
.header-navbar-main-menu-container #hm-input[type=checkbox]:checked ~ #header-menu-nav li input.item-sub[type=checkbox]:checked ~ ul.sub-menu {
display: block;
margin-top: 0;
padding: 0;
}
.header-navbar-main-menu-container #hm-input[type=checkbox]:checked ~ #header-menu-nav li input.item-sub[type=checkbox]:checked ~ ul.sub-menu li {
padding: 15px 0;
border-bottom: 0;
}
.header-navbar-main-menu-container #hm-input[type=checkbox]:checked ~ #header-menu-nav li input.item-sub[type=checkbox]:checked ~ ul.sub-menu li:last-child {
margin-bottom: 15px;
}
.header-navbar-main-menu-container #hm-input[type=checkbox]:checked ~ #header-menu-nav li input.item-sub[type=checkbox]:checked ~ ul.sub-menu li a {
font-size: 17px;
padding-left: 38px;
padding-right: 0;
}
}
@media (max-width: 767.98px) {
.header-navbar-main-menu-container #hm-input[type=checkbox]:checked ~ #header-menu-nav {
width: 70vw;
}
}
@media (max-width: 1199.98px) {
header + main {
margin-top: 88px;
}
}
@media (max-width: 1199.98px) and (max-width: 1199.98px) {
header + main {
margin-top: 76px;
}
}