header-padding-normal = 10px
header-padding-max = 30px
logo-size = 50px

#header
  position: relative
  padding: header-padding-normal 0
  @media print
    display: none

#header-inner
  display: flex
  flex-flow: row nowrap
  align-items: center
  width: 1190px
  margin-left: -120px
  @media mq-mobile
    justify-content: center

.button--header
  margin-top: 7px

#logo-wrap-page
  flex: 0
  -webkit-flex: none
  margin-top: 8px
  width: 200px

#logo
  hide-text()
  display: block
  width: 56px;
  height: 56px;
  background-image: url(../img/logo_ogn.png);
  text-decoration: none;
  margin: -20px 0 0 30px;
  background-color: rgba(255,255,255,1);
  border-radius: 50%;
  background-size: 22px;
  background-position: center;
  background-repeat: no-repeat;

.dropdown
    display: flex
    align-items: center
    margin-left: 32px
    nav
        ul
            li
                float: left
                margin: 8px
                position: relative
                a
                    color: #FFFFFF
                    text-decoration: none
                    font-weight: bold
                    &:hover
                        opacity: .7
                    &:focus
                        color: rgba(255, 255,255,1)
                    a
                        color: rgba(255,255,255,0.7)
                &:hover
                    & > ul
                        display: block
                        z-index: 1
                ul
                    background: #ffffff
                    border-radius: 5px
                    left: 0
                    padding: 10px 5px 5px 5px
                    position: absolute
                    top: 100%
                    li
                        float: none
                        width: 8.125em
                        a
                            &:hover
                                color #000

.dropdown:before,
.dropdown:after
    clear: both
    content: ""
    display: table

.dropdown nav ul li ul li a:link,
.dropdown nav ul li ul li a:visited
    color: #8d99a4

#search-input-wrap
  display: none
  height: 40px
  width: 180px
  background-color: #ff9c00
  border-radius: 22px
  padding: 0 12px
  align-items: center
  transition: 0.2s
  &.on
    display: flex
    @media mq-mobile
      width: 40px
      cursor: pointer
      &.standalone
        position: absolute
        right: 20px
  &.active
    width: 180px
    background-color: color-background-light

#search-input-icon
  color: rgba(255, 255, 255, 1)
  height: 24px
  width: 24px
  margin: 0 2px 0 0
  display: inline-block
  opacity: 1
  @media mq-mobile
    height: auto;

#search-input-wrap.active #search-input-icon
  color: color-navy

#search-input-wrap.active #search-input
  color: color-navy

#search-input
  background: none
  width: 126px
  height: 24px
  font-size: 15px
  color: color-main-link
  outline: none
  -webkit-appearance: none
  @media mq-mobile
    display: none

#search-input-wrap.active #search-input
  display: inline;
    
#search-input::-webkit-input-placeholder {
  color:rgba(255, 255, 255, .4)
}

#search-input::-moz-placeholder {
  color:rgba(255, 255, 255, .4)
}

#search-input:-ms-input-placeholder {
  color:rgba(255, 255, 255, .4)
}

#search-input:-moz-placeholder {
  color:rgba(255, 255, 255, .4)
}

#search-input-wrap .algolia-autocomplete .ds-dropdown-menu
  @media (max-width: 560px)
    min-width: 400px
  @media (max-width: 470px)
    min-width: 300px

#lang-select-wrap
  display: none
  position: relative
  @media mq-normal
    display: block

#lang-select-label
  color: color-main-link
  opacity: 0.7
  font-family: font-title
  line-height: logo-size
  span
    padding-left: 8px
  i
    opacity: 0.7

#lang-select
  opacity: 0
  position: absolute
  top: 0
  left: 0
  width: 100%
  height: 100%
  -webkit-appearance: menulist-button
  font-size: inherit