/* styles for custom-slider */

/* adjusments to bxslider styles
--------------------------------------------*/
div.bx-wrapper{
	border: none;
	box-shadow: none;
	padding: 8px;
	background: #608080;
	border-radius: 6px;
	& ul{
		margin-block-start:0;
		padding-inline-start:0;
	}
/* move controls below image */
	& .bx-controls-direction a{
		top: auto;
		bottom: -40px;
		margin: 0;
	}
/* hide the active start,stop button */
	& .bx-controls-auto a.active{
		display: none;
	}
	& .home-slider .bx-caption{
		text-align: center;
		& span{
			font-size: 18px;
		}
	}
}
/* styles for custom_slider shortcode
--------------------------------------------*/
div.bx-wrapper{
/* text annotations*/	
	& p{
		text-align: center;
		--x-pos: 5%; 
		--y-pos: 5%; 
		color: snow;
		margin: 0;
		white-space: pre;		
		&.title{
			font-weight: 600;
			font-size: 18px;		
			padding: 0 0 6px 0;	
		}
		&.subtitle{
			font-weight: 500;
			font-size: 16px;
			padding: 0 0 6px 0;	
		}
		&.caption{
			font-weight: 500;
			font-size: 16px;
			padding: 6px 0 0 0;
		}
		&.overlay{
			color: black;
			font: 20px/24px serif;
			padding: 4px 8px;
			background: RGBA(255, 255, 255, 0.7);
			position: absolute;			
		}	
		&.top-left{
			top: var(--y-pos);
			left: var(--x-pos);
		}
		&.top-right{
			top: var(--y-pos);
			right: var(--x-pos);
		}
		&.center{
			top: 50%;
			left: 50%;
			transform: translate(-50%, -50%);
		}
		&.bottom-left{
			bottom: var(--y-pos);
			left: var(--x-pos);
		}
		&.bottom-right{
			bottom: var(--y-pos);
			right: var(--x-pos);
		}
	}
}