/* .............................................................................
HELPERS et AUTRES STYLES
............................................................................. */

/* Uppercase / lowercase */
.tLower {text-transform: none;}
.tUpper {text-transform: uppercase;}


/* Content alignment */
.tCentered {text-align:center;}
.tLeft {text-align:left;}
.tRight {text-align:right;}


/* Colors */
.cBlack {color: var(--color-black); }
.cWhite {color: var(--color-white); }
.cBlue {color: var(--color-blue); }
.cBlueLight {color: var(--color-blue-light); }
.cBlueDark {color: var(--color-blue-dark); }
.cGreen {color: var(--color-green); }

.cBGBlack {background-color: var(--color-black); }
.cBGWhite {background-color: var(--color-white); }
.cBGBlue {background-color: var(--color-blue); }
.cBGBlueLight {background-color: var(--color-blue-light); }
.cBGBlueDark {background-color: var(--color-blue-dark); }
.cBGGreen {background-color: var(--color-green); }


/* Sizes */
.tBig {font-size: 2.3em; line-height: 1.1; }
.tSlightlyBigger {font-size: 1.4em; line-height: 1.2; }
.tSmall {font-size: 0.95em;}

	/* Smaller */
	@media (max-width:62rem) {
		.tBig {font-size: 1.8em; }
	}

	@media (max-width:46rem) {
		.tBig {font-size: 1.4em; }
		.tSlightlyBigger {font-size: 1.3em;}
	}


/* Clips */
.clipHex {clip-path: polygon(50% 0%, 93.3013% 25%, 93.3013% 75%, 50% 100%, 6.6987% 75%, 6.6987% 25%); }


/* Width restrictions */
.tRestrict {max-width: 27.002em;}


/* Text columns */
.tCols2 {columns: 20.002em 2; column-gap: 12.002%;}
.tCols2 > * {break-inside: avoid;}
.tCols2 + *, * + .tCols2 {margin-top: 2.002rem;}

.tCols3 {columns: 15.002em 3; column-gap: 8%;}
.tCols3 > * {break-inside: avoid;}
.tCols3 + *, * + .tCols3 {margin-top: 2.002rem;}


/* Helpers */
.demoIcon .svgIcon {font-size: 3em; margin-top: 0;}
.demoLogos .svgIcon {font-size: 3em; margin-right: 0.5em; margin-top: 0;}
.noWrap {white-space: nowrap;}
.hideText {text-indent: 100%; white-space: nowrap; overflow: hidden; }
.screenReaderText {display:none;}
.softHide {display: none;} /* Difference between hide and softHide: hide has important, softHide doesn't */
.hidden {display: none !important; visibility: hidden;}
.visuallyHidden {border: 0; clip: rect(0 0 0 0); height: 1px; margin: -1px; overflow: hidden; padding: 0; position: absolute; width: 1px;}
.visuallyHidden.focusable:active,
.visuallyHidden.focusable:focus {clip: auto; height: auto; margin: 0; overflow: visible; position: static; width: auto;}
.invisible {visibility: hidden;}
[hidden] {display: none;}