.at-highlight {
  position: relative;
  display: flex;
  flex-flow: column;
  height: 100%;
  margin: 0 1.5vw;
  background: #fff url(../../img/bg.jpg) repeat center center;
  box-shadow: 0 0 5px 0 rgba(0,0,0,.2);
}
.at-highlight::before {
  position: absolute;
  display: block;
  content: '';
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(255,255,255,.4);
}
.at-highlight__title a::after {
  content: '';
  display: block;
  position: absolute;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  z-index: 1;
}
.at-highlight__content {
  position: relative;
  display: flex;
  flex-flow: column;
  flex-grow: 1;
  padding: 1em;
}
.at-highlight__title {
}
.at-highlight__text {
}
.at-highlight__text p {
  margin-top: 0;
}
.at-highlight__media {
  margin: -1em -1em 1em;
  order: -1;
}
.at-highlight__button {
  margin: 0 .8em .8em;
  text-align: center;
}
.at-highlight__title:focus-within ~ .at-highlight__content .at-highlight__button,
.at-highlight:hover .at-highlight__button {
  color: #111;
  box-shadow: inset 0 0 0 2px rgba(0,124,196,.4);
  transition: .6s color ease-in-out, .4s box-shadow ease-in-out;
}
.at-highlight__title:focus-within ~ .at-highlight__content .at-highlight__button::before,
.at-highlight__title:focus-within ~ .at-highlight__content .at-highlight__button::after,
.at-highlight:hover .at-highlight__button::before,
.at-highlight:hover .at-highlight__button::after {
  width: 100%;
  height: 100%;
}
.at-highlight__title:focus-within ~ .at-highlight__content .at-highlight__button::before,
.at-highlight:hover .at-highlight__button::before {
  border-top-color: #504644;
  border-right-color: #504644;
  transition:
    width .2s ease-out, /*Width expands first*/
    height .1s ease-out .2s; /*And then height*/
}
.at-highlight__title:focus-within ~ .at-highlight__content .at-highlight__button::after,
.at-highlight:hover .at-highlight__button::after {
  border-bottom-color: #504644;
  border-left-color: #504644;
  transition:
    border-color 0s ease-out .3s, /*Wait for ::before to finish before showing border*/
    width .2s ease-out .3s, /*And then exanding width*/
    height .1s ease-out .5s; /*And finally height*/
}

.at-highlight-wrapper--static .owl-carousel--highlight .owl-item--dummy {
  display: none;
}



@media screen and (max-width: 680px) {
  .at-highlight {
    margin: 0;
  }
  .at-highlight-wrapper .owl-item:not(.active) .at-highlight {
    margin: 0 -7%;
    opacity: .3;
  }
  .at-highlight-wrapper .owl-item.active {
    z-index: 1;
  }
  .at-highlight-wrapper .owl-item {
    will-change: transform;
    -webkit-transition: .3s -webkit-transform ease-in-out;
    -ms-transition: .3s -ms-transform ease-in-out;
    transition: .3s transform ease-in-out;
  }
  .at-highlight-wrapper .owl-item:not(.active) {
    -webkit-transform: scale(.9);
    -ms-transform: scale(.9);
    transform: scale(.9);
  }
}



@media screen and (min-width: 680px) {
  .at-highlight-wrapper--static .owl-carousel--highlight .owl-stage {
    display: flex;
    flex-flow: row wrap;
    width: 100% !important;
    padding: 0 !important;
    margin: 0;
    transition: inherit !important;
    transform: inherit !important;
  }
  .at-highlight-wrapper--static .owl-carousel--highlight.owl-carousel.owl-drag .owl-item {
    flex: 1 1 320px;
    margin: 0 0 2em;
    width: auto !important;
  }
  .at-highlight-wrapper--static .owl-carousel--highlight .owl-item.cloned {
    display: none;
  }
  .at-highlight-wrapper--static .owl-carousel--highlight .owl-item--dummy {
    display: block;
  }
  .at-highlight-wrapper--static .owl-carousel--highlight .owl-nav,
  .at-highlight-wrapper--static .owl-carousel--highlight .owl-dots {
    display: none;
  }
}