.z-slider_cards {
	padding: 80px 0 0;
  position: relative;
  z-index: 998;
}

.zsc-grid {
	z-index: 998;
}

/* the next few calls are all new to flex the slides to control if they want them centered or stretched. When you hit the other comment, those are the original styles */

.zsc-grid .slick-track {
  display: flex;
  flex-flow: row nowrap;
}

.zsc-grid .slick-track > div,
.zsc-grid .slick-track > div > div {
  height: 100%;
  display: flex;
  flex-flow: row nowrap;
}

.zsc-grid .slick-track > div > div {
  display: flex;
  flex-flow: row nowrap;
  position: relative;
  width: 100%;
}

.slider-button {
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  text-align: center;
}

.slider-button a, .slider-button a:visited {
  background: transparent;
  border-color: #032459;
  color: #032459;
  display: inline-block;
  padding: 15px 31px 14px;
  min-width: 124px;
  width: auto !important;
  border-radius: 26.5px;
  border-width: 3px;
  border-style: solid;
  font-size: 15px;
  line-height: 1.2;
  font-weight: 700;
  letter-spacing: .02rem;
  text-align: center; 
}

.zsc-grid .slick-slide {
	/* padding: 0 .6%; */
  overflow: hidden;
	background: #fff;
  width: 33%;
  box-sizing: border-box;
  height: auto !important;
  padding: 20px;
  margin: 0 15px 25px;
  text-align: center;
  border-radius: 6px;
	-webkit-box-shadow: 0px 0px 40px 0px rgba(3,36,89,0.5);
  -moz-box-shadow: 0px 0px 40px 0px rgba(3,36,89,0.5);
  box-shadow: 0px 0px 40px 0px rgba(3,36,89,0.5);
}

.zsc-grid .slick-slide .zsc-item {
  padding: 0 0 55px 0;
  align-self: center;
}

.zsc-grid .slick-slide .zsc-item.top-align {
  align-self: flex-start;
}

/* Below is the original styling for the zsc item. I moved it to the actual slick slide above so they would all be the same height on larger viewports.

.zsc-grid .slick-slide {
	padding: 0 .6%;
}

/* .zsc-item {
  overflow: hidden;
	background: #fff;
  width: 33%;
  box-sizing: border-box;
  padding: 0 6% 65px;
  margin: 1% 2%;
  text-align: center;
  border-radius: 6px;

	-webkit-box-shadow: 0px 0px 40px 0px rgba(3,36,89,0.5);
  -moz-box-shadow: 0px 0px 40px 0px rgba(3,36,89,0.5);
  box-shadow: 0px 0px 40px 0px rgba(3,36,89,0.5);
} */

.zsc-item h2 {
	color: #032459;
  font-size: 20px;
  line-height: 1.2rem;
}

.zsc-item h4 {
	font-size: 20px;
  font-weight: 500;
}

.zsc-item img {
	margin-bottom: 40px;
}

.zsc-item p {
  box-sizing: border-box;
  padding: 2% 0;
  font-size: 15px;
}

.zsc-grid .zpp-arrow_container,
.zsc-grid .slick-arrow {
  height: 45px;
  width: 30px;
}

.zsc-grid .slick-prev,
.zsc-grid .slick-next {
	position: absolute;
  top: 50%;
  z-index: 999;
  cursor: pointer;
}

.zsc-grid .zpp-arrow {
  fill:#fff;
}

.zsc-grid .zpp-slider {
	margin-top: 60px;
}

.zsc-grid .slick-prev {
	left: -2%;
  transform: rotate(-90deg);
}

.zsc-grid .slick-next {
	right: -4%;
  transform: rotate(90deg);
}

.zsc-grid .slick-disabled .zpp-arrow {
	fill: #fff !important;
  opacity: .5;
}

.zsc-item .zTTS-btn {
  font-size: 15px;
}

@media (max-width: 840px) {
  .zsc-grid {
    /* transform: translateY(-44%); */
    z-index: 998;
	}
  
  .zsc-item {
  	width: 96%;
    padding: 34px 3% 48px;
  }
  .zsc-item p {
  	min-height: 40px;
    margin-top: 20px;
  }
}

@media (max-width: 600px) {
  .zsc-grid {
  	transform: translateY(0);
  }
}