.banner {
	width: 100%;
	--base_banner_height: 24px;
	--banner_height: var(--base_banner_height); /*default*/
	--base_dot_size: 4.2vw;
	--dot_size: var(--base_dot_size); /*default*/
	height: min(var(--dot_size), var(--banner_height));

	background-image: url(../../docs/banners/banner_1.svg); /*default*/
	background-size: contain;
	background-repeat: repeat;
	background-position-x: 0%;

	animation-duration: 10s; /*default*/
	animation-name: slide_svg;
	animation-iteration-count: infinite;
	animation-timing-function: linear;
	animation-direction: normal;
	animation: none;
}
@keyframes slide_svg {
	from {background-position-x: 0%;}
	to   {background-position-x: 100%;}
}



/*
* speeds
*
*/
.banner_pause {
	animation-play-state: paused;
}
.banner_reverse {
	animation-direction: reverse;
}
.banner_speed_10 {
	animation-duration: 10s;
}
.banner_speed_20 {
	animation-duration: 20s;
}
.banner_speed_30 {
	animation-duration: 30s;
}
.banner_speed_40 {
	animation-duration: 40s;
}
.banner_speed_50 {
	animation-duration: 50s;
}



/*
* sizes
*
*/
.banner_size_0 {
	background-image: url(../../docs/banners/banner_0.svg);
	--banner_height: calc(var(--base_banner_height) * 1);
	--dot_size: calc(var(--base_dot_size) * 1);
}
.banner_size_00 {
	background-image: url(../../docs/banners/banner_00.svg);
	--banner_height: calc(var(--base_banner_height) * 1);
	--dot_size: calc(var(--base_dot_size) * 1);
}
.banner_size_1 {
	background-image: url(../../docs/banners/banner_1.svg);
	--banner_height: calc(var(--base_banner_height) * 1);
	--dot_size: calc(var(--base_dot_size) * 1);
}
.banner_size_2 {
	background-image: url(../../docs/banners/banner_2.svg);
	--banner_height: calc(var(--base_banner_height) * 2);
	--dot_size: calc(var(--base_dot_size) * 2);
}
.banner_size_3 {
	background-image: url(../../docs/banners/banner_3.svg);
	--banner_height: calc(var(--base_banner_height) * 3);
	--dot_size: calc(var(--base_dot_size) * 3);
}
.banner_size_4 {
	background-image: url(../../docs/banners/banner_4.svg);
	--banner_height: calc(var(--base_banner_height) * 4);
	--dot_size: calc(var(--base_dot_size) * 4);
}
.banner_size_5 {
	background-image: url(../../docs/banners/banner_5.svg);
	--banner_height: calc(var(--base_banner_height) * 5);
	--dot_size: calc(var(--base_dot_size) * 5);
}