﻿
.app-custom-header { background-color:transparent; border:0;}

.app-custom-header div::after, .app-custom-header div::before, .app-custom-header ul::after, .app-custom-header ul::before, .app-custom-header::after, .app-custom-header::before {
   content: none;
}

.app-custom-header .app-nav-container {display:flex;  align-items:center; float:none; gap:30px; justify-content:space-between;}

.app-custom-header .navbar-header {display:flex;  align-items:center; float:none; gap:30px;}
.app-custom-header .navbar-header .navbar-nav {display:flex; align-items:center;}
.app-custom-header .navbar-header .navbar-nav.left-menu { flex-wrap:wrap;}

.app-custom-header .navbar-brand { float:none; height:auto; }
.app-custom-header .navbar-brand img {     width: auto; max-width: 100%;max-height: 142px;display:block;}

.app-custom-header .fa { font-size:22px;}

.app-custom-header a { color:var(--app-text-color); }
.app-custom-header a:hover { color:var(--app-text-color); }

.app-custom-header.navbar-default .navbar-nav>li>a { color:inherit;}

.app-custom-header.navbar-default .navbar-nav>.active>a, .app-custom-header.navbar-default .navbar-nav>.active>a:focus, .app-custom-header.navbar-default .navbar-nav>.active>a:hover { color:inherit; text-decoration:underline; background-color:transparent;}

.app-custom-header .navbar-toggle { display:none;}
.app-custom-header.navbar-default .navbar-toggle { border:none;}
.app-custom-header.navbar-default .navbar-toggle .icon-bar { background-color:var(--app-text-color);}
.app-custom-header.navbar-default .navbar-toggle:focus, .app-custom-header.navbar-default .navbar-toggle:hover {
    background-color: transparent;
}

a#menu-icon {display:none;}

.top-head-info-container { text-align:center; padding:10px 16px; position:relative;}
.top-head-info-container a,.top-head-info-container .fa{ color:#fff; text-decoration:none; }
.top-head-info-container .info-close-button {  position:absolute; right:16px; cursor:pointer; }
.top-head-info-container .fa{ color:#fff;  }


@media (min-width:768px) {
.nav-mobile-menu {display:none !important;}
}
@media (max-width:767px) {
    .app-custom-header .navbar-nav, .app-custom-header .navbar-header .navbar-nav { display:none; }
   .app-custom-header .navbar-toggle { display:block;}
   .app-custom-header .navbar-brand { padding: 10px 15px; }
   .app-custom-header .navbar-brand img { max-height: 80px;}
  
   .nav-mobile-menu { width:100%; height: calc(100% - (100px));}

   .nav-mobile-menu ul { list-style-type:none; margin:0; padding:0; }
   .nav-mobile-menu ul li {    position: relative;
    width: 100%;
    box-sizing: border-box;
    padding-left: 2vw;
    padding-right: 2vw;}

   .nav-mobile-menu ul li a {
        position: relative;
        display: block;
        margin: 5vw 5vw;
        transition: opacity 250ms cubic-bezier(.4,0,.2,1);     font-size: 6.6vmin; color:var(--app-text-color);
    }

   .nav-mobile-menu ul.mobile-menus-2nd {         margin: 5vw 5vw;margin-top:15vw; display:flex; gap:30px;}
   .nav-mobile-menu ul.mobile-menus-2nd li {  width:auto;  position: relative;}
   .nav-mobile-menu ul.mobile-menus-2nd a { margin:0; font-size: 6.2vmin; display:inline-block;}

   a#menu-icon {
  display: inline-block;
}
}

@media (max-width:576px) {
}

a#menu-icon {
  padding: 10px;
  margin-right:10px;
}
a#menu-icon .bar {
  margin: 3px;
  width: 25px;
  height: 3px;
  background: var(--app-text-color);
  border-radius: 1.5px; 
transition: margin 0.2s, transform 0.2s;

/* same as above but with prefixes added */
-webkit-transition: margin 0.2s, -webkit-transform 0.2s;
transition: margin 0.2s, -webkit-transform 0.2s;
-o-transition: margin 0.2s, transform 0.2s;
transition: margin 0.2s, transform 0.2s;
transition: margin 0.2s, transform 0.2s, -webkit-transform 0.2s;
}

a#menu-icon .bar:nth-child(2) {
  opacity: 0;
}
a#menu-icon.close { opacity:1;}
a#menu-icon.close .bar:nth-child(2) {
  opacity: 0;
}

a#menu-icon:not(.close):hover {
  padding: 6px 10px;
}
a#menu-icon:not(.close):hover .bar {
  margin: 5px 3px;
}


a#menu-icon.close .bar:first-child {
  -webkit-transform: translateY(6px) rotate(45deg);
      -ms-transform: translateY(6px) rotate(45deg);
          transform: translateY(6px) rotate(45deg);
}
a#menu-icon.close .bar:nth-child(2) {
  opacity: 0;
}
a#menu-icon.close .bar:last-child {
  -webkit-transform: translateY(-6px) rotate(-45deg);
      -ms-transform: translateY(-6px) rotate(-45deg);
          transform: translateY(-6px) rotate(-45deg);
}