@import url('https://fonts.googleapis.com/css?family=Open+Sans:400,600|Oswald:700&subset=cyrillic');
.header ul,
.side-panel ul {
  list-style: none;
}
.header input,
.side-panel input {
  vertical-align: middle;
}
.header header,
.side-panel header {
  display: block;
}
.header img,
.side-panel img {
  max-width: 100%;
}
.header .clearfix:after,
.side-panel .clearfix:after {
  content: "";
  display: table;
  clear: both;
}
.header a,
.side-panel a {
  color: #fff;
  text-decoration: none;
}
.header a:focus,
.header a:hover,
.side-panel a:focus,
.side-panel a:hover {
  color: #ff5d5c;
  text-decoration: none;
}
.header button,
.header input[type=text],
.side-panel button,
.side-panel input[type=text] {
  appearance: none;
  -webkit-appearance: none;
  font-size: 16px;
  font-family: 'Open Sans' !important;
}
.header .btn,
.header button:not(.color-btn):not([class*=fr]),
.side-panel .btn,
.side-panel button:not(.color-btn):not([class*=fr]) {
  display: inline-block;
  text-align: center;
  padding: 0 20px;
  height: 40px;
  line-height: 40px;
  border-radius: 3px;
  cursor: pointer;
  text-transform: uppercase;
  /* box-shadow: inset 0 -3px #d82665; */
  color: #fff;
  background-color: #ff5d5c;
  font-size: 14px;
  font-weight: 600;
}
.header .btn:hover,
.header button:not(.color-btn):hover,
.side-panel .btn:hover,
.side-panel button:not(.color-btn):hover {
  background-color: #ff6a97;
  color: #fff;
  box-shadow: 0 10px 20px 0 transparent;
}
.header button:active,
.side-panel button:active {
  box-shadow: inset 0 1px 4px 0 rgba(0, 0, 0, 0.1);
}
.header input[type=text],
.side-panel input[type=text] {
  height: 40px;
  line-height: 40px;
  border-radius: 4px;
  border: 0;
  padding: 0 15px;
  width: 100%;
  background-color: #fff;
  color: #000;
  box-shadow: inset 0 0 0 1px #e3e3e3, inset 1px 2px 5px rgba(0, 0, 0, 0.2);
}
.header input[type=text]:focus,
.side-panel input[type=text]:focus {
  box-shadow: inset 0 0 0 1px #ff5d5c, inset 1px 2px 5px rgba(0, 0, 0, 0.1);
}
.header input::placeholder,
.side-panel input::placeholder {
  color: #000;
  opacity: 0.4;
  font-size: 13px;
}
.header input:focus::placeholder,
.side-panel input:focus::placeholder {
  color: transparent;
}
.fx-row {
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  -ms-flex-wrap: wrap;
  -webkit-flex-wrap: wrap;
  flex-wrap: wrap;
  -ms-flex-pack: justify;
  -webkit-justify-content: space-between;
  justify-content: space-between;
}
.fx-middle {
  -ms-flex-align: center;
  -webkit-align-items: center;
  align-items: center;
}
.fx-1 {
  -ms-flex-preferred-size: 0;
  flex-basis: 0;
  -webkit-box-flex: 1;
  -ms-flex-positive: 1;
  flex-grow: 1;
  max-width: 100%;
  min-width: 50px;
}
.hmenu > li > a {
  font-family: Oswald, sans-serif;
  font-weight: 700;
  text-transform: uppercase;
}
.wrap-center {
  max-width: 1100px;
  margin: 0 auto;
  position: relative;
  z-index: 20;
}
.header {
  background-color: #303a49;
  box-shadow: 0 1px 5px 0 rgba(0, 0, 0, 0.15);
  transition: top 0.2s linear;
  position: relative;
  z-index: 99;
}
.header-in {
  padding: 0 20px;
}
.logo {
  /* width:180px; */
  display: block;
}
.search-box {
  width: 100%;
  position: relative;
}
.search-box input,
.search-box input:focus {
  padding: 0 45px 0 10px;
  border-radius: 3px;
  height: 34px;
  line-height: 34ppx;
}
.search-box button {
  position: absolute;
  right: 0;
  top: -3px;
  z-index: 10;
  padding: 0!important;
  background: 0 0!important;
  color: #ff5d5c !important;
  font-size: 16px!important;
  width: 40px;
  box-shadow: none !important;
}
.btn-login {
  height: 34px;
  line-height: 34px;
  margin-left: 10px;
}
.hmenu {
  padding: 0 20px 0 40px;
}
.hmenu > li {
  margin-right: 20px;
  position: relative;
}
.hmenu > li > a {
  display: block;
  height: 70px;
  line-height: 70px;
  /* opacity: 0.6; */
  font-size: 16px;
}
.hmenu > li:hover > a {
  opacity: 1;
  box-shadow: inset 0 -3px #ff5d5c;
  color: #ff5d5c;
}
.hidden-menu {
  background-color: #fff;
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
  z-index: 100;
  position: absolute;
  left: 0;
  top: 95%;
  width: 600px;
  padding: 10px;
  border-top: 3px solid #ff5d5c;
  pointer-events: none;
  opacity: 0;
  transform: translateY(30px);
  transition: all 0.3s;
}
.hm-col {
  width: 33.33%;
  float: left;
}
.hm-col li {
  height: 26px;
  line-height: 26px;
  font-weight: 600;
  padding: 0 10px;
}
.hm-col a {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  font-weight: 400;
  opacity: 0.8;
  margin: 0 -10px;
  padding: 0 10px;
  font-size: 13px;
  display: block;
}
.hm-col a:hover {
  background-color: #ff5d5c;
  color: #fff;
  opacity: 1;
}
.hmenu > li:hover .hidden-menu {
  pointer-events: auto;
  opacity: 1;
  transform: translateY(0);
}
.btn-menu {
  display: none;
}
@media screen and (max-width: 1220px) {
  .wrap-center {
    max-width: 1000px;
  }
  .header .btn-login,
  .header .hmenu,
  .header .search-wrap {
    display: none;
  }
  .btn-menu {
    display: block;
    font-size: 34px;
    cursor: pointer;
  }
}
@media screen and (max-width: 950px) {
  .wrap-center {
    max-width: 768px;
  }
  .header-in {
    padding-left: 30px;
    padding-right: 10px;
  }
}
@media screen and (max-width: 760px) {
  .wrap-center {
    max-width: 640px;
  }
}
@media screen and (max-width: 590px) {
  .wrap-center {
    max-width: 480px;
  }
}
.close-overlay {
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
  position: fixed;
  left: 0;
  top: 0;
  z-index: 99998;
  display: none;
}
.fx-row {
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  -ms-flex-wrap: wrap;
  -webkit-flex-wrap: wrap;
  flex-wrap: wrap;
  -ms-flex-pack: justify;
  -webkit-justify-content: space-between;
  justify-content: space-between;
}
.fx-1 {
  -ms-flex-preferred-size: 0;
  flex-basis: 0;
  -webkit-box-flex: 1;
  -ms-flex-positive: 1;
  flex-grow: 1;
  max-width: 100%;
  min-width: 50px;
}
.hmenu > li > a {
  font-family: Oswald, sans-serif;
  font-weight: 700;
  text-transform: uppercase;
}
.search-box {
  width: 100%;
  position: relative;
}
.search-box input,
.search-box input:focus {
  padding: 0 45px 0 10px;
  border-radius: 3px;
  height: 34px;
  line-height: 34ppx;
}
.search-box button {
  position: absolute;
  right: 0;
  top: -3px;
  z-index: 10;
  padding: 0!important;
  background: 0 0!important;
  color: #ff5d5c !important;
  font-size: 16px!important;
  width: 40px;
  box-shadow: none!important;
  border: 0;
}
.btn-login {
  height: 34px;
  line-height: 34px;
  margin-left: 10px;
}
.hmenu {
  padding: 0 20px 0 40px;
}
.hmenu > li {
  margin-right: 20px;
  position: relative;
}
.hmenu > li > a {
  display: block;
  height: 70px;
  line-height: 70px;
  /* opacity: 0.6; */
  font-size: 16px;
}
.hmenu > li:hover > a {
  opacity: 1;
  box-shadow: inset 0 -3px #ff5d5c;
  color: #ff5d5c;
}
.hidden-menu {
  background-color: #fff;
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
  z-index: 100;
  position: absolute;
  left: 0;
  top: 95%;
  width: 600px;
  padding: 10px;
  border-top: 3px solid #ff5d5c;
  pointer-events: none;
  opacity: 0;
  transform: translateY(30px);
  transition: all 0.3s;
}
.hm-col {
  width: 33.33%;
  float: left;
}
.hm-col li {
  height: 26px;
  line-height: 26px;
  font-weight: 600;
  padding: 0 10px;
}
.hm-col a {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  font-weight: 400;
  opacity: 0.8;
  margin: 0 -10px;
  padding: 0 10px;
  font-size: 13px;
  display: block;
}
.hm-col a:hover {
  background-color: #ff5d5c;
  color: #fff;
  opacity: 1;
}
.hmenu > li:hover .hidden-menu {
  pointer-events: auto;
  opacity: 1;
  transform: translateY(0);
}
.side-panel {
  width: 280px;
  height: 100%;
  overflow-x: hidden;
  overflow-y: auto;
  background-color: #fff;
  padding: 10px;
  z-index: 99999;
  position: fixed;
  left: -320px;
  top: 0;
  transition: left 0.4s;
  -webkit-transition: left 0.4s;
}
.side-panel.active {
  left: 0;
}
.side-panel .hmenu {
  margin: 0;
  padding: 0;
}
.side-panel .hmenu > li {
  width: 100%;
  margin: 0;
  padding: 0;
}
.side-panel .hmenu > li > a {
  height: 40px;
  line-height: 40px;
  margin: 0;
  padding: 0;
  box-shadow: none!important;
  color: #444;
}
.side-panel .btn-login,
.side-panel .search-wrap {
  width: 100%;
  margin: 0 0 10px;
  padding: 0;
}
.side-panel .hidden-menu {
  width: 100%;
  display: block;
  position: static;
  background-color: #ededed;
  width: calc(100% + 20px);
  margin-left: -10px;
  opacity: 1;
  pointer-events: auto;
  transform: none;
  box-shadow: none;
  border-bottom: 3px solid #ff5d5c;
}
.side-panel .hm-col {
  width: 50%;
}
.btn-close {
  cursor: pointer;
  display: block;
  left: 280px;
  top: -40px;
  position: fixed;
  z-index: 99999;
  width: 40px;
  height: 40px;
  line-height: 40px;
  text-align: center;
  font-size: 18px;
  background-color: #e84e36;
  color: #fff;
  transition: top 0.4s;
  -webkit-transition: top 0.4s;
}
.btn-close.active {
  top: 0;
}
.header.sticky {
  position: fixed;
  left: 0;
  top: 0;
  width: 100%;
}
.header.sticky-hide {
  top: -70px;
}
.header.sticky-vis {
  top: 0;
}