div.blmslideshow{width: 200px; height: 200px; position: relative; overflow: hidden; margin: 10px; display: inline-block}


/* Example Sizes - SHOULD BE REPLACED OR MADE MORE SPECIFIC */
div.blmslideshow.fullwidth{width: 100%; height: 500px;}

div.blmslideshow div.slide{background: transparent center center no-repeat; width: 100%; height: 100%; background-size: cover; position: absolute;}
div.blmslideshow div.slide.clickable{cursor:pointer;}

/* Multiple Slides At Once */
div.blmslideshow.multi {width: 700px; height: 120px}
div.blmslideshow.multi div.slide{position: absolute; width: 20% !important; margin-right: 20px;}
div.blmslideshow.multi div.slide.pos1{left: 0% !important;}
div.blmslideshow.multi div.slide.pos2{left: 20% !important;}
div.blmslideshow.multi div.slide.pos3{left: 40% !important;}
div.blmslideshow.multi div.slide.pos4{left: 60% !important;}
div.blmslideshow.multi div.slide.pos5{left: 80% !important;}

/* Captions */
div.blmslideshow div.slide div.caption{width: 100%; position: absolute; bottom: 0; left: 0; background-color: rgba(100,100,100,0.8);}
div.blmslideshow div.slide div.caption p{margin:  5px; padding: 0;}
div.blmslideshow div.slide div.caption h3{margin: 5px; padding: 0;}

/* Arrows */
div.blmslideshow a.arrows{position: absolute; top: 50%; margin-top: -10px; z-index: 2000; font-weight: bold; color: white; cursor: pointer;}
div.blmslideshow a.arrows.previous{left: 5px;}
div.blmslideshow a.arrows.next{right: 5px;}

/* Indicators */
div.blmslideshow ul.indicators{list-style-type: none; position: absolute; top: 5px; right: 5px; z-index: 2000; margin: 0; padding: 0;}
div.blmslideshow ul.indicators li{list-style-type: none; width: 10px; height: 10px; border-radius: 50%; display: inline-block; background: rgba(200, 200, 200, 0.2); border: 1px solid rgba(200, 200, 200, 0.8); z-index: 2001; margin: 0 5px 0 0;}
div.blmslideshow ul.indicators li:hover{cursor: pointer;}
div.blmslideshow ul.indicators li.selected{animation: indicators-fadein 2s; animation-fill-mode: forwards;}	
@keyframes indicators-fadein{
	100% { background: rgba(200, 200, 200, 0.8); border: 1px solid rgba(200, 200, 200, 1); }
}

/* Transition into first slide */
div.blmslideshow div.slide1 {animation: slide-fadein 0.5s; opacity: 0; animation-fill-mode: forwards;}					
@keyframes slide-fadein{
	0%   { opacity: 0; }
	100% { opacity: 1; }
}
div.blmslideshow div.slide1 div.caption{animation: slide-slide1-captionanim 0.5s; animation-delay: 0.5s; opacity: 0; animation-fill-mode: forwards;}					
@keyframes slide-slide1-captionanim{
	0%   { opacity: 0; }
	100% { opacity: 1; }
}

/* Transition Options */
div.blmslideshow.crossfade div.slide2 {animation: slide-crossfade 2s; opacity: 0; animation-fill-mode: forwards;}					
@keyframes slide-crossfade{
	0%   { opacity: 0; }
	100% { opacity: 1; }
}
div.blmslideshow.crossfade div.slide2 div.caption{opacity: 0;}
div.blmslideshow.crossfade div.slide2 div.caption{animation: slide-crossfade-captionanim 1s; animation-delay: 2s; opacity: 0; animation-fill-mode: forwards;}					
@keyframes slide-crossfade-captionanim{
	0%   { opacity: 0; }
	100% { opacity: 1; }
}

div.blmslideshow.slidefromright div.slide2 { animation: slide-slidefromright 2s; animation-fill-mode: forwards; right: -100%;}					
@keyframes slide-slidefromright{
	0%   {right: -100%;}
	100% {right: 0%;}
}

div.blmslideshow.slidefromleft div.slide2 { animation: slide-slidefromleft 2s; animation-fill-mode: forwards;  left: -100%;}					
@keyframes slide-slidefromleft{
	0%   {left: -100%;}
	100% {left: 0%;}
}

div.blmslideshow.pop div.slide2 { animation: slide-pop 0.5s; animation-timing-function: easeInOutElastic; animation-fill-mode: forwards; left: 50%; top: 50%; width: 0%; height: 0%;}					
@keyframes slide-pop{
	0%   {left: 50%; width: 0%; height: 0%; top: 50%; color: transparent; }
	70% {left: -5%; width: 110%; height: 110%; top: -5%; color: transparent;}
	100% {left: 0%; width: 100%; height: 100%; top: 0%; color: black;}
}