.header .top-content { background-color: var(--blue); padding: 15px 0 0;}
.header .site-logo span {color: var(--black);}
.header .top-bar,
.header .top-bar ul {background-color: transparent;}
.header .top-bar {padding-top: 14px;}
.header .menu {align-items: baseline;}
.header .dropdown.menu li a {font-size: 14px; text-align: center; text-transform: uppercase; min-width: 130px; font-weight: 600; padding: 12px 25px; transition: background-color .3s, color .3s;}
.header .menu a {font-family: 'Roboto', serif; color: var(--blue);}
.header .menu a:hover {color: var(--white); background-color: var(--blue);}
.header .menu .current-menu-item {background-color: var(--white);}
.header .bottom-content {background-color: var(--white-gray);}
.header .bottom-content nav {padding: 0;}
.header .bottom-content .menu li a { border: 1px solid var(--gray);}
.header .bottom-content .menu li:not(:last-child) a { border-right: 0;}

.header, .header-navigation, .navigation {position: relative; z-index: 20; }
.header .title-bar {background: transparent;}

.header .site-logo.mobile-view {width: 0; height: 0; visibility: hidden; overflow: hidden;}

.header .mobile-search {width: 0; height: 0; visibility: hidden; overflow: hidden;}
.header .mobile-view {width: 0; height: 0; visibility: hidden; overflow: hidden;}


/* weather */
.header .sin-informer__header,
.header .sin-informer__footer,
.header .sin-informer__secondary {display: none; visibility: hidden;}
.header .sin-informer__main_inline {background: transparent}
.header .sin-informer {border: none;}
.header .sin-informer__primary,
.header .sin-informer__entry {display: flex; flex-direction: row-reverse; align-items: center;}
.header .sin-informer__location {margin: 0;}
.header .sin-informer__primary .sin-informer__temp {color: var(--white)!important;}
.header .sin-informer__condition {width: 20px; height: 20px;}
.header .sin-informer__temp {font-size: 16px; min-width: 50px;}

.header .header-informers {display: flex; flex-wrap: wrap; align-items: center; gap: 8px; justify-content: space-between; color: var(--white); font-size: 16px; padding-right: min(40px, 3vw);}
.header .date-informer,
.header .currency-informer {line-height: 1; margin-bottom: 10px; display: flex; align-items: center; gap: 8px;}

/* search */
.header .custom-style.search-form {background-color: transparent;}
.header .custom-style.search-form input {color: var(--white);}
.header .custom-style.search-form input:focus {background-color: var(--white);color: var(--black);}
.header .custom-style.search-form path {fill: var(--white); }
.header .search-box {padding-left: 10px; position: relative;}
.header .search-box:after {content: ''; position: absolute; top: 50%; left: 3%; transform: translate(-50%, -50%); width: 1px; height: 100%; background-color: var(--white);}


@media (min-width: 1000px) {
    .header .site-logo {white-space: nowrap; margin-left: -17px;}
    .header .site-logo img { max-width: 220px; height: auto;}
}

@media (max-width: 1200px) {
    .header .header-informers {justify-content: center;}
}

/* Foundation breakpoint */
@media (max-width: 639px) {

	.header .header-informers  {font-size: 14px; padding-right: 0;}
	.header .sin-informer__entry {padding: 0;}
	.header .sin-informer__temp {font-size: 14px;}
	.header .date-informer, .header .currency-informer {margin-bottom: 0;}
    .header .site-logo {text-align: start;}
    .header .top-content {position: relative;}
    .header .header-navigation {display: flex; justify-content: flex-end;}
    .header .header-navigation .navigation{position: absolute; z-index: 100; top: 236%; left: 0; width: 100vw; transform: translateX(-50%);  background-color: var(--white); display: none!important;}
    .header .header-navigation .navigation.is-open {display: block!important;}
    .header .menu .current-menu-item {background-color: var(--blue); }
    .header .menu .current-menu-item a {color: var(--white);}

    .header .mobile-view {width: 50%; height: auto; visibility: visible; overflow: visible;}
    .header .desktop-view {width: 0; height: 0; visibility: hidden; overflow: hidden;}

/*  Burger  */
    .menu-icon:hover::after { background-color: var(--white);  box-shadow: unset; }
    .header .header-navigation .menu-icon {background-color: transparent!important;}
    .header .header-navigation .menu-icon span{ transition: background-color .2s; margin-top: 2px}
    .menu-icon::before,
    .menu-icon::after {content: '';  position: absolute; left: 0; transition: transform 0.3s ease; box-shadow: unset;}
    .header .header-navigation .menu-icon span,
    .menu-icon::before,
    .menu-icon::after {width: 24px; height: 2px; display: block; background-color: var(--white); }
    .menu-icon::before { top: 16px;}
    .menu-icon::after { bottom: 9px;}
    .menu-icon.active::before {transform: translateY(-10px) rotate(45deg);}
    .header .header-navigation  .menu-icon.active span {background-color: transparent;}
    .menu-icon.active::after {transform: translateY(6px) rotate(-45deg);}

/*  Search  */
    .header .mobile-search.search-form {background-color: transparent; width: fit-content; height: auto; visibility: visible; margin: 0;}
    .header .mobile-search .search-form-inner {display: none; padding: 0; position: absolute; top: 170%; left: 0; transform: translateX(-50%); height: auto; width: 90vw; background: var(--blue); border: 2px solid var(--white);}
    .header .mobile-search .logo-search {padding: 0;}
    .header .mobile-search .logo-search svg{width: 25px; height: 25px;}

    .header .top-bar {justify-content: center; padding: 70px 0;}
    .header .dropdown.menu li a {font-size: 16px; padding: 14px 46px;}
    .header .menu {align-items: unset; text-align: center;}

    .header .site-logo.mobile-view {width: 100%; max-width: 200px; height: auto; visibility: visible;}
    .header .site-logo.desktop-view {width: 0; height: 0; visibility: hidden; overflow: hidden;}
}

@media (max-width: 400px) {
	.header .header-informers,
	.header .sin-informer__temp {font-size: 16px;}
	.header .header-informers  .weather-informer {width: 100%; display: flex; justify-content: center;}
    .header .header-navigation .navigation {top: 200%;}
}