// 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;

}