.layout-center,
.layout-center--form,
.top__menu-wrapper {
  margin-right: auto;
  margin-left: auto;
  padding: 0 10px;
  max-width: 1190px;
}

@media (min-width: 40em) {
  .layout-center--form {
    padding: 0 68px;
  }
}

.top__region {
  background-color: #173353;
  position: relative;
  z-index: 2;
}

@media (min-width: 50em) {
  .top__region {
    z-index: 102;
  }
}

.hero .top__region {
  background-color: rgba(23, 51, 83, 0.85);
}

@media (min-width: 50em) {
  .top__region.fixed {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    background-color: #173353;
    transition: ease-in-out;
  }
}

.top__menu {
  position: absolute;
  top: 62px;
  margin: 0;
  width: 100%;
  padding-left: 0;
  z-index: 10;
  display: none;
  clear: both;
  list-style: none;
  text-align: center;
  border-bottom: 1px solid rgba(255, 255, 255, 0.2);
  background-color: #27415f;
}

@media (min-width: 50em) {
  .top__menu {
    position: relative;
    top: auto;
    width: auto;
    height: auto;
    display: block;
    border-bottom: 0;
    background-color: transparent;
  }
}

.top__menu-wrapper {
  padding: 0;
  height: 67px;
  display: -webkit-box;
  display: flex;
  flex-wrap: wrap;
  -webkit-box-pack: justify;
          justify-content: space-between;
  border-bottom: 1px solid rgba(255, 255, 255, 0.2);
}

@media (min-width: 50em) {
  .top__menu-wrapper {
    height: auto;
    border-bottom: 0;
    clear: both;
  }
}

.top__menu-buttons {
  position: absolute;
  top: 69px;
  width: 100%;
  height: 62px;
  z-index: 100;
  border-bottom: 1px solid rgba(255, 255, 255, 0.2);
  background-color: #173353;
}

@media (min-width: 50em) {
  .top__menu-buttons {
    display: none;
  }
}

.top__menu-nav {
  position: relative;
  z-index: 100;
  padding: .5rem 0;
}

@media (min-width: 50em) {
  .top__menu-item {
    float: left;
    padding-bottom: 0;
    padding-left: 1.3rem;
    padding-right: 1rem;
  }
}

.top__menu-item:nth-child(1) {
  padding-top: 1rem;
}

@media (min-width: 50em) {
  .top__menu-item:nth-child(1) {
    padding-top: 0;
  }
}

.top__menu-link {
  padding-bottom: .73rem;
  display: block;
  font-size: 14px;
  text-decoration: none;
  color: #fff;
  opacity: .7;
  letter-spacing: 0.235px;
}

@media (min-width: 50em) {
  .top__menu-link {
    padding-bottom: 0;
  }
}

.top__menu-link:hover {
  color: #fff;
  font-weight: 600;
  letter-spacing: 0;
}

.top__menu-button {
  float: left;
  width: 40%;
  z-index: 100;
  border-left: 1px solid rgba(255, 255, 255, 0.2);
  border-right: 1px solid rgba(255, 255, 255, 0.2);
}

@media (min-width: 50em) {
  .top__menu-button {
    display: none;
  }
}

.top__menu-button--link {
  position: relative;
  height: 60px;
  width: 100%;
  padding: 1.2rem;
  padding-left: 2.5rem;
  display: inline-block;
  z-index: 10;
  font-size: .8rem;
  text-decoration: none;
  text-transform: uppercase;
  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 12 17"><path d="M11 0H2.1c-.6 0-.8.3-.3.8.6.6 1.3 1.3 2.4 2.2 0 0-4.9 3.1-4.1 8.1.9 5 6.7 5.7 6.9 5 .2-.7-3.4-1.4-2.5-3.7.9-2.2 1.7-3.1 3.9-5.2 1.1 1.1 2 2.1 2.7 2.9.5.5.8.5.8-.2v-9c.1-.6-.2-.9-.9-.9z" fill="%23fff"/></svg>');
  background-position: 1rem;
  background-repeat: no-repeat;
  background-size: .8rem;
  color: #fff;
  cursor: pointer;
}

@media (min-width: 50em) {
  .top__menu-button--link {
    display: none;
  }
}

.top__menu-button--link:hover, .top__menu-button--link:focus, .top__menu-button--link--opened {
  background-color: #1764e2;
  color: #fff;
}

.top__button,
.top__button--member {
  width: 40%;
  height: 60px;
  padding: 1.2rem 1.2rem 1.2rem 3.5rem;
  z-index: 101;
  font-size: .8rem;
  text-transform: uppercase;
  text-decoration: none;
  color: #fff;
}

@media (min-width: 50em) {
  .top__button,
  .top__button--member {
    position: relative;
    top: 0;
    height: auto;
    width: auto;
    padding: .5rem 1rem .5rem 0;
    font-size: .7rem;
  }
}

.top__button::before,
.top__button--member::before {
  content: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="19" height="19"><path fill="%23fff" d="M9.78 9.5a4.75 4.75 0 1 1 0-9.5 4.75 4.75 0 0 1 0 9.5zM19 15.61V19H0v-3.39c0-.948.534-1.81 1.381-2.201 1.541-.711 4.328-1.674 8.119-1.674 3.79 0 6.578.963 8.119 1.674.847.39 1.381 1.253 1.381 2.2z"/></svg>');
  position: absolute;
  top: 1.3rem;
  left: 1.7rem;
  display: block;
  width: .5rem;
  height: .5rem;
}

@media (min-width: 50em) {
  .top__button::before,
  .top__button--member::before {
    top: .8rem;
    left: -1.5rem;
  }
}

.top__button:hover, .top__button:focus, .top__button--opened,
.top__button--member:hover,
.top__button--member:focus {
  background-color: #1764e2;
  color: #fff;
}

@media (min-width: 50em) {
  .top__button:hover, .top__button:focus, .top__button--opened,
  .top__button--member:hover,
  .top__button--member:focus {
    background-color: transparent;
  }
}

.touchevents .top__button--member {
  pointer-events: none;
}

@media (min-width: 50em) {
  .top__button--member::before {
    top: .5rem;
  }
}

.top__member-menu {
  position: relative;
  padding: .5rem 0 .5rem 2rem;
}

.top__member-menu:hover, .top__member-menu:focus {
  background-color: #1764e2;
}

.top__member-menu:hover .top__member-menu-list, .top__member-menu:focus .top__member-menu-list {
  opacity: 1;
  -webkit-transform: rotateX(0);
          transform: rotateX(0);
}

.top__member-menu-list {
  position: absolute;
  top: .85rem;
  right: 0;
  width: -webkit-max-content;
  width: -moz-max-content;
  width: max-content;
  list-style: none;
  -webkit-transform: rotateX(-90deg);
          transform: rotateX(-90deg);
  -webkit-transform-origin: top center;
          transform-origin: top center;
  opacity: .3;
  transition: 280ms all 190ms ease-out;
}

.top__member-menu-item {
  border-top: 1px solid #6f7586;
  border-bottom: 1px solid #6f7586;
}

.top__member-menu-link {
  padding: .5rem 2rem .5rem 1rem;
  display: block;
  font-size: 0.9em;
  text-decoration: none;
  background-color: #173353;
  color: #fff;
}
