#colorContrastRatio {
	font-family: 'Barlow Semi Condensed', sans-serif;
	font-size: 3.6rem;
	font-weight: 700;
	line-height: 4.8rem; /*5.6*/
	margin: 0;	
	color: var(--n20) !important;	
}


p.sample {
	font-family: 'Roboto Slab', serif;
	display: block;
	margin: 0;	
}
p.label.invert {
	color: var(--n100);
}

.sample-wrapper {
	min-height: 8rem;	
	overflow: hidden;
	display: flex;
	align-content: center;
	align-items: center;
}


.color-preview {
	display: flex;
	flex-direction: row;
	column-gap: var(--sp400);
	row-gap: var(--sp400);
	align-items: stretch;
}

.color-preview .item {
	display: flex;
	flex-direction: column;
	column-gap: var(--sp100);
	row-gap: var(--sp100);		
	width: 100%;
}

.color-preview .preview {
	display: flex;
	flex-direction: column;
	column-gap: var(--sp200);
	row-gap: var(--sp200);
	height: 100%;
	padding: var(--sp400);	
}
.color-preview .preview.border {
	outline: 1px solid var(--n60);
}

.color-preview .item.preview-graphic {
	flex: 0 0 calc((100% - 8rem)/3);
}

.color-preview .item.preview-text {
	/*flex: 0 0 calc((100% - 2rem)/3*2);*/
}

.svg-wrapper {
	display: flex;	
	align-items: center;
	justify-content: center;
	height:  100%;
}

.svg-wrapper svg path {
	
}


/* ------------------------------------------------------------ */
/* ------------------------------ */
/* RESPONSIVE */
/* ------------------------------ */
/* < 640 ------------------------------------------------------------ */
	@media screen and (max-width: 640px) {

		.color-preview {
			flex-direction: column;
		}
		/*
		.color-preview .item.preview-graphic {
			flex: 0 0 calc((100%));
		}

		.color-preview .item.preview-text {
			flex: 0 0 calc((100%));
		}	*/	

	}
/* 640 ------------------------------------------------------------ */
	@media (max-width:767px) and (min-width:640px) {	
		/*
		.color-preview .item.preview-graphic {
			flex: 0 0 calc((50%));
		}

		.color-preview .item.preview-text {
			flex: 0 0 calc((50%));
		}	
		*/	
		.color-preview {
			flex-direction: column;
		}			

	}
/* 768 ------------------------------------------------------------ */
	@media (max-width:1023px) and (min-width:768px) {
		/*
		.color-preview .item.preview-graphic {
			flex: 0 0 calc((50%));
		}
		.color-preview .item.preview-text {
			flex: 0 0 calc((50%));
		}
		*/
		.form-wrapper.font form {
			flex-direction: column;	
		}
		.form-wrapper.font form .input-wrapper {
			width: 100%;
		}		

	}
/* 1024 ------------------------------------------------------------ */
	@media (max-width:1279px) and (min-width:1024px) {



	}	
/* 1280 ------------------------------------------------------------ */
	@media (max-width:1919px) and (min-width:1280px) {



	}
/* 1440 ------------------------------------------------------------ */
	@media (max-width:1919px) and (min-width:1440px) {



	}	
/* 1920 ------------------------------------------------------------ */
	@media (max-width:2559px) and (min-width:1920px) {



	}
/* > 2560 ------------------------------------------------------------ */
	@media screen and (min-width: 2560px) {



	}