.databoxesContainer
{
	display: flex;
    flex-direction: row;
}

.databoxesContainer .databoxContainer
{
	flex: 1;
    aspect-ratio: 1/1;
	cursor: initial;
	overflow: hidden;
}

.databoxesContainer .databoxContainer .databoxContentContainer
{
	position: absolute;
	
	box-sizing: border-box;
	
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
	width: 100%;
    height: 100%;
    background: #1c3156a3;
	padding: 1.5em;
    backdrop-filter: blur(4px);
		
	color: white;
	
	transition: all 0.5s ease-in-out;
}

.databoxesContainer .databoxContainer .databoxContentContainer:after
{
	position: absolute;
    top: 0;
	
	opacity: 1;
   
    font-style: normal;
    font-variant: normal;
    font-weight: 400;
    line-height: 1;
    font-family: "Font Awesome 5 Free Solid";
    font-weight: 900;
    line-height: inherit;
    vertical-align: baseline;
    content: "";
	-webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
	
	transition: all 0.5s 0s ease-in-out;
}

.databoxesContainer .databoxContainer:hover .databoxContentContainer:after,
.databoxesContainer .databoxContainer.databoxShowing .databoxContentContainer:after
{
	opacity: 0;
}

.databoxesContainer .databoxContainer:hover .databoxContentContainer,
.databoxesContainer .databoxContainer.databoxShowing .databoxContentContainer
{
    top: 0%;
}

.databoxesContainer .databoxContainer.databoxShowing:has(~ .databoxContainer:hover) .databoxContentContainer:after
{
	opacity: 1;
}

.databoxesContainer .databoxContainer .databoxContentContainer,
.databoxesContainer .databoxContainer.databoxShowing:has(~ .databoxContainer:hover) .databoxContentContainer
{
    top: calc(100% - 1em);
}

.databoxesContainer .databoxContainer .databoxContentContainer h6
{
	margin: 0;
	
	font-size: 1.4em;
    font-weight: 900;
    text-transform: uppercase;
    text-align: center;
}

.databoxesContainer .databoxContainer .databoxContentContainer p
{
    font-size: 1.1em;
    font-weight: 300;
	text-align: center;
}


@media (max-width: 800px)
{
	.databoxesContainer
	{
		flex-direction: column;
	}
	
	.databoxesContainer .databoxContainer
	{
		width: 100%;
	}
	
	.databoxesContainer .databoxContainer .databoxContentContainer:after
	{
		opacity: 0;
		top: 0;
	}	
	
	.databoxesContainer .databoxContainer .databoxContentContainer
	{
		top: 100%;
	}
}