/**
 * @file
 * Four Column Teaser with Gutter Styling
 */

.four-column-teaser--wrapper {
  margin-left: calc(50% - 50vw);
  width: 100vw;
  overflow: auto;
  padding: 50px 0 60px;
}

.four-column-teaser--wrapper button.slick-prev {
  left: 0;
}

.four-column-teaser--wrapper button.slick-next {
  right: 0;
}

.four-column-teaser--wrapper .slick-dots {
  bottom: -45px;
}

@media only screen and (max-width: 460px) {
  .four-column-teaser--wrapper {
    padding: 50px 0 100px;
  }
  .four-column-teaser--wrapper .slick-slide {
    margin-right: 10px;
  }
}

@media only screen and (max-width: 1023px) {
  .four-column-teaser--wrapper .slick-slide {
    margin-right: 10px;
  }
}

.four-column-teaser--wrapper h2 {
  text-align: center;
}

.four-column-teaser--wrapper .four-column-teaser-article-wrapper {
  max-width: 80em;
  margin: 10px auto;
}

@media only screen and (min-width: 769px) {
  .four-column-teaser-article-wrapper article {
    width: 300px;
    margin: 0 10px;
    float: left;
  }
  
  .four-column-teaser-article-wrapper.article-count__less-than-four {
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
  }
  
  .four-column-teaser-article-wrapper.article-count__less-than-four article {
    position: relative;
    float: none;
    display: flex;
    width: auto;
    /* flex: 1 1 0; */
    flex-grow: 1;
    flex-basis: 0;
    max-width: 100%;
  }
  
  .four-column-teaser-article-wrapper.article-count__less-than-four article .four-column-teaser-item {
    position: relative;
    flex-shrink: 0;
    max-width: 100%;
  }

  .four-column-teaser-article-wrapper.article-count__less-than-four article .four-column-teaser-item img {
    max-width: 100%;
    height: auto;
  }
}

.four-column-teaser--wrapper.light-gray {
  background-color: #f4f4f4;
}

.four-column-teaser--wrapper.light-gray article {
  background-color: #ffffff;
}

.four-column-teaser--wrapper.light-gray article:hover {
  background-color: #e6e6e6;
  -webkit-transition: all 5ms linear;
  transition: all 5ms linear;
}

.four-column-teaser--wrapper.light-gray article:hover .article-link i {
  -webkit-animation: nextarrow 1s forwards;
  animation: nextarrow 1s forwards;
}

.four-column-teaser--wrapper.light-gray article:focus {
  background-color: #cccccc;
  -webkit-transition: background-color 5ms linear;
  transition: background-color 5ms linear;
}

.four-column-teaser--wrapper.white {
  background: #ffffff;
}

.four-column-teaser--wrapper.white article {
  background-color: #f4f4f4;
}

.four-column-teaser--wrapper.white article:hover {
  background-color: #dbdbdb;
  -webkit-transition: all 5ms linear;
  transition: all 5ms linear;
}

.four-column-teaser--wrapper.white article:hover .article-link i {
  -webkit-animation: nextarrow 1s forwards;
  animation: nextarrow 1s forwards;
}

.four-column-teaser--wrapper.white article:focus {
  background-color: #c1c1c1;
  -webkit-transition: background-color 5ms linear;
  transition: background-color 5ms linear;
}

.four-column-teaser--wrapper article h4 {
  margin: 10px 0;
  height: 100px;
}

.four-column-teaser--wrapper article .four-column-teaser-item__body {
  margin-bottom: 30px;
  height: 120px;
}

.four-column-teaser--wrapper article .four-column-teaser-item .four-column-teaser-item-content {
  padding: 15px 20px 30px;
}

.four-column-teaser--wrapper article a {
  margin-bottom: 20px;
  text-decoration: none;
  color: #10384f;
}

.four-column-teaser--wrapper article a::after {
  text-decoration: none;
  color: #10384f;
  border-style: solid;
  border-width: 0.25em 0.25em 0 0;
  content: '';
  display: inline-block;
  height: 0.45em;
  position: relative;
  top: 0.5em;
  vertical-align: top;
  width: 0.45em;
  left: 0.3em;
  transform: rotate(45deg);
}

.four-column-teaser--wrapper article:hover a:after {
  transition: all 0.2s ease-out;
  left: 0.5em;
}

button.slick-arrow {
  background: rgba(16, 42, 63, 0.85);
  height: 100%;
  width: 45px;
  z-index: 1;
}

button.slick-arrow:hover,
button.slick-arrow:focus {
  background: rgba(16, 42, 63, 1);
  height: 100%;
  width: 45px;
  z-index: 1;
}

.slick-prev:before,
.slick-next:before {
  content: '' !important;
  border-style: solid;
  border-width: 0.25em 0.25em 0 0;
  content: '';
  display: inline-block;
  height: 0.45em;
  left: 0.15em;
  position: relative;
  top: 0.15em;
  transform: rotate(-45deg);
  vertical-align: top;
  width: 0.45em;
  color: #ffffff;
}

.slick-arrow.slick-disabled {
  display: none !important;
}

.slick-prev:before {
  left: 0.25em;
  transform: rotate(-135deg);
}

.slick-next:before {
  left: 0;
  transform: rotate(45deg);
}