/* ----------------------------------------------------------------------------------------------------------
Slider ----------------------------------------------------------------------------------------
---------------------------------------------------------------------------------------------------------- */

/*
  This is just some starting CSS, you'll want to customize to your site
*/

.slider {
	position: relative;
	margin: 2em 0;
}

.frame {
    /**
     * (optional) wrapper width, specifies width of the slider frame.
     */
		max-width: 100%;
		margin: 0 auto;
    position: relative;
    font-size: 0;
    line-height: 0;
    overflow: hidden;
    white-space: nowrap;
}



.slides {
    display: inline-block;
}

.slides li {
    position: relative;
    display: inline-block;


    /**
     * (optional) if the content inside the slide element has a defined size.
     */
		width: 100%;
		max-height: 500px;
		vertical-align: middle;
		overflow: hidden;
}

	.slides li img {
		max-width: 100%;
		max-height: 500px;
		height: auto;
		margin: 0 auto;
	}


.prevslide, .nextslide {
    position: absolute;
			top: 45%;
	    bottom: auto;
    display: block;
    cursor: pointer;
		z-index: 1;
}

.nextslide {
    right: 0px;
}

.prevslide {
    left: 0px;
}

.nextslide svg, .prevslide svg {
    width: 50px;
		height: auto;
}

.apath {
	fill:rgba(0,0,0,.25);
}