#circle-container-4th{
	width:50vw;
	height: 50vw;
	max-width:80vh;
	max-height:80vh;
	animation: grow-and-speen-22 0.5s ease-in-out;
	/* background: #eee; */
	overflow: visible;
}
.chars-4th{
	height: 50%;
    /* background: rgba(255,255,255,0.3); */
    position: absolute;
    transform-origin: bottom center;
    top: 0;
    padding-top: 10%;
    font-size: 3.5vw;
	min-width: 0.5vw;
	font-weight: 600;
}

.text-wrapper-4th{	
	position: absolute;
	height: 100%;
	width:100%;
	display: flex;
    justify-content: center;
	border-radius: 50%;	
	/* background:#222; */
	transition:width, height 0.3s ease-out;
}
.text-wrapper-4th:hover{
	cursor:pointer;
	width:110%;
	height: 110%;
}
.text-wrapper-4th-flipped .text-wrapper-4th p{
	transform: scaleX(-1) !important;
}


/***** INNER CIRCLE *****/
.inner-circle-4th{
	height: 50%;
    width: 50%;
    position: absolute;
    z-index: 100;
    border-radius: 50%;
	background: rgb(204,204,204);
	background: var(--gradientBW2);
}
.inner-circle-4th,
.inner-circle-4th div{
	display: flex;
	justify-content: center;
	align-items: center;
	border-radius: 50%;
	background: rgb(204,204,204);
}
.inner-circle-4th>div{
	width:97%;
	height: 97%;
	background: var(--gradientBW2);
}
.inner-circle-4th>div>div{
	width:90%;
	height: 90%;
	background: rgb(204,204,204);
	background: var(--gradientBW2);
}
.inner-circle-4th>div>div>div{
	width:95%;
	height: 95%;
	background: rgb(186,186,186);
	background: var(--gradientBW1);
	text-align: center;
	font-size: 2vw;
	color:#8F8F8F;
	display: flex;
	flex-direction: column;
	border:4px solid #eee;
}



.text-wrapper-4th.color-1:hover{
	background: var(--color1) ;
}
.text-wrapper-4th.color-2:hover{
	background: var(--color2);
}
.text-wrapper-4th.color-3:hover{
	background: var(--color3);
}