.half-page-to-full {
  width: 49.7%;
	padding: 0.3em;
	border: 1px solid #777;
	border-radius: 5px;
}
.small-page-to-full {
	width: 74.7%;
}
.small-menu-to-full {
	width: 24.7%;
	min-width: fit-content;
	div {
		display: flex;
		align-items: center;
		padding-left: 0.5em;
		margin-left: 1em;
		height: 2.5em;
		
	}	
	div > span {
		display: none;
	}
}
.small-menu-selected {
	margin-right: 0.5em;
	border-left: 2px solid var(--ct-sky-blue);
}

.container-flex-direction {
  flex-direction: row;
	flex-wrap: wrap;
	gap:0.3em;
}

@media screen and (max-width: 1023px) {
	.container-flex-direction {
		flex-direction: column;
		align-items: center;
	}
	
	.small-menu-selected {
		background-color: var(--ct-sky-blue);
		border-left: none;
		color: white !important;
		font-weight: bold;
	}
	
	.small-menu-to-full {
		width: 100%;
		display: flex;
		flex-wrap: wrap;
		justify-content: space-around;
		border-bottom: 1px solid var(--ct-sky-blue);
		box-shadow: 0 10px 8px -10px var(--ct-sky-blue);
		
		div {
			font-size: 1.1em;
			min-width: fit-content;
			padding-left: 1em;
			padding-right: 1em;
			margin-left: 0;
			margin-right: 0;
		}
		
		div > span {
			display: contents;
		}
		
		div:last-child > span {
			display: none;
		}
	}
	
	.small-page-to-full,
	.half-page-to-full {
		width: 100%;
	}
}