@import "brand";
@import "nav";
@import "dropdown";
@import "button";
@import "container";

.header {
  top: 0;
  z-index: 9999;
  position: fixed;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  width: 100%;
  border-bottom: 1px solid #eff1f4;
  height: 50px;
}

.header__container {
  width: 100%;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
}

.header--active {
  background: white;
  border-bottom: 1px solid #eff1f4;
  -webkit-transition: 0.5s;
  -o-transition: 0.5s;
  transition: 0.5s;
}

.header--visible .header__container .header__brand a {
  color: white;
}

.header--visible .header__container .header__nav a {
  color: white;
}

.header__container--around {
  -ms-flex-pack: distribute;
  justify-content: space-around;
}

.header__container--between {
  -webkit-box-pack: justify;
  -ms-flex-pack: justify;
  justify-content: space-between;
}

.header__container--start {
  -webkit-box-pack: start;
  -ms-flex-pack: start;
  justify-content: flex-start;
}

.header-container--end {
  -webkit-box-pack: end;
  -ms-flex-pack: end;
  justify-content: flex-end;
}

.header__container--default {
  width: 1140px;
  margin-left: auto;
  margin-right: auto;
  -webkit-box-pack: justify;
  -ms-flex-pack: justify;
  justify-content: space-between;
}

.header__responsive-nav {
  display: none;
  position: fixed;
  left: 0;
  top: 50px;
  width: 100%;
  background: white;
  height: 100%;
}

.show {
  display: block;
}

@media (max-width: 768px) {
  .header {
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
    background: white;
    border-bottom: 1px solid #eff1f4;
  }

  .header__container .header__brand a {
    color: #000 !important;
  }
}