// Styles for both the .heroSlider and .baseballSlider
// slick carousels
//==============================================
.slider-container {
  padding-left: 0;
  padding-right: 0;
}

@media screen and (min-width: 1400px) {
  .slider-container {
    max-width: 1300px;
  }
}

@media screen and (min-width: 1400px) {
  .index-slider-container {
    max-width: 1300px;
  }
}

.slider-row {
  margin-left: 0;
  margin-right: 0;
}

.heading-container {   // div container for slide headings
  border-left-color: $white;
  border-left-style: solid;
  border-left-width: 2px;
  margin-left: .9%;
  padding-left: 5px;
  position: absolute;
  top: 55%;
  width: 7%;
  z-index: 4444;
}

@media screen and (min-width: 488px) {
  .heading-container {
    top: 60%;
    width: 6%;
  }
}

@media screen and (min-width: 768px) {
  .heading-container {
    margin-left: .7%;
    padding-left: 10px;
    top: 61%;
    width: 6%;
  }
}

@media screen and (min-width: 992px) {
  .heading-container {
    margin-left: .6%;
    padding-left: 20px;
    top: 67%;
  }
}

@media screen and (min-width: 1200px) {
  .heading-container {
    top: 69%;
  }
}

.heroSlider .slide-img,
.baseballSlider .slide-img {
  position: relative;
  width: 100%;
}

.heroSlider .slick-next,
.baseballSlider .slick-next {
  right: 20px;
}

.heroSlider .slick-prev,
.baseballSlider .slick-prev {
  left: 20px;
  z-index: 4;
}

@media screen and (min-width: 576px) {
  .heroSlider .slick-next,
  .baseballSlider .slick-next {
    right: 25px;
  }

  .heroSlider .slick-prev,
  .baseballSlider .slick-prev {
    left: 25px;
    z-index: 4;
  }
}

.heroSlider .slick-next,
.heroSlider .slick-prev,
.baseballSlider .slick-next,
.baseballSlider .slick-prev {
  height: 25px;
  top: 75%;
  width: 25px;
}

@media screen and (min-width: 992px) {
  .heroSlider .slick-next,
  .heroSlider .slick-prev,
  .baseballSlider .slick-next,
  .baseballSlider .slick-prev {
    height: 40px;
    top: 80%;
    width: 40px;
  }
}

.heroSlider .slick-dots li button:before,
.baseballSlider .slick-dots li button:before {
  color: $landing-bg;
  font-size: 12px;
  line-height: 30px;
  opacity: 1;
  text-shadow:
    -1px -1px 0 $black,
    1px -1px 0 $black,
    -1px 1px 0 $black,
    1px 1px 0 $black;
}

.heroSlider .slick-dots li.slick-active button:before,
.baseballSlider .slick-dots li.slick-active button:before {
  color: $primary-blue;
  opacity: 1;
  text-shadow:
    -1px -1px 0 $black,
    1px -1px 0 $black,
    -1px 1px 0 $black,
    1px 1px 0 $black;
}

.heroSlider .slick-dots li,
.baseballSlider .slick-dots li  {
  margin-left: 1px;
  margin-right: 1px;
  padding-left: 0;
  padding-right: 0;
}

.njcaa-link {
  margin-top: 30px;
  position: absolute;
  right: 15%;
  z-index: 1000;
}

@media screen and (min-width:1600px) {
  .njcaa-link {
    right: 20%;
  }
}

@media screen and (min-width:1900px) {
  .njcaa-link {
    right: 25%;
  }
}

@media screen and (min-width:1200px) {
  .njcaa-logo {
    width: 175px;
  }
}

@media screen and (min-width:1600px) {
  .njcaa-logo {
    width: 200px;
  }
}

.baseballSlider {   // prevents all slides from displaying vertically before slick has initialized
  visibility: hidden;
}

.slick-initialized {   // makes slides visible again once slick has initialized
  visibility: visible;
}

.slick-track {
  margin-left: 0;
}