Text

Classes related the most common font style properties.

• /* FAMILY */
  .tx-sans {font-family: 'Open Sans', sans-serif}.tx-roman {font-family: 'Times New Roman', Times, serif}
  /* SIZE */
  .tx-xxs {font-size: 0.35rem}.tx-xs {font-size: 0.55rem}.tx-xsm {font-size: 0.725rem}.tx-sm {font-size: 0.845rem}
  .tx-smd {font-size: 0.92rem}.tx-md {font-size: 1.07rem}.tx-mdl {font-size: 1.13rem}.tx-lg {font-size: 1.4rem}
  .tx-lgx {font-size: 1.68rem}.tx-lx {font-size: 2.4rem}.tx-xl {font-size: 3rem}
  .tx-xxl {font-size: 3.4rem}.tx-xxxl {font-size: 4.5rem}
  /* WEIGHT */
  .tx-bold-2 {font-weight: 200}.tx-bold-3 {font-weight: 300}.tx-bold-4 {font-weight: 400}.tx-bold-5 {font-weight: 500}
  .tx-bold-6 {font-weight: 600}.tx-bold-7 {font-weight: 700}.tx-bold-8 {font-weight: 800}
  .tx-bold-9 {font-weight: 900}.tx-bold {font-weight: bold}
  /* COLOR */
  .tx-white {color: white}.tx-black {color: black}.tx-gray{color: gray}
  .tx-red {color: red}.tx-green {color: green}.tx-blue {color: blue}
  .tx-red-50 {color: #ff000077}.tx-green-50 {color: #00ff0077}.tx-blue-50 {color: #0000ff77}
  .tx-red-25 {color: #ff000044}.tx-green-25 {color: #00ff0044}.tx-blue-25 {color: #0000ff44}
  .tx-red-75 {color: #ff0000aa}.tx-green-75 {color: #00ff00aa}.tx-blue-75 {color: #0000ffaa}
  /* ALIGN */
  .tx-center {text-align: center}.tx-end, .tx-right {text-align: right}.tx-start, .tx-left {text-align: left}
  /* LETTERSPACING */
  .tx-lh-100 {line-height: 1}.tx-lh-150 {line-height: 1.5}.tx-lh-200 {line-height: 2}
  .tx-ls-1 {letter-spacing: 1px}.tx-ls-2 {letter-spacing: 2px}.tx-ls-3 {letter-spacing: 3px}
  .tx-ls-5 {letter-spacing: 5px}.tx-ls-6 {letter-spacing: 6px}.tx-ls-8 {letter-spacing: 8px}
  .tx-ls-10 {letter-spacing: 10px}.tx-ls-15 {letter-spacing: 15px}.tx-ls-25 {letter-spacing: 25px}
  /* WORD SPACING */
  .word-s-1 {word-spacing: 1px}.word-s-2 {word-spacing: 2px}.word-s-3 {word-spacing: 3px}
  .word-s-5 {word-spacing: 5px}.word-s-10 {word-spacing: 10px}.word-s-20 {word-spacing: 20px}
  /* STYLE */
  .tx-italic {font-style: italic}.tx-i {font-style: italic}
  .tx-deco, .tx-deco *, .underline, .underline *{text-decoration: underline #777}
  .tx.size-unset{font-size: unset}
  .linethrough{text-decoration: line-through }.linethru{text-decoration: line-through }
  .nodeco{text-decoration: none }.nowrap {white-space: nowrap}
  .nodeco-children, .nodeco-children *{text-decoration: none !important }
  .ellipsis{text-overflow: ellipsis}
  /* SHADOW */
  .custom-shadow { --tx-shadow-x: 3px; --tx-shadow-y: 3px; }
  .tx-shadow-custom { --tx-shadow-x: 1px; --tx-shadow-y: 1px;
  	text-shadow: var(--tx-shadow-x) var(--tx-shadow-y) #00000077;
  }
  .tx-shadow-1{text-shadow: 1px 1px 1px #00000077}.tx-shadow-2{text-shadow: 1px 1px 1px #000000aa}
  .tx-shadow-3{text-shadow: 1px 1px 1px #000000ff}.tx-shadow-4{text-shadow: 1px 1px 1px #000000ff}
  .tx-shadow-5{text-shadow: 1px 1px 1px #000000ff}
  
  .tx-shadow-1-1-sm{text-shadow: 1px 1px 1px #00000077}.tx-shadow-1-2-sm{text-shadow: 1px 2px 1px #00000077}
  .tx-shadow-1-3-sm{text-shadow: 1px 3px 1px #00000077}.tx-shadow-2-1-sm{text-shadow: 2px 1px 1px #000000aa}
  .tx-shadow-2-2-sm{text-shadow: 2px 2px 1px #000000aa}.tx-shadow-2-3-sm{text-shadow: 2px 3px 1px #000000aa}