.trans-col              {display: grid; gap: 20px; grid-template-columns: repeat(5, minmax(0, 1fr)); align-items: stretch}
@media (max-width: 1199px){.trans-col {grid-template-columns: repeat(4, minmax(0, 1fr))} }
@media (max-width: 767px) {.trans-col {grid-template-columns: repeat(3, minmax(0, 1fr)); gap:10px} }

.trans-block-icon       {min-width:0}
.trans-block-icon a     {width:100%; overflow:hidden; word-break: break-word; background: var(--blocklink); color:var(--blocklinkfont); font:14px 'Roboto'; border-radius:25px; display:flex;flex-direction: column;align-items:center; justify-content:flex-start; text-transform:uppercase; letter-spacing:1px; text-align:center; padding:12px; position:relative; box-shadow: 0 15px 15px rgba(0, 0, 0, 0.15); transition: 0.5s; height:100%; min-height:140px}
.trans-block-icon a .icon-circle{display:flex;align-items:center;justify-content:center;width:52px;height:52px;border-radius:50%;background:var(--blockcircle); color:var(--blocklinkfont);font-size:28px;margin-bottom:12px;line-height:1}
.trans-block-icon a:hover {cursor:pointer; transform: translateY(-3px)}
@media (max-width: 767px) {.trans-block-icon a {font:10px 'Roboto'} }

.trans-tta              {background: var(--ttatr); font: 400 16px/20px "Roboto"; color: var(--ttatrfont); border-bottom: var(--ttlinetr) dotted 1px; margin: 25px 0 15px 0; padding: 15px; text-transform: uppercase; letter-spacing: 0.8px}
.trans-tta:before       {content: "\f101"; font-family: FontAwesome; margin-right:10px}
.trans-ttline           {border-bottom: var(--ttlinetr) dotted 1px; width: 100%; color: var(--ttlinetrfont); font: 400 20px / 23px 'Lato', sans-serif; text-align: left; padding: 0; margin-bottom: 10px; height: 30px; display: display:flex; align-items: center; text-transform: uppercase; letter-spacing: 0.8px}

.trans-linebox          {display: grid; grid-template-columns: 1fr 1fr; gap: 20px}
.trans-linebox .bloco   {display: flex; flex-direction: column; padding: 20px; border: 1px #777 solid; border-radius: 20px; box-sizing: border-box}
.trans-linebox .row:nth-child(even) {background:var(--lineboxtab)}
.trans-linebox .row:nth-child(odd) {background:var(--lineboxpar)}
.trans-linebox .row     {display: flex; align-items: center; min-height: 60px; background: #999; justify-content: space-between}
.trans-linebox .max     {width: 60%; padding: 10px; box-sizing: border-box}
.trans-linebox .min     {width: 40%; padding: 10px; box-sizing: border-box; display: flex; justify-content: flex-end}
.trans-linebox h1       {font: 400 18px/24px 'Roboto'; color:var(--lineboxfont); text-transform: uppercase; letter-spacing:1px}
.trans-linebox h5       {font: 400 13px/16px 'Roboto'; color:var(--lineboxfont); letter-spacing:1px}
.trans-linebox-button a {background-color:var(--linebut); color:var(--linebutfont); font-size: 15px; padding: 10px 20px; border-radius: 20px; cursor: pointer; transition: background-color 0.3s ease}
.trans-linebox-button a:hover{background-color:var(--linebuthov)}
@media (max-width: 940px){
  .trans-linebox        {grid-template-columns: 1fr}
  .trans-linebox .max, .linebox .min {width: 100%}  
  .trans-linebox .bloco:first-child {margin-bottom: 20px}}