/******************************************************************
Site Name:
Author:

Stylesheet: Variables

Here is where we declare all our variables like colors, fonts,
base values, and defaults. We want to make sure this file ONLY
contains variables that way our files don't get all messy.
No one likes a mess.

******************************************************************/
/*********************
COLORS
*********************/
/*********************
FONTS
*********************/
.post-carousel {
  padding: 3rem 0;
  max-width: 1150px;
  margin: 0 auto;
  font-family: "Montserrat", sans-serif;
}
.post-carousel__carousel .slick-slide {
  padding: 0 0.75rem;
}
.post-carousel__carousel .nextArrow,
.post-carousel__carousel .prevArrow {
  position: absolute;
  top: 50%;
  -webkit-transform: translateY(-50%);
      -ms-transform: translateY(-50%);
          transform: translateY(-50%);
  cursor: pointer;
  z-index: 2;
  background: #0572BA;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  width: 35px;
  height: 35px;
  -webkit-transition: 0.3s ease;
  transition: 0.3s ease;
  -webkit-box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
          box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
}
.post-carousel__carousel .nextArrow svg path,
.post-carousel__carousel .prevArrow svg path {
  -webkit-transition: 0.3s ease;
  transition: 0.3s ease;
}
@media only screen and (min-width: 768px) {
  .post-carousel__carousel .nextArrow,
  .post-carousel__carousel .prevArrow {
    width: 36px;
    height: 36px;
  }
  .post-carousel__carousel .nextArrow svg,
  .post-carousel__carousel .prevArrow svg {
    width: 46px;
    height: 46px;
  }
}
.post-carousel__carousel .nextArrow:hover,
.post-carousel__carousel .prevArrow:hover {
  background: #fff;
}
.post-carousel__carousel .nextArrow:hover svg path,
.post-carousel__carousel .prevArrow:hover svg path {
  stroke: #0572BA;
}
.post-carousel__carousel .nextArrow {
  right: 0;
}
@media only screen and (min-width: 768px) {
  .post-carousel__carousel .nextArrow {
    right: -12px;
  }
}
@media only screen and (min-width: 1400px) {
  .post-carousel__carousel .nextArrow {
    right: -10px;
  }
}
.post-carousel__carousel .prevArrow {
  left: 0;
  top: 46%;
  -webkit-transform: scaleX(-1);
      -ms-transform: scaleX(-1);
          transform: scaleX(-1);
}
@media only screen and (min-width: 768px) {
  .post-carousel__carousel .prevArrow {
    top: 50%;
    left: -12px;
  }
}
@media only screen and (min-width: 1400px) {
  .post-carousel__carousel .prevArrow {
    left: -10px;
  }
}
.post-carousel__item {
  height: 100%;
}
.post-carousel__card {
  position: relative;
  display: block;
  border-radius: 12px;
  overflow: hidden;
  text-decoration: none;
  color: #fff;
  /* Make sure the card has a defined size */
  height: 100%;
  min-height: 450px;
  background: #02416b;
}
.post-carousel__card img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  -webkit-transition: -webkit-transform 0.3s ease;
  transition: -webkit-transform 0.3s ease;
  transition: transform 0.3s ease;
  transition: transform 0.3s ease, -webkit-transform 0.3s ease;
}
.post-carousel__card:hover img {
  -webkit-transform: scale(1.05);
      -ms-transform: scale(1.05);
          transform: scale(1.05);
}
.post-carousel__content {
  position: absolute;
  bottom: 1rem;
  left: 1rem;
  right: 1rem;
  z-index: 2;
}
.post-carousel__category {
  font-family: "Montserrat", sans-serif;
  display: block;
  font-size: 0.8rem;
  font-weight: 600;
  text-transform: uppercase;
  margin-bottom: 0.25rem;
  color: #fff;
  opacity: 0.9;
}
.post-carousel__category[data-category-slug=uncategorized] {
  display: none;
}
.post-carousel__title {
  font-family: "Montserrat", sans-serif;
  font-size: 1.25rem;
  font-weight: 700;
  margin-bottom: 0.25rem;
  line-height: 1.3;
  color: #fff;
}
.post-carousel__readtime {
  font-family: "Montserrat", sans-serif;
  font-size: 0.85rem;
  color: #ddd;
}
.post-carousel__footer {
  text-align: center;
  margin-top: 2rem;
}
.post-carousel__button {
  font-family: "Montserrat", sans-serif;
  display: inline-block;
  border: 2px solid #02416b;
  color: #02416b;
  background: #fff;
  padding: 0.75rem 3.25rem;
  border-radius: 6px;
  font-weight: bold;
  text-decoration: none;
  -webkit-transition: all 0.2s ease;
  transition: all 0.2s ease;
}
.post-carousel__button:hover {
  background: #02416b;
  color: #fff;
}