.imageslider {
	
	--widgetHeight: 100vh;
	--footerHeight: 2rem;
	
	--spacing: 2rem;
	--doubleSpacing: calc(2 * var(--spacing));
	--quadSpacing: calc(4 * var(--spacing));
	
	flex-grow: 1;
	-webkit-flex-grow: 1;
	-moz-flex-grow: 1;
	
	display: flex;
	display: -webkit-flex;
	/*
	flex-direction: column;
	-webkit-flex-direction: column;
	-moz-flex-direction: column;
	*/
	
	position: relative;
	top: 0;
	left: 0;
	
	touch-action: pan-x pan-y;
}









.imageslider .itemwrapper {
	
	opacity: 1;
	
	height: auto;/* could be 100%, but allow for #comic align-items: stretch for ios*/
	height: var(--widgetHeight);
	
	position: relative;
	top: 0;
	left: 0;
	
	display: flex;
	display: -webkit-flex;
	
	transition: all 0.6s ease-in-out;
	-webkit-transition: all 0.6s ease-in-out;
	-moz-transition: all 0.6s ease-in-out;
	transition-property: transform, opacity, min-height, height;
	-webkit-transition-property: -webkit-transform, opacity, min-height, height;
	-moz-transition-property: -moz-transform, opacity, min-height, height;
}
.imageslider.dragging .itemwrapper {
	transition: none;
	-webkit-transition: none;
	-moz-transition: none;
}
.imageslider.loading .itemwrapper {
	opacity: 0;
}