/* Tipos de cilindros */


/* Tipos de cilindros */

#tipos-de-cilindros {
    background: var(--grey-light-0);
}

#tipos-de-cilindros .container {
    padding: 110px 0 107px;
}

#tipos-de-cilindros .title {
    justify-content: space-between;
    border-bottom: 1px solid #BBB2B2;
}

.table-img {
    background: var(--white);
    border: 1px solid var(--blue-primary);
    width: 176px;
    margin-top: 32px;
}

.table img {
    padding: 20px 0 20px;
}

.table table {
    margin-top: 48px;
    font-family: "Heebo Medium";
    font-size: 16px;
    font-weight: 500;
    text-align: center;
}

.table thead {
    background: var(--blue-primary);
    color: white;
}


/* 
.table tbody:before {
   content: "-";
   display: block;
   line-height: 32px;
   color: transparent;
} */

.table thead th {
    padding: 16px;
    margin: 0;
}

.table tr td p {
    position: relative;
    transform: translateY(-100%);
}

.table tr {
    border-bottom: 1px solid #D6D6D6;
}

.card {
    width: 240px;
    height: 157px;
    margin-right: 32px;
    background: var(--white);
    font-family: "Heebo Medium";
    font-size: 18px;
    text-align: center;
    cursor: pointer;
    border: 1px solid transparent;
    margin-top: 48px;
    -webkit-transition: 400ms ease-in;
    -moz-transition: 400ms ease-in;
    -o-transition: 400ms ease-in;
    transition: 400ms ease-in;
}

.card:nth-child(2) {
    margin-top: 16px;
}

.card.active {
    background: var(--blue-primary);
    color: var(--white);
}

.card.active img:nth-child(1),
.card img:nth-child(2) {
    display: none;
}

.card.active img:nth-child(2),
.card img:nth-child(1) {
    display: inline-block;
}

.card.active:hover {
    color: var(--white);
}

.card img {
    margin-top: 36px;
    z-index: 3;
}

.card h3 {
    margin-top: 16px;
    z-index: 3;
}

.card:hover {
    border: 1px solid var(--blue-primary);
    color: var(--blue-primary);
}

@media screen and (max-width: 1199px) {
    /* Tipos de cilindros */
    #tipos-de-cilindros .container .flex-container {
        display: block;
    }
    .cilindros-cards {
        display: flex;
    }
    .cilindros-cards .card:nth-child(2) {
        margin-top: auto;
    }
}

@media screen and (max-width: 767px) {
    #tipos-de-cilindros .container {
        padding: 35px 0 35px;
    }
    .table {
        overflow: scroll
    }
}