.topbanner.pay-transport{ padding-top: 120px; min-height: 600px; height: auto}
.topbanner.pay-transport h1{ font-size: 34px; line-height: 1.2}

.topbanner.pay-transport .link{margin-top: 30px; text-align: right}
.topbanner.pay-transport .link a{display:inline-block; border-bottom:1px dashed #52d168; color: #52d168; padding-bottom: 3px}


.tp-benefits-items{ margin-top: 30px}
.tp-benefits-item{border: 1px dashed var(--color3); border-radius: 15px; padding: 20px; margin-bottom: 20px; box-sizing: border-box }
.tp-benefits-item h3{ font-weight: bold; margin-top:0; margin-bottom: 20px; font-size: 18px;   }
.tp-benefits-item:after{ display: block; content: ""; position: absolute;  width:32px; height: 32px; background-repeat: no-repeat; background-position: center; background-size: contain; top: 27px; right:15px;}

.tp-benefits-item p.old{ opacity: .6}
.tp-benefits-item p.new{color: #369f48; font-weight: 600}

.tp-content-sidetext-line{margin-top: 30px;}
.tp-content-sidetext-line:after{display: block; content: ""; width: 22px;height: 22px;background-image: url(../../images/romb1.svg);background-repeat: no-repeat;background-position: center;background-size: contain;  transform: rotate(90deg);}
.tp-content-sidetext-line:before {display: block; content: ""; height: 2px; width: 60%; max-width: 200px; position: absolute; top: 0;bottom: 0;left: 10px; margin: auto; background: var(--color3);   }
.tp-content-sidetext p{ padding-left: 15px; font-size: 15px}

.tp-content-sideimg img{ display: block; border-radius: 15px; box-shadow: 0 6px 15px -5px rgb(0 0 0 / 20%); overflow: hidden}
.tp-content-sideimg.images{ display:flex;  }
.tp-content-sideimg img{ flex-shrink: 1; margin: 0 3px;}

.tp-content-second{margin-top: 40px; margin-bottom: 40px}

@media only screen and (min-width: 600px) {
    .tp-benefits-items{ display: flex; justify-content: space-between; flex-wrap: wrap; margin-left: -10px; margin-right: -10px}
    .tp-benefits-item{flex-basis: calc(50% - 20px); margin: 0 10px; flex-grow: 1; margin-bottom: 20px}
}

@media only screen and (min-width: 768px) {
    .topbanner.pay-transport{ padding-top: 120px; min-height: 460px; height: auto}

    .pay-transport .topbanner-content p,  .pay-transport .topbanner-content div, .pay-transport .topbanner-content h1{ width: 100%}

    .tarifs-items{ display: flex; justify-content: space-between; margin: 0 -10px; flex-wrap: wrap}
    .tarifs-item{ width: calc(50% - 20px); margin: 0 10px; box-sizing: border-box; margin-bottom: 20px}

    .tp-content-sidetext p{   font-size: 16px}

}


@media only screen and (min-width: 1024px) {
    .topbanner.pay-transport{ padding-top: 160px; min-height: 520px; height: auto}
    .topbanner.pay-transport h1{ font-size: 48px; }

    .tp-benefits-item{flex-basis: calc(33.3333% - 20px);}

    .tp-content-inner{ display: flex; justify-content: space-between; align-items: flex-start; margin-top: 30px;}
    .tp-content-sidetext{ flex-basis: 260px; flex-shrink: 0; margin-right: 40px; }
    .tp-content-sidetext-line{ margin-top: 0; width: auto;}
    .tp-content-sidetext-line:before{width: 80%; max-width: none}
    .tp-content-second{margin-top: 60px}

    .topbanner.pay-transport .link{ position: absolute; right: 0; bottom: 0}


}

@media only screen and (min-width: 1280px) {
    .topbanner.pay-transport{ padding-top: 180px; min-height: 600px; height: auto}

    .topbanner.pay-transport h1{ font-size: 56px; width: 80% !important  }

    .tp-benefits-item{flex-basis: calc(25% - 20px);}

    .tp-content-sidetext{ flex-basis: 25%;  margin-right: 70px; }
    .tp-content-sidetext p{   font-size: 18px; line-height: 1.8}




}