/* https://www.w3schools.com/howto/howto_js_slideshow.asp */

/*
	slide_visible_complex
		slide_control_container
		slide_container
*/

/* =============================================================== */

/* class for the parent container */
.slide_shadow {
    display: none;

    position: fixed;
	overflow-y:hidden;
	left:0;
	top:0;
	bottom:0;
	right:0;
	background-color: rgba(63, 63, 63, 0.9);
}
/* =============================================================== */
/* fills whole screen, EXCEPT width limited to max-width */
.slide_visible_complex {
	max-width: 100%;
	max-height:95%;	

	left: 0;
	right: 0;
	top: 0;
	bottom:0;
	margin-left: auto;
	margin-right: auto;
	position: fixed;
}

/* =============================================================== */


.slide_control_container {
	width:100%;
    position: relative;	/* to position children */
    left: 0;
}

.slide_dot_overflow_container {
  	position: relative;	/* NEEDED. this forces the size of the container */
	margin-left: 3em;	/* space for forward/back buttons. @TODO: make this a custom_ property!!! */
	margin-right: 3em;
}


  position: absolute;
}


/* =============================================================== */
.slide_dot_breaker {
}

@media screen and (max-width: 600px) {
	.slide_dot_breaker {
	 	flex-basis: 100%;
	  	height: 0;
	}
}
/* =============================================================== */

.slide_dot {
	m_argin-left: auto;	/* flex will change this */
	m_argin-right: auto;	/* flex will change this. Has to be auto on left AND right so that wrapped lines are centered. */
	margin-top:	4px;	/* space between lines, if dots wrap */
	margin-bottom:	4px;

	height: 13px;
	width: 13px;
	padding: 10px;		/* forces MINIMUM space between dots */
/*
	border: 1px solid #ccc !important;
	background-color:transparent;
	border-radius: 50%;
*/
	display: inline-block;
	m_argin-left: 8px;
	m_argin-right: 8px;
	text-align: center;
	cursor: pointer;
}

/* the displayed circle is NOT in the element, so we can have auto margin for flex without distortion, and use padding in parent to force spacing */
.slide_dot:after {
	border: 1px solid #ccc !important;
	background-color:transparent;
	border-radius: 50%;

	transition: height .5s, width .5s, border-radius .5s;

	content: '';
	display: block;
	width: inherit;			  /** same height and width than our column **/
	height: inherit;
	position: relative;
	top: -.5em;			  /* NEEDED: to make them overlap the parent */
	left: -.5em;
}

.slide_dot.active:after {
	background-color:white;
	border-radius:0;
	height: 16px;
	width: 16px;
}


.slide_img_box > img {
	display:flex;
	text-align: center;
	object-fit: contain;
/* width: 100%; */
	width:1500px; /*to prevent over-stretching, which causes blurring */
	max-width:100%;	/* ...but should never be cropped */
	margin-left: auto;
	margin-right: auto;

	/* FOR CRAP SAFARI: don't use CSS standard shorthand. Write seperate elements, thus: */
	border-bottom-width: 1px;
	border-bottom-style: solid;
	border-bottom-color: #777;
}

/*
!!!Safari on IOS not working with object-fit: contain; !!!
.slide_img_box > img {
	h_eight: 100%; 
	w_idth: 100%; 
	text-align: center;	
	object-fit: contain;
	position: relative;
	left:50%;
	top:50%;
	transform: translate(-50%,-50%);

	max-width: 100%;
	max-height: 100%;
}
*/

/* Hide the images by default */
.slide_single {
  display: none;
	_left:-100px;
text-align: center;
}

.slide_single > img {
	width:100%;
}

.dot_container {
	display: flex;
	flex-direction: row;
    justify-content: safe center; /* NEED safe to bunch. center spreads evenly */
}

.dot_container {
	padding-top:.7rem;
	padding-bottom:.7rem;
}


.slide_control_container.option_paginate_dots {
	position: relative;
}

.slide_control_container.option_paginate_dots > .slide_dot_overflow_container {
	position: relative;
	overflow: hidden;
}

.slide_control_container.option_wrap_dots > * > .dot_container,
.slide_control_container.option_wrap_dots > .dot_container {
	flex-wrap: wrap;	/* wrap when there is no more margin space to squish */
}




/* Number text (1/3 etc) */
.slide_numbertext {
  color: #f2f2f2;
  font-size: 24px;
  padding: 8px 12px;
  position: absolute;
  top: 0;
}




/* ============================================================================ */

.slide_text_holder {
	display:block;
	padding:0;
	margin:0;
}


/* CSS3 hack to hide empty elements, thus making the containing div invisible too */
.slide_text_holder > *:empty {
   display: none !important;
}


.slide_numbertext {
	display:none;
}

/*
.slide_control_container > .slide_prev
, .slide_control_container > .slide_next {
	top: 0;
	margin-top: 0;
}
*/

/*
.slide_control_container > .slide_prev {
	float: left !important;
}

.slide_control_container > .slide_next {
	float: right !important;
}
*/