.category-base {
  overflow: hidden;
}

.category-base__container {
  width: 200%;
}

.category-groups {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  float: left;
  width: 50%;
  margin: 0 0 calc(16px * 1.5 * .5) !important;
  -webkit-transition: -webkit-transform ease 1s;
  transition: -webkit-transform ease 1s;
  transition: transform ease 1s;
  transition: transform ease 1s, -webkit-transform ease 1s;
  -webkit-transform: translateX(0);
  transform: translateX(0);
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
  -ms-flex-flow: row wrap;
  flex-flow: row wrap;
  -webkit-box-align: stretch;
  -ms-flex-align: stretch;
  align-items: stretch;
}

.category-groups.is-hidden {
  display: block !important;
  -webkit-transition: -webkit-transform ease 1s;
  transition: -webkit-transform ease 1s;
  transition: transform ease 1s;
  transition: transform ease 1s, -webkit-transform ease 1s;
  -webkit-transform: translateX(-100%);
  transform: translateX(-100%);
}

.category-groups__link {
  display: block;
  height: 100%;
  padding: calc(16px * 1.5);
  opacity: 1;
  -webkit-transition: opacity ease 0.3s;
  transition: opacity ease 0.3s;

  &:hover,
  &:focus,
  &:active {
    opacity: 0.5;
  }
}

.category-groups__icon {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  width: 100%;
  margin-bottom: calc(16px * 1.5 * 1.5);
  text-align: center;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
}

.category-groups__image {
  max-width: 60%;
  max-height: 110px;
  vertical-align: middle;
}

.category-groups__title {
  width: 100%;
  font-size: calc(16px * 1.25);
  color: #413f42;
  text-align: center;
}

.category-list {
  float: left;
  width: 50%;
  padding: 0;
  margin: 0 0 calc(16px * 1.5 * 2);
  list-style: none;
  -webkit-transition: -webkit-transform ease 1s;
  transition: -webkit-transform ease 1s;
  transition: transform ease 1s;
  transition: transform ease 1s, -webkit-transform ease 1s;
  -webkit-transform: translateX(-100%);
  transform: translateX(-100%);
}

.category-list.is-hidden {
  display: block !important;
  -webkit-transition: -webkit-transform ease 1s;
  transition: -webkit-transform ease 1s;
  transition: transform ease 1s;
  transition: transform ease 1s, -webkit-transform ease 1s;
  -webkit-transform: translateX(0);
  transform: translateX(0);
}

.category-list__header {
  padding: calc(16px * 1.5) 15px 0;
}

.category-list__toggle {
  display: block;
  font-size: calc(16px * 1.25);
  opacity: 1;
  -webkit-transition: opacity ease 0.3s;
  transition: opacity ease 0.3s;
}

.category-base__title {
  margin-top: calc(16px * 1.5);
  margin-bottom: calc(16px * 1.5 / 2);
  font-size: calc(16px * 2);
  font-weight: 400;
  text-align: center;
}