/**
 * 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;
}