/* site-specific CSS for slick slider */

/* deal with arrows */
.slick-prev:before,
.slick-next:before
{
	/* override settings in slick-theme */
    opacity: 0.7;
    color: blue;
    font-family: "Glyphicons Halflings", "slick", sans-serif;
    font-size: 20px;
}

.slick-prev:before { content: "\e257"; }
.slick-next:before { content: "\e258"; }

button.slick-next {
	right: -20px;
	width: 20px;
}

button.slick-prev {
	left: -20px;
	width: 20px;
}

button.slick-arrow {
	height: 90%;
	/* background-color: #edecc6; */ /* for checking size of button */
}


@media (min-width: 992px) {
	.slick-prev:before,
	.slick-next:before 	{
		font-size: 30px;
	}

	button.slick-next {
		right: -30px;
		width: 30px;
	}

	button.slick-prev {
		left: -30px;
		width: 30px;
	}
}


/* end arrows */

body.page-index div.slides-wrapper {
	padding-right: 25px;
	padding-left: 25px;
}

div.slick-row h3 {
	margin-top: 18px;
	margin-bottom: 5px;
	color: black;
	font-size: 20px;
}

@media (min-width: 768px) {
	div.slick-row h3 {
		font-size: 25px;
	}
}

div.slides-wrapper div.row.slick-row {
	margin-top:30px;
	margin-bottom: 30px;
}

/* this works to change the arrows
.slick-prev:before {
  content: "<";
  color: red;
  font-size: 30px;
}

.slick-next:before {
  content: ">";
  color: red;
  font-size: 30px;
}
*/