/*
https://medium.com/@marcusmichaels/how-to-build-a-carousel-from-scratch-in-vanilla-js-9a096d3b98c9
*/

/*
<div class="carousel_ribbon-wrapper">
  <div class="carousel_ribbon">    
	<img class="carousel_item initial"
*/

#popupContent {
	position: absolute; /*relative;*/
}



.carousel_ribbon-wrapper {
overflow: hidden;
position: relative;	/* NEEDED: to apply overflow:hidden and force size to absolute contents */
}


.carousel_ribbon {
	transform-style: preserve-3d;
	position: absolute;	/* for relative children */
	top:0; left: 0; right:0; bottom:0;
}


.carousel_item {
	h_eight:100%;
	w_idth: 100%;

 	vertical-align: top;

	opacity: 0;
h_eight: 0 !important;
	position: absolute;

	padding: 0;
	margin: auto;
	z-index: 100;
	transition: transform 1s;	/* , opacity 1s; */
/*	transition: transform 1s , opacity 1s; */

	/* default values, to try to stop crap Safari on iPad from randomly crashing */
	transform: none;
	left:-9999px;
}

/*
.carousel_item > .slide_img_box > img.lazy_load1 {
	width: 0 !important;
}
*/

.carousel_item.ci_left_to_center 		,
.carousel_item.ci_right_to_center  		{
	opacity: 1;
	p_osition: relative;
position: absolute;
	z-index: 900;

h_eight: 100% !important;
}

/*
.carousel_item.ci_left_to_center  > .slide_img_box > img.lazy_load1 ,
.carousel_item.ci_right_to_center  > .slide_img_box > img.lazy_load1 
 {
	width: 100% !important;
}
*/
 
.carousel_item.ci_left_to_center.ci_center_to_left		,
.carousel_item.ci_left_to_center.ci_center_to_right		,
.carousel_item.ci_right_to_center.ci_center_to_left		,
.carousel_item.ci_right_to_center.ci_center_to_right		{
	z-index: 800;
	position: absolute;
	opacity: 1;	/* 0 for fadeout. if non-zero, DON'T have a transition for opacity (or else ghosts will fly around when reverting to plain carousel_item */
}


/* --------- comes in from left to start with ----------------------------- */
.carousel_item.ci_left_to_center {
	l_eft:-100%;
margin-left:-100%;
left:0;
	transform: translateX(100%); 
}

/* back to where it started */
.carousel_item.ci_left_to_center.ci_center_to_left {
	transform: translateX(0); 
}

.carousel_item.ci_left_to_center.ci_center_to_right {
	transform: translateX(200%); 
}

/* --------- comes in from right to start with ----------------------------- */
.carousel_item.ci_right_to_center {
margin-right:-100%;
right:0;
	transform: translateX(-100%); 
}

.carousel_item.ci_right_to_center.ci_center_to_right {
	transform: translateX(0); 
}

.carousel_item.ci_right_to_center.ci_center_to_left {
	transform: translateX(-200%);
}