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