/* Created by Content Blocks */
.parallax-container {
	display: grid;
	grid-template-columns: repeat(12, minmax(30px, 1fr));
	grid-template-rows: 0px;
	height: 100%;
	.item a:has(strong) {
		min-width: initial !important;
	}
	.col-1 {
		grid-column-start: 1;
	}

	.col-2 {
		grid-column-start: 2;
	}

	.col-3 {
		grid-column-start: 3;
	}
	.col-4 {
		grid-column-start: 4;
	}
	.col-5 {
		grid-column-start: 5;
	}
	.col-6 {
		grid-column-start: 6;
	}
	.col-7 {
		grid-column-start: 7;
	}
	.col-8 {
		grid-column-start: 8;
	}
	.col-9 {
		grid-column-start: 9;
	}
	.col-10 {
		grid-column-start: 10;
	}
	.col-11 {
		grid-column-start: 11;
	}
	.col-12 {
		grid-column-start: 12;
	}

	.icon {
		margin: 0 auto;
		text-align: center;
		display: inline-block;
		max-width: 40px;
		margin-bottom: 10px;

		
		@media screen and (min-width: 760px) {
			max-width: 50px;
		}
		@media screen and (min-width: 1261px) {
			max-width: 60px;
		}
	}

	.item {
		width: 160px;
		height: 160px;
		border-radius: 100%;
		text-align: center;
		align-content: center;
		letter-spacing: 0.5px;
		font-family: "Forza Bold",Helvetica,sans-serif;

		.inner {
			transform: translateX(-50%);
			height: 100%;
			border-radius: 100%;
			align-content: center;
			background: #00CCD6;
			background-size: cover;
			display: grid;
			align-items: center;
		}



		&.blue .inner , &.yellow .inner {
			color: #000000;
			background-size: cover;
			.text {
				color: #000000 !important;
			}
		}
		&.yellow .inner{
			background: #D3FE00;
			background-size: cover;
			.text {
				color: #000000 !important;
			}
		}
		
		&.white .inner{
			background: #fff;
			background-size: cover;
			.text {
				color: #000000 !important;
			}
		}

		&.black .inner{
			background: #000;
			color: #fff;
			background-size: cover;
			.text {
				color: #fff !important;
			}
		}

		&.size-S {
			width:  120px;
			height: 120px;
			
			@media screen and (min-width: 760px) {
				width:  140px;
				height: 140px;
			}
			@media screen and (min-width: 1261px) {
				width:  160px;
				height: 160px;
			}
			
			&.scale-S {
				width:  110px;
				height: 110px;
				
				@media screen and (min-width: 760px) {
					width:  120px;
					height: 120px;
				}
				@media screen and (min-width: 1261px) {
					width:  140px;
					height: 140px;
				}
			}
			&.scale-L {
			
					width:  130px;
					height: 130px;
					
					@media screen and (min-width: 760px) {
						width:  160px;
						height: 160px;
					}
					@media screen and (min-width: 1261px) {
						width:  180px;
						height: 180px;
					}
				
			}
			.text, p {
				font-size: 0.76rem;
				line-height: 1.2;
				
				@media screen and (min-width: 760px) {
					font-size: 0.68rem;attributes
				}
				@media screen and (min-width: 1261px) {
					font-size: 1.125rem;
					line-height: 1.2;
				}
			}
		}

		&.size-M {
			width:  180px;
			height: 180px;
			
			@media screen and (min-width: 760px) {
				width:  180px;
				height: 180px;
			}
			@media screen and (min-width: 1261px) {
				width:  280px;
				height: 280px;
			}
			
			
			&.scale-S {
				width:  160px;
				height: 160px;
				
				@media screen and (min-width: 760px) {
					width:  160px;
					height: 160px;
				}
				@media screen and (min-width: 1261px) {
					width:  260px;
					height: 260px;
				}
			}
			&.scale-L {
				width:  200px;
				height: 200px;
				
				@media screen and (min-width: 760px) {
					width:  200px;
					height: 200px;
				}
				@media screen and (min-width: 1261px) {
					width:  300px;
					height: 300px;
				}
			}
			.text, p {
				font-size: 0.76rem;
				line-height: 1.2;
				
				@media screen and (min-width: 760px) {
					font-size: 0.68rem;attributes
				}
				@media screen and (min-width: 1261px) {
					font-size: 1.25rem;
					line-height: 1.2;
				}
				
			}
		}

		&.size-L {
			width:  240px;
			height: 240px;
			
			@media screen and (min-width: 760px) {
				width:  340px;
				height: 340px;
			}
			@media screen and (min-width: 1261px) {
				width:  540px;
				height: 540px;
			}

			&.scale-S {
				width:  220px;
				height: 220px;
				
				@media screen and (min-width: 760px) {
					width:  320px;
					height: 320px;
				}
				@media screen and (min-width: 1261px) {
					width:  520px;
					height: 520px;
				}
			}
			&.scale-L {
				width:  260px;
				height: 260px;
				
				@media screen and (min-width: 760px) {
					width:  360px;
					height: 360px;
				}
				@media screen and (min-width: 1261px) {
					width:  560px;
					height: 560px;
				}
			}
			.text, p{
				font-size: 0.76rem;
				line-height: 1.2;
				
				@media screen and (min-width: 760px) {
					font-size: 0.68rem;attributes
				}
				@media screen and (min-width: 1261px) {
					font-size: 1.125rem;
					line-height: 1.2;
				}
			}
		}

		&.size-Zierbubble {
			width: 80px;
			height: 80px;

			&.scale-S {
				width:  60px;
				height: 60px;
			}
			&.scale-L {
				width:  100px;
				height: 100px;
			}
			.text, .icon{
				display: none;
			}
		}

		.inner:has(.text) {
			.icon {
				transform: translateY(30%);
			}
		}
	}
}

.parallax-container .text .text-end {
	text-align: right;
	padding-right: 10px;
}

body:has(.parallax-container) {
	overflow-x: hidden;
}

.inner:has(.parallax-container) {
	height: 100%;
	.parallax-container {
		height: 100%;
	}
}