slider.css

/* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * *
 *                             Slides UL resets                              *
 * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * */
.ss2-slide-list { /* list with slide categories, img, and excerpts */
  list-style: none;
  padding: 0; margin: 0;
  position: relative;
}
.ss2-slide-list li .ss2-categories { /* categories */
  position: absolute;
  top: 0; left: 0;
  z-index: 90;
}
.ss2-slide-list li img { /* slide image */
  float: left; /* in order for image to go under categories */
  z-index: 89;
}
/* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * *
 *                                 Image                                     *
 * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * */
.ss2-container-slides img {
	width: 100%;
	height: auto;
}
/* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * *
 *                                 Slides                                    *
 * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * */

/*
 * DISPLAY DIRECTION: Categories, image, excerpt
 * This is the default but just reinforcing it... I guesss
 **********************/

ul.ss2-slide-list li {
  display:flex;
  flex-direction: column;
}

/*
 * CATEGORIES
 **************/

ul.post-categories {
  display:flex;
  flex-direction: row;
  list-style: none;
  padding:0;
  margin:0;
  font-size: 12px;
}
ul.post-categories li {
  background-color: black;
  color: white;
	padding: 1px 5px;
	text-transform: uppercase;
  margin: 0 2px 0 0;
}
ul.post-categories a:link,
ul.post-categories a:visited,
ul.post-categories a:hover,
ul.post-categoriess a:active {
	color: #fff;
}

/*
 * EXCERPT
 ***********/

.ss2-excerpt {
  background-color: #000;
  color: #fff;
  padding: 5px;
}
.ss2-excerpt p {
  /* wordpress adds a <p> tag we need to compensate for */
	padding: 0; margin: 0;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	font-size: 16px;
}
/* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * *
 *                        Navigation (arrows, dots)                          *
 * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * */

.ss2-slide-nav {
  display:flex;
  flex-direction: row;
	background-color: #000;
  /* box-sizing: border-box; */
}
.ss2-slide-nav .ss2-arrow-left,
.ss2-slide-nav .ss2-arrow-right {
  flex-grow:1;
}
.ss2-slide-nav .ss2-nav-dots {
  flex-grow:2;
}
.ss2-arrow-left, .ss2-arrow-right, .ss2-nav-dots {
  text-align:center;
	color: #ccc;
  padding:.5em;
}
.ss2-arrow-left:hover,
.ss2-arrow-right:hover {
  background-color: #ccc;
  color: black;
}
.ss2-nav-dots ul {
  display:flex;
  flex-direction: row;
  list-style:none;
  padding:0;
  margin:0;
}
.ss2-nav-dots ul li {
  flex-grow:1; /* this spreads them out which is better for mobile...
                  but need bigger icons to match */
}
.ss2-arrow-left:hover,
.ss2-arrow-right:hover,
.ss2-nav-dots ul li:hover {
  cursor: pointer;
}
/* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * *
 *                               Miscellaneous                               *
 * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * */
.ss2-clearfix {
	clear:both;
}

@media (max-width: 991px) {
  /* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * *
  *                                Page setup                                 *
  * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * */
  .ss2-container-slider {
    box-sizing: border-box;
    display: flex;
    flex-direction: column; /* inner slides reset this to col */
  }
  /* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * *
  *                                  Titles                                   *
  * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * */

  .ss2-container-titles {
    /* background-color: rgba(0,255,255,0.75); */
    /* position:relative; */
  }
  .ss2-title-and-date {
    display:flex;
    flex-direction: column; /* makes date fall under title */
    position:absolute;
    top:1em;left:0;
    background-color: rgba(255,255,255,0.8);
    padding:0.5em;
    line-height:2em;
  }
  .ss2-title-and-date .ss2-title {
    font-size: 2em;
    font-weight:bold;
  }
  .ss2-title-and-date .ss2-date {
    text-transform:uppercase;
    font-size:.8em;
  }
}
@media (min-width: 992px) {
  /* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * *
   *                                Page setup                                 *
   * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * */
  .ss2-container-slider {
    width:100%;
  	box-sizing: border-box;
    display: flex;
    flex-direction: row;
  }

  .ss2-container-slides {
  	width:75%; /* forces resize */
  }
  .ss2-container-titles {
    width:25%;  /* forces resize */
  }
  /* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * *
   *                                  Titles                                   *
   * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * */

  .ss2-title-and-date {
    background-color:white;
    overflow:hidden; /* for the inevitable overlap due to long titles */
    display:flex;
    flex-direction:column;
    padding-left: 1em;
    border-bottom:1px solid #ddd;
  }
  .current { /* Highlighted title tab styling */
  	background-color: #ddd;
  	color: #000;
  }
  .ss2-date {
  	font-size: 10px;
  	text-transform: uppercase;
  }
}