:root {
	--cx-scroll-layout-pad: 18px;
}

.cx-scroll-placeholder {
	margin-left: auto;
	margin-right: auto;
	overflow: hidden;
	position: relative;
}

	.cx-scroll-placeholder * {
		box-sizing: content-box;
	}

	/* root element for the scrollable. when scrolling occurs this element stays still.  */
	.cx-scroll-placeholder > .cx-scroll-container {
		position: relative;
		overflow: hidden;
		margin-left: -1px; /*for item shadow adjustment*/
		margin-right: -1px; /*for item shadow adjustment*/
		padding: var(--cx-scroll-layout-pad);
	}

		/*
   root element for scrollable items. Must be absolutely positioned
   and it should have a extremely large width to accomodate scrollable
   items.  it's enough that you set the width and height for the root
   element and not for this element.
*/
		/* this cannot be too large */
		.cx-scroll-placeholder > .cx-scroll-container > .cx-scroll-group {
			display: flex;
			position: relative;
			margin: 0 auto;
		}

			/* single scrollable item */
			.cx-scroll-placeholder > .cx-scroll-container > .cx-scroll-group > .cx-scroll-block {
				display: flex;
				position: relative;
			}




	/*  prev, next, up , down buttons */
	.cx-scroll-placeholder > a.fx-browse {
		z-index: 1;
		cursor: pointer;
		position: absolute;
		display: flex;
		flex-wrap: nowrap;
		align-content: center;
		justify-content: center;
		align-items: center;
		visibility: hidden;
	}

		/*  prev, next buttons */
		.cx-scroll-placeholder > a.fx-browse.fx-horizontal {
			flex-direction: row;
			width: calc(var(--cx-scroll-layout-pad) * 2);
			top: 0;
			bottom: 0;
		}

			.cx-scroll-placeholder > a.fx-browse.fx-horizontal.fx-transparent {
				top: calc(var(--cx-scroll-layout-pad) * 2);
				bottom: calc(var(--cx-scroll-layout-pad) * 2);
			}


			/* left */
			.cx-scroll-placeholder > a.fx-browse.fx-horizontal.fx-left {
				left: 0;
			}

			/* right */
			.cx-scroll-placeholder > a.fx-browse.fx-horizontal.fx-right {
				right: 0;
			}

		/* up and down buttons */
		.cx-scroll-placeholder > a.fx-browse.fx-vertical {
			flex-direction: column;
			height: calc(var(--cx-scroll-layout-pad) * 2);
			left: 0;
			right: 0;
		}

			.cx-scroll-placeholder > a.fx-browse.fx-vertical.fx-transparent {
				left: calc(var(--cx-scroll-layout-pad) * 2);
				right: calc(var(--cx-scroll-layout-pad) * 2);
			}

			.cx-scroll-placeholder > a.fx-browse.fx-vertical.fx-up {
				top: 0;
			}

			.cx-scroll-placeholder > a.fx-browse.fx-vertical.fx-down {
				bottom: 0;
			}

	/* disabled navigational button */
	.cx-scroll-placeholder > a.fx-disabled {
		visibility: hidden !important;
	}

	.cx-scroll-placeholder > a.fx-browse:hover {
		background-color: rgba(108, 91, 176, 0.2);
	}

	.cx-scroll-placeholder > a.fx-browse > img {
		display: block;
	}


@media only screen and (max-width: 480px) {
	:root {
		--cx-scroll-layout-pad: 12px;
	}

	.cx-scroll-placeholder > .cx-scroll-container {
		/*padding-left: 0;
		padding-right: 0;*/
		padding:0;
	}

	.cx-scroll-placeholder > a.fx-browse {
		display: none !important;
	}
}