/**
 * Maintains aspect ratio
 * Grabbed from: https://css-tricks.com/snippets/sass/maintain-aspect-ratio-mixin
 * @param  {[type]} $width  [description]
 * @param  {[type]} $height [description]
 * @return {[type]}         [description]
 */
.component.content-categories {
  overflow: hidden; }
  .component.content-categories .nav-chevrons button {
    background-image: url("../images/bars-group.svg"); }
  @media (min-width: 800px) {
    .component.content-categories .flex .cell {
      flex: 1 1 50%; } }
  @media (max-width: 799px) {
    .component.content-categories .flex .cell.nav .cat-nav {
      justify-content: center; } }
  .component.content-categories .flex .cell.nav .cat-nav button {
    max-width: 40px;
    height: 5px; }
  .component.content-categories .flex .cell.content {
    z-index: 2; }
    .component.content-categories .flex .cell.content .overlap-wrap {
      width: calc(100% + 40px);
      overflow: hidden; }
    .component.content-categories .flex .cell.content .cat-item {
      outline: none;
      padding: 25px;
      width: 100%;
      max-width: calc(100% - 40px);
      background-color: white;
      transition: all 400ms ease-in-out 150ms;
      filter: grayscale(1);
      opacity: 0.4;
      cursor: pointer; }
      .component.content-categories .flex .cell.content .cat-item .focus-accent {
        opacity: 0;
        transition: all 400ms ease-in-out 150ms; }
      .component.content-categories .flex .cell.content .cat-item .desc {
        margin-top: 20px;
        margin-bottom: 20px; }
      .component.content-categories .flex .cell.content .cat-item a {
        pointer-events: none; }
      .component.content-categories .flex .cell.content .cat-item.active {
        max-width: 100%;
        background-color: white;
        transition: all 400ms ease-in-out 0ms;
        filter: grayscale(0);
        opacity: 1;
        cursor: auto; }
        .component.content-categories .flex .cell.content .cat-item.active .focus-accent {
          opacity: 1;
          transition: all 400ms ease-in-out 0ms; }
        .component.content-categories .flex .cell.content .cat-item.active a {
          pointer-events: auto; }
      @media screen and (max-width: 1024px) {
        .component.content-categories .flex .cell.content .cat-item {
          padding: 10px; }
          .component.content-categories .flex .cell.content .cat-item h3 {
            font-size: 32px; }
          .component.content-categories .flex .cell.content .cat-item .desc {
            font-size: 16px;
            margin-top: 10px;
            margin-bottom: 10px; } }
  .component.content-categories .flex .cell.media .overlap-wrap {
    position: relative;
    z-index: 1; }
  .component.content-categories .flex .cell.media .img-container:before {
    content: "";
    padding-top: 75%;
    display: block; }
  .component.content-categories .flex .cell.media figure {
    position: absolute;
    top: 0; }
  .component.content-categories .container.row-1 {
    grid-row: 1 / span 1; }
  .component.content-categories .container.row-2 {
    grid-row: 2 / span 1; }
  .component.content-categories.photo-left .cell.content .cat-item {
    right: 0;
    padding-right: 22px; }
    .component.content-categories.photo-left .cell.content .cat-item .focus-accent {
      right: 0; }
  .component.content-categories.photo-left .cell.content .overlap-wrap {
    right: 0; }
    .component.content-categories.photo-left .cell.content .overlap-wrap::before, .component.content-categories.photo-left .cell.content .overlap-wrap::after {
      right: 0; }
  .component.content-categories.photo-right .cell.content .cat-item {
    left: 0;
    padding-left: 22px; }
    .component.content-categories.photo-right .cell.content .cat-item .focus-accent {
      left: 0; }
  .component.content-categories.photo-right .cell.content .overlap-wrap {
    left: 0; }
    .component.content-categories.photo-right .cell.content .overlap-wrap::before, .component.content-categories.photo-right .cell.content .overlap-wrap::after {
      left: 0; }
  @media (min-width: 800px) {
    .component.content-categories .mobile-only {
      position: absolute !important;
      height: 1px;
      width: 1px;
      overflow: hidden;
      clip: rect(1px, 1px, 1px, 1px);
      word-wrap: normal; }
    .component.content-categories .carousel-prev span, .component.content-categories .carousel-next span {
      transform: rotate(90deg);
      display: block; } }
  @media (max-width: 799px) {
    .component.content-categories .not-mobile {
      position: absolute !important;
      height: 1px;
      width: 1px;
      overflow: hidden;
      clip: rect(1px, 1px, 1px, 1px);
      word-wrap: normal; }
    .component.content-categories .container.flex {
      flex-direction: column-reverse; }
      .component.content-categories .container.flex .cell.content {
        background: none;
        height: 200px; }
        .component.content-categories .container.flex .cell.content .cat-item {
          left: unset;
          right: unset;
          max-width: 100%;
          padding-left: 10px;
          padding-right: 10px; }
          .component.content-categories .container.flex .cell.content .cat-item .focus-accent {
            height: 7px;
            width: 100%;
            top: unset;
            overflow: hidden;
            bottom: 0; }
        .component.content-categories .container.flex .cell.content .overlap-wrap {
          width: 100%;
          max-width: calc(100% - 25px);
          margin: -25px auto 0;
          left: unset;
          right: unset;
          top: unset;
          position: relative;
          overflow: visible; }
          .component.content-categories .container.flex .cell.content .overlap-wrap::before, .component.content-categories .container.flex .cell.content .overlap-wrap::after {
            display: none; }
        .component.content-categories .container.flex .cell.content .eg-flick-viewport {
          max-width: 100%; }
    .component.content-categories .container.row-1 {
      grid-row: 2 / span 1; }
    .component.content-categories .container.row-2 {
      grid-row: 1 / span 1;
      margin-top: 0;
      margin-bottom: 15px; }
      .component.content-categories .container.row-2 .nav {
        flex: 1 0 100%; }
      .component.content-categories .container.row-2 .spacer {
        display: none; }
      .component.content-categories .container.row-2 .nav-chevrons {
        justify-content: center; } }

.fade-enter-active,
.fade-leave-active {
  transition: opacity 0.5s; }

.fade-enter, .fade-leave-to {
  opacity: 0; }

.fade-enter-active {
  position: relative;
  top: 0;
  left: 0;
  z-index: 0; }

.fade-leave-active {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1; }

/* GO TO NEXT SLIDE */
.slide-next-enter-active {
  transition: all 0.6s ease-out 0s;
  position: relative;
  top: 0;
  left: 0;
  z-index: 0; }

.slide-next-leave-active {
  transition: all 0.6s ease-out 0s;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1; }

.slide-next-enter {
  transform: translate(100%);
  opacity: 0; }

.slide-next-leave-to {
  transform: translate(-100%);
  opacity: 0; }

/* GO TO PREVIOUS SLIDE */
.slide-prev-enter-active {
  transition: all 0.6s ease-out 0s;
  position: relative;
  top: 0;
  left: 0;
  z-index: 0; }

.slide-prev-leave-active {
  transition: all 0.6s ease-out 0s;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1; }

.slide-prev-enter {
  transform: translate(-100%);
  opacity: 0; }

.slide-prev-leave-to {
  transform: translate(100%);
  opacity: 0; }

.focus-accent.lines {
  width: 7px;
  overflow: hidden; }
  .focus-accent.lines svg {
    width: 100%;
    height: 100%;
    display: block; }
