.introduction {
grid-template: "title img" "text img" "text2 text2" "link catalog" / 1fr 1fr;
}
.introduction.imageless {
grid-template: "title ." "text text" "text2 text2" "link catalog" / 1fr 1fr;
}
.introduction.catalogless {
grid-template: "title img" "text img" "text2 text2" "link link" / 1fr 1fr;
}
.introduction.catalogless.imageless {
grid-template: "title" "text" "text2" "link" / 1fr;
}
.introduction__text:nth-of-type(2) {
grid-area: text2;
}
.introduction-link {
justify-self: end;
display: flex;
gap: 16px;
justify-content: center;
align-items: center;
width: 300px;
padding: 10px 5px;
box-shadow: 0px 0px 16px 7px rgba(8, 15, 52, 0.06);
line-height: 14px;
font-size: 14px;
height: 40px;
}
.introduction-link+.introduction-link {
grid-area: catalog;
justify-self: start;
background: white;
color: black;
}
.introduction-link+.introduction-link:hover {
color: black;
box-shadow: 0px 0px 15px 8px rgba(8, 15, 52, 0.075);
}
.introduction-link:hover {
text-decoration: none;
}
.introduction-link__img {
margin-left: 5px;
max-width: 55px;
max-height: 25px;
}
.tables-buttons {
border-radius: 25px;
background: #FFF;
width: 1000px;
height: 100px;
gap: 40px;
align-items: center;
margin: 70px auto 0;
box-shadow: 0px 5px 16px 0px rgba(8, 15, 52, 0.06);
}
.tables-buttons__1,
.tables-buttons__2 {
width: 450px;
height: 80px;
padding: 10px 15px 10px 23px;
gap: 16px;
border-radius: 25px;
border: 1px solid #366CCD;
background: #FFF;
color: #1D1D1F;
font-family: Manrope;
font-size: 22px;
font-weight: 700;
line-height: 16.8px;
}
.tables-buttons__1.active,
.tables-buttons__2.active {
background: #366CCD;
color: #FFF;
}
.pump-info {
display: grid;
gap: 10px;
color: #4C525F;
font-family: Nunito Sans;
font-size: 18px;
font-weight: 400;
line-height: 170%;
margin-top: 50px;
padding: 40px;
border-radius: 25px;
background: #FFF;
box-shadow: 0px 5px 16px 0px rgba(8, 15, 52, 0.06);
}
.pump-info__img {
width: 100%;
}
.pump-info__text {
margin: 0;
}
.pump-info__text:nth-of-type(2n) {
grid-column: span 2;
}
.pump-info__text:not(.active),
.pump-info__img:not(.active) {
display: none !important;
}
.pump-info .introduction-link {
grid-area: auto;
justify-self: auto;
margin-top: 20px;
justify-self: flex-start!important;
}
.tables {
border-radius: 25px;
background: #FFF;
box-shadow: 0px 5px 16px 0px rgba(8, 15, 52, 0.06);
padding: 40px 80px;
margin-top: 50px;
}
.tables__title {
color: #4C525F;
font-family: Nunito Sans;
font-size: 24px;
font-weight: 800;
line-height: 140%;
}
.tables__info-first,
.tables__info-second,
.dataTables_wrapper {
display: none;
}
.tables__info-first,
.tables__info-second {
margin: 16px 0 25px 0;
}
.dataTables_wrapper {
width: 100%;
}
.dataTables_wrapper.active {
display: table;
}
.tablepress tr:hover {
background-color: #f5f5f5;
}
.tablepress tr td:first-child {
cursor: pointer;
}
.dataTables_wrapper label,
.dataTables_wrapper caption,
.dataTables_wrapper .dataTables_info,
.dataTables_wrapper .dataTables_paginate,
.dataTables_filter {
display: none !important;
}
.tables__info-first.active,
.tables__info-second.active {
display: block;
}
.tables__info-first b,
.tables__info-second b {
color: #4C525F;
font-family: Nunito Sans;
font-size: 18px;
font-style: normal;
font-weight: 800;
line-height: 170%;
}
.accordion,
.accordion .accordion-item:first-child,
.accordion .accordion-item:first-child .accordion-button {
border-radius: 25px 25px 0 0;
}
.accordion-button {
padding: 20px 35px;
font-family: Manrope;
font-size: 18px;
font-weight: 700;
line-height: 16.8px;
z-index: 0 !important;
}
.accordion-body {
padding: 16px 25px;
}
.product {
color: #4C525F;
font-family: Nunito Sans;
font-size: 18px;
font-weight: 400;
line-height: 170%;
margin-top: 50px;
padding: 40px;
border-radius: 25px;
background: #FFF;
box-shadow: 0px 5px 16px 0px rgba(8, 15, 52, 0.06);
}
.product__img {
display: block;
margin: 0 auto;
width: 100%;
}
.product__title {
color: #1D1D1F;
font-family: Manrope;
font-size: 30px;
font-weight: 700;
line-height: 40px;
text-align: center;
margin: 30px 0;
}
@media (max-width: 1200px) {
.pump-info__text:nth-of-type(2n) {
grid-column: auto;
}
}
@media (max-width: 768px) {
.tables {
padding: 0;
}
.tables__title,
.tables__info-first.active,
.tables__info-second.active,
.dataTables_wrapper.active {
display: none;
}
.accordion .tables__title,
.accordion .tables__info-first,
.accordion .tables__info-second {
display: block;
}
.accordion .dataTables_wrapper {
display: flex;
flex-direction: column;
} .tablepress {
display: block;
width: 100%;
overflow: scroll;
}
.product {
padding: 30px;
}
}