/* .............................................................................
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 */
.cRed {color: var(--color-blue);}


/* Sizes */
.tBig {font-size: 1.35002em; }


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


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

.tCols3 {columns: 15.002em 3; column-gap: 8%;}
.tCols3 > * {break-inside: avoid;}
.tCols3 li {display: inline-block; }
.tCols3 + *, * + .tCols3 {margin-top: 3.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;}