.tm-table-home ul {
padding: 0;
margin: 0;
}
.bad-table div, .good-table div {
display: flex;
justify-content: start;
align-items: center;
gap: 6px;
margin-bottom: 8px;
}
.tm-table-home .info-tm-table {
list-style: none;
background: var(--tm-grey);
padding: 12px 48px 12px 48px;
display: grid;
gap: 40px;
grid-template-columns: 1fr 1fr;
border-radius: 0px 20px 20px 0px;
color: #4e4e4ed4;
z-index: 1;
line-height: 24px;
height: 112px;
border: var(--tm-border);
border-top: unset;
}
.tm-table-home li {
list-style: none;
display: grid;
grid-template-columns: 0.21fr 1fr;
align-items: center;
margin: auto;
position: relative;
max-width: 880px;
height: 100%;
}
.table-title {
padding: 132px 10px 0 6px;
}
.tm-table-home .shape.layer-3 {
position: absolute;
transform: rotate(-103deg);
top: 307px;
}
body {
overflow-x: hidden;
}
.position-relative.tm-table-shape img {
position: absolute;
right: -62px;
margin-top: -400px;
transform: rotate(2deg)!important;
}
.type-table {
list-style: none;
display: flex;
color: var(--tm-dark-blue);
justify-content: center;
align-items: center;
text-align: center;
height: 100%;
overflow: hidden;
border: var(--tm-border);
background: var(--tm-grey);
border-right: none;
border-top: unset;
position: relative;
}
.tm-table-home li strong, .type-table {
font-size: 14px;
font-weight: 700;
line-height: 20px;
border-radius: 20px 0px 0px 20px;
letter-spacing: 0;
}
.bad-table, .good-table {
display: flex;
flex-direction: column;
font-size: 16px;
}
.bad-table img, .good-table img {
width: 18px;
height: 18px;
}
.bad-table p, .good-table p {
margin: 0;
padding: 0;
}
.type-table {
padding: 20px;
}
.bad-table strong {
color: #EB5B5C;
}
.good-table strong {
color: #1DD39A;
}
.alert-table strong {
color: #3F71F1;
}
.hi-lumi-table {
position: absolute;
right: 78px;
top: 456px;
height: 124px;
z-index: -1;
}
.table-title .type-table, .tm-table-home .table-title .info-tm-table {
border: unset;
background: unset;
border-radius: 20px 0px 0px 20px;
letter-spacing: -0.2px;
color: var(--tm-dark-blue);
gap: 28px;
padding: 24px 45px 12px 45px;
}
.table-title .good-table, .table-title .bad-table {
font-size: 22px;
font-weight: 800;
letter-spacing: -0.2px;
text-align: left;
}
.title-monitoria-type {
color: var(--tm-dark-blue) !important;
margin-bottom: 22px;
height: 36px;
display: flex;
align-content: center;
flex-wrap: wrap;
font-size: 14px !important;
}
.title-monitoria-type {
display: none;
}
.no-boder-top .info-tm-table, .no-boder-top .type-table {
border-top: var(--tm-border);
}
.tm-table-mob {
margin-bottom: -20px;
}
@media (max-width: 853px) {
.tm-table-mob {
display: block;
margin-bottom: -24px;
}
.tm-table-home ul {
padding: 0;
margin: 0;
margin-top: 100px;
}
.line, .line-zero {
transition: height 0.4s;
position: absolute;
left: 65px;
border-radius: 100px;
background: #000;
top: 209px;
width: 6px;
left: calc(50% - 2px);
background: #eaeaea;
border-radius: 100px;
}
.line-1, .line.line-2, .line.line-3, .line.line-4, .line.line-5, .line.line-6, .line.line-7, .line.line-8 {
background: var(--tm-blue);
position: absolute;
animation: animateLine 1s linear;
}
.line-2 {
height: 0;
}
.line-3 {
height: 7.5%;
}
.videos-area li:nth-child(3) .dot-video {
top: 90px
}
.videos-area li:nth-child(4) .dot-video {
top: 82px
}
.line-4 {
height: 22%;
}
.line-5 {
height: 40%;
}
.line-6 {
height: 58%;
}
.line-7 {
height: 74%;
}
.line-8 {
height: 77%;
}
.line-zero {
height: 76%;
}
.title-monitoria-type {
display: block;
}
.table-title {
padding: 80px 10px 0 6px;
display: none !important;
}
.tm-table-home-fixed {
position: fixed !important;
top: 0;
z-index: 2;
background: linear-gradient(0deg, rgba(255, 255, 255, 1) -100%, rgba(0, 0, 0, 0) 10%, rgb(255 255 255) 40%);
text-align: center;
height: 70px !important;
gap: 0px;
padding: 10px 14px 124px 8px;
}
.tm-table-home li:nth-child(10) {
margin-bottom: 0;
}
.tm-table-home-fixed .type-table, .tm-table-home .tm-table-home-fixed .info-tm-table {
margin-right: 22px;
}
.table-title .good-table, .table-title .bad-table {
font-size: 14px;
}
.good-table, .bad-table, .good-table strong, .bad-table strong, .info-tm-table strong {
font-size: 14px;
line-height: 22px;
}
.table-title .good-table, .table-title .bad-table {
font-size: 16px;
line-height: 22px;
}
.type-table {
z-index: 100;
font-size: 16px;
border-radius: 20px 20px 0px 0px;
border: unset;
padding: 16px 20px;
color: white;
border-bottom: unset;
background: #eaeaea;
letter-spacing: 0.2px;
}
.tm-table-home li:nth-child(9) .type-table {
border-bottom: unset;
}
.tm-table-home li {
grid-template-columns: 1fr;
margin-bottom: 80px;
}
.tm-table-home .info-tm-table {
gap: 0;
height: auto;
padding: 0;
border-radius: 0;
border: var(--tm-border);
border-top: unset;
border-right: unset;
}
.tm-table-home li:nth-child(7) .info-tm-table, .tm-table-home li:nth-child(9) .info-tm-table, .tm-table-home li:nth-child(9) .type-table {
border-bottom: var(--tm-border) !important;
}
section.tm-table-home {
padding: 0 16px;
}
.table-title .info-tm-table {
padding: 18px 10px 20px 12px !important;
gap: 40px;
align-items: center;
}
.bad-table div, .good-table div {
flex-direction: row;
align-items: flex-start;
}
.tm-table-home-fixed {
-webkit-animation-duration: 0.8s;
animation-duration: 0.8s;
-webkit-animation-fill-mode: both;
animation-fill-mode: both;
-webkit-animation-name: fadeIn;
animation-name: fadeIn;
}
@keyframes fadeIn {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
.tm-fadeOut-table {
-webkit-animation-duration: 0.4s;
animation-duration: 0.4s;
-webkit-animation-fill-mode: both;
animation-fill-mode: both;
-webkit-animation-name: fadeIn;
animation-name: tm-fadeOut-table;
}
.tm-table-home h2 {
display: flex;
align-items: center;
font-size: 18px;
font-weight: 800;
letter-spacing: -0.2px;
justify-content: center;
width: 100%;
text-align: center;
line-height: 28px;
gap: 38px;
position: relative;
z-index: 11;
}
@keyframes tm-fadeOut-table {
from {
opacity: 1;
}
to {
opacity: 0;
}
}
h2.tm-desk-title.less-mobile-padding.display-none-desktop span:first-child {
max-width: 100px;
}
.bad-table, .good-table {
border: var(--tm-border);
border-bottom: 0;
border-top: unset;
padding: 24px 10px 24px 16px;
}
.table-margin {
padding: 0px 0px 8px 0;
margin: 0 !important;
}
strong.title-monitoria-type {
height: auto;
margin: 0;
}
.bad-table {
border-right: unset;
border-left: unset;
}
.bad-table div, .good-table div {
gap: 8px;
margin: 0 0 24px 0;
}
.bad-table-description.mobile-table-description {
margin: 0;
}
.tm-table-home li:nth-child(5) .good-table.alert-table {
border-left: unset !important;
}
.info-tm-table {
border-left: unset;
}
.tm-table-home li:nth-child(7) .type-table {
border: unset;
}
.tm-table-home li:before {
content: "";
position: absolute;
bottom: -8px;
width: 100%;
z-index: 11;
background: #eaeaea;
height: 10px;
border-radius: 0px 0px 10px 10px;
}
.full-back-title-1, .full-back-title-2, .full-back-title-3, .full-back-title-4, .full-back-title-5, .full-back-title-6, .full-back-title-7 {
transition: 0.6s;
}
.partner {
margin-top: 36px;
}
.type-table:before {
background: var(--tm-blue);
position: absolute;
top: 0;
content: "";
left: 0;
width: 100%;
height: 0;
z-index: -1;
opacity: 0;
transition: 0.4s all ease;
}
.type-table:after {
content: "";
background: var(--tm-blue);
transform: scaleY(0);
transform-origin: top;
transition: transform 0.3s ease;
}
.full-back-title-1:before, .full-back-title-2:before, .full-back-title-3:before, .full-back-title-4:before, .full-back-title-5:before, .full-back-title-6:before, .full-back-title-7:before {
height: 100%;
transition: 0.4s all ease;
opacity: 1;
}
.tm-table-home li:after {
content: "";
position: absolute;
opacity: 0;
bottom: -8px;
width: 100%;
z-index: 11;
background: #eaeaea;
height: 10px;
border-radius: 0px 0px 10px 10px;
transform: scaleY(0);
transform-origin: top;
transition: transform 0.3s ease;
}
li.full-back-li-1:after, li.full-back-li-2:after, li.full-back-li-3:after, li.full-back-li-4:after, li.full-back-li-5:after, li.full-back-li-6:after, li.full-back-li-7:after {
background: var(--tm-blue);
transition: 0.4s all ease;
z-index: 11111;
opacity: 1;
transform: scaleY(1) !important;
}
.second-title-table {
height: auto;
border-radius: unset;
}
}
@media (min-width: 200px) and (max-width: 1250px) {
.hi-lumi-table {
display: none;
}
}