/* ----------------------------------------------------------------
	Custom SCSS

	Add all your Custom Styled CSS here for New Styles or
	Overwriting Default Theme Styles for Better Handling Updates
-----------------------------------------------------------------*/
/* auto slide */
.banner-text{
	color: #122357;
	display: inline-block;
	width: 100%;
	font-weight: bold;
}

/* auto slide */
.slider-auto {
	width: 100%;
	height: fit-content;
	overflow: hidden;
}
.slider-auto .items {
	width: fit-content;
	display: flex;
	animation: slidemin 5s linear infinite;
}
.slider-auto .item {
	border-radius: 5mm;
	white-space: nowrap;
}
@media(min-width:1px){
	.banner-text{
		font-size: 20px;
	}
	.slider-auto .items {
		animation: slidelowest 3s linear infinite;
	}
}

@media(min-width:767px){
	.banner-text{
		font-size: 30px;
	}
	.slider-auto .items {
		animation: slidelow 5s linear infinite;
	}
}

@media(min-width:991px){
	.banner-text{
		font-size: 50px;
	}
	.slider-auto .items {
		animation: slidemid 5s linear infinite;
	}
}

@media(min-width:1200px){
	.banner-text{
		font-size: 100px;
	}
	.slider-auto .items {
		animation: slidemax 10s linear infinite;
	}
}

@keyframes slidemax {
	0% {
		transform: translateX(0);
	}
	100% {
		transform: translateX(-1570px);
	}
}

@keyframes slidemid {
	0% {
		transform: translateX(0);
	}
	100% {
		transform: translateX(-790px);
	}
}

@keyframes slidelow {
	0% {
		transform: translateX(0);
	}
	100% {
		transform: translateX(-485px);
	}
}

@keyframes slidelowest {
	0% {
		transform: translateX(0);
	}
	100% {
		transform: translateX(-330px);
	}
}