/*
Таблица стилей используется на страницах 

https://www.tkbbank.ru/private/credits/mortgage/ref-full/

*/


:root {
    --border-radius-20: 1.25rem;
    --border-radius-30: 1.875rem;
    --font-accent-22: 500 1.375rem/1.2 var(--default-font-family);
    --font-accent-40: 500 2.5rem/1.2 var(--default-font-family);
    --font-accent-70: 500 4.375rem/1.2 var(--default-font-family);
    --font-accent-60: 500 3.75rem/1.2 var(--default-font-family);
    --font-body-22: 400 1.375rem/1.17 var(--default-font-family);
    --font-body-26: 400 1.625rem/1.17 var(--default-font-family);
    --light-gray: #F2F3F7;
    --yellow: #E4FF02;
}
.f-top-accent {
    font: 700 3rem/1.5 var(--default-font-family);
 }
 .f-top-accent-m {
     font: 700 2.5rem/1.5 var(--default-font-family);
 }
.font-accent-22 {
    font: var(--font-accent-22);
    line-height: 1.375rem;
}
.font-accent-40 {
    font: var(--font-accent-40);
    line-height: 2.5rem;
}
.line-height-45 {
    line-height: 2.8125rem;
}
@media (max-width: 768px) {
    .font-accent-40 {
        font: var(--font-h2);
    }
}
.font-accent-70 {
    font: var(--font-accent-70);
}
.font-accent-60 {
    font: var(--font-accent-60);
}
.f-body-22 {
    font: var(--font-body-22);
}
.f-body-26 {
    font: var(--font-body-26);
}
.rounded-top-right-45 {
    border-top-right-radius: 2.8125rem;
}
.p-25 {
    padding: 1.5625rem;
}
.p-45 {
    padding: 2.8125rem;
}
.p-48 {
    padding: 3rem;
}
.pl-29 {
    padding-left: 1.8125rem;
}
.pr-39 {
    padding-right: 2.4375rem;
}
.pr-54 {
    padding-right: 3.375rem;
}
.pt-25 {
    padding-top: 1.5625rem;
}
.pt-43 {
    padding-top: 2.6875rem;
}
.pb-25 {
    padding-bottom: 1.5625rem;
}
.pb-27 {
    padding-bottom: 1.6875rem;
}
.pb-35 {
    padding-bottom: 2.1875rem;
}
.pb-37 {
    padding-bottom: 2.3125rem;
}
.pb-43 {
    padding-bottom: 2.6875rem;
}
.ptb-60 {
     padding: 3.75rem 0;
 }
.mt-3 {
    margin-top: .1875rem;
}
.mt-5 {
    margin-top: .3125rem;
}
.mt-16 {
    margin-top: 1rem;
}
.mt-45 {
    margin-top: 2.8125rem;
}
.mt-70 {
    margin-top: 4.375rem;
}
.flex-wrap {
    flex-wrap: wrap;
}
.gap-42 {
    gap: 2.625rem;
}
.gap-60 {
    gap: 3.75rem;
}
.gap-y-50 {
    row-gap: 3.125rem;
}
.gap-y-30 {
    row-gap: 1.875rem;
}
.gap-x-45 {
    column-gap: 2.8125rem;
}
.gap-x-190 {
    column-gap: 11.875rem;
}
@media (max-width: 768px) {
    .gap-30-mobile {
        gap: 1.875rem;
    }
}

.flex-1 {
    flex: 1;
}
.c-white {
    color: var(--white);
}
.bg-gray-1 {
    background-color: var(--light-gray);
}
.bg-gray-2 {
    background-color: var(--stoney-gray);
}
.header__menu-btn::before {
    border-bottom: 1.25rem solid rgb(255 255 255 / 0%);
}
.header__nav-link[role=tab]._selected {
    color: var(--white);
    border-color: #E4FF02;
}
.button.header__online-bank {
    border-radius: 3.125rem;
    background-color: var(--electric-purple);
    color: var(--white);
}
.button._icon-right {
    stroke: var(--electric-purple);
}
.header .button__icon {
    filter: brightness(0) saturate(100%) invert(85%) sepia(100%) saturate(2%) hue-rotate(104deg) brightness(108%) contrast(101%);
}
.contact-link,
a[href^=tel].contact-link {
    color: #E4FF02;
}
.contact-link__label {
    color: var(--white);
}
.full-menu {
    top: 8.75rem;
}
.hero-slider .hero__picture img {
    max-height: 100%;
        right: 0em;
}
.hero-slider .hero__picture {
    padding-bottom: 73.470085%;
}
.header__nav-link:hover,
.link:hover,
.button.header__branches:hover,
.button.header__lang:hover {
    color: #E4FF02!important;
}
.button.header__branches:hover svg,
.button.header__menu-btn:hover .button__icon {
    filter: brightness(0) saturate(100%) invert(94%) sepia(87%) saturate(2714%) hue-rotate(9deg) brightness(104%) contrast(102%);
}

/*Knopka so strelochkoy*/
.buttons-arrow {
    display: inline-flex;
    align-items: center;
    gap: 1.3125rem;
    padding: .3125rem 0.3125rem 0.3125rem 1.25rem;
    background-color: var(--electric-purple);
    border-radius: var(--border-radius-30);
    color:  var(--white);
    font: var(--font-accent-l);
    box-sizing: border-box;
    border: none;
    cursor: pointer;
    transition: background-color 0.3s ease;
}
.w-buttom-media .buttons {
    width: 100%;
    justify-content: space-between;
}
.buttons-arrow:hover {
      background-color: #E4FF02;
      color: var(--electric-purple);
    }
.wrapp-arrow::after {
    content: '';
    background: var(--electric-purple);
    -webkit-mask-image: url("data:image/svg+xml;charset=UTF-8,%3csvg width='21' height='20' viewBox='0 0 21 20' fill='none' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M2.0742 17.0732L18.9353 2.92495M18.9353 2.92495L3.43056 1.56849M18.9353 2.92495L17.5788 18.4297' stroke='%235A4FFF' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3e%3c/svg%3e");
    mask-image: url("data:image/svg+xml;charset=UTF-8,%3csvg width='21' height='20' viewBox='0 0 21 20' fill='none' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M2.0742 17.0732L18.9353 2.92495M18.9353 2.92495L3.43056 1.56849M18.9353 2.92495L17.5788 18.4297' stroke='%235A4FFF' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3e%3c/svg%3e");
    -webkit-mask-size: auto;
    mask-size: auto;
        -webkit-mask-position: center;
    mask-position: center;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-size: 21px;
    mask-size: 21px;
    width: 22px;
    height: 22px;
}
.buttons-arrow._big .wrapp-arrow {
    width: 3.125rem;
    height: 3.125rem;
}
.wrapp-arrow::after {
    transition: transform 0.3s ease;
}
.buttons-arrow:hover .wrapp-arrow::after {
    background: #E4FF02;
   transform: rotate(40deg);
}
.wrapp-arrow {
    border-radius: 50px;
    background-color: var(--white);
    width: 43px;
    height: 43px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.buttons-arrow:hover .wrapp-arrow {
    background-color: var(--electric-purple);
}

.button, .btn {
    --border-radius: 1.875rem;
}
.menu {
    z-index: 999;
}

.bg-stoney-gray {
    background-color: var(--stoney-gray);
}
.bg-yellow {
    background-color: var(--yellow);
}

.wr-minobanke {
    width: 23.8125rem;
}
.wr-statobanke {
    width: 49.375rem;
}

.wr-statobanke .cols-3 {
    display: grid;
    grid-template-columns: 10.3125rem 15.4375rem 10.3125rem;
}

.bg-garadient {
    background: linear-gradient(90deg, #5A4FFF 3.37%, #3AB1FD 96.63%);
}
.bg-garadient-2 {
    background: linear-gradient(117.31deg, #5A4FFF -2.45%, #191A22 29.06%, #4A529F 69.57%, #3C71A9 77.02%, #00B9CD 90.67%);
}

.wrimg,
.wbimg,
.wbfimg {
    position: relative;
}
.wrimg img {
    position: absolute;
    right: 50%;
    left: 50%;
    bottom: -3.8rem;
}
.wbimg img {
    position: absolute;
    right: -1.625rem;
    top: 2.375rem;
    width: 100%;
    height: auto;
}
.wbfimg img {
    position: absolute;
    right: -3.625rem;
    top: -2.4375rem;
}
.comfort {
    position: relative;
}
.comfort > svg {
    position: absolute;
    top: .75rem;
    right: .6875rem;
}
.icoarrowrighttop {
    position: absolute;
    top: .5625rem;
    right: .5rem;
}
._full {
    width: 100%;
    box-sizing: border-box;
}

.cols2-min-right {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: repeat(1, 1fr);
}

.cols2-min-right div:nth-child(1) {
    grid-column: span 2 / span 2;
}

.cols2-min-right div:nth-child(2) {
    grid-column-start: 3;
}

.url-ref-light .cols2-min-right {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    grid-template-rows: repeat(1, 1fr);
}

.preimuszhestvanew > div {
    justify-content: space-between;
    display: flex;
    flex-flow: column;
    align-items: end;
    gap: 10px;
}

/*form*/
.formwrapp {
    background: linear-gradient(119.56deg, #5A4FFF 33%, #39B1FD 93%);
    padding: 5rem 0;
    margin-top: 2.25rem;
}
.formwrapp > div > div {
    background-color: var(--white);
    border-radius: 1.25rem;
    padding: 3.125rem 3.125rem 1.5625rem 3.125rem;
    box-sizing: border-box;
}
.faq.mt-80.mt-40-mobile {
    margin-top: 0;
}

@media (max-width: 768px) {
    .hero__col .buttons-arrow,
    .hero-slider::after,
    .header__services {
        display: none;
    }
    .hero-slider .hero {
        padding-top: 1.125rem;
    }
    .hero-slider .hero__picture {
        padding-bottom: 0;
    }
    .hero-slider .hero__footer {
        background-color: unset;
    }
    ._hero .header {
        margin-bottom: inherit;
    }
    .hero-slider .hero__footer .container {
        display: block;
    }
    .buttons-arrow {
        justify-content: space-between;
    }
    .buttons-arrow.mt-60 {
        margin-top: auto;
    }
    ._menu-opened .header, ._menu-opening .header {
        z-index: 999;
    }
    .header__nav-link, .button.header__lang, .button.header__branches, .header__row._bottom .header__nav-link {
        color: #000;
    }
    ._menu-opened .adaptive-banner {
        display: none;
    }

    .hero-slider .hero__col._picture {
        margin-top: 1.25rem;
    }

    .wr-minobanke {
        width: 100%;
    }
    .wr-statobanke {
        width: 100%;
    }
    .wr-statobanke .cols-3 {
        grid-template-columns: 1fr 1fr;
    }
    .items-baseline-mob {
        align-items: baseline;
    }
    .cols-2-mob {
        display: grid;
        grid-template-columns:repeat(2, 1fr);
    }
    .p-22-mob {
        padding: 1.375rem;
    }
    .ptpb-37-mob {
        padding-top: 2.3125rem;
        padding-bottom: 2.3125rem;
    }
    .gap-25-mob {
        gap: 1.5625rem;
    }
    .gap-x-30-mob {
        column-gap: 1.875rem;
    }
    .gap-y-35-mob {
        row-gap: 2.1875rem;
    }
    .gap-x-190 {
        column-gap: 3.87rem;
    }
    .mt-25-mob {
        margin-top: 1.5625rem;
    }
    .bankpredstavlenie {
        flex-wrap: wrap;
    }
    .bankpredstavlenie > div:nth-child(1),
    .bankpredstavlenie > div:nth-child(2) {
        flex: 1 1 0px;
    }
    .comfort > svg {
        width: 3.75rem;
        height: 3.75rem;
    }
    .topobanke {
        --font-h2: 500 1.625rem/1.07 var(--default-font-family);
        --font-body-22: 400 1.125rem/1.17 var(--default-font-family);
        --font-h3: 500 1.25rem/1.08 var(--default-font-family);
        --font-accent-xl: 400 1.125rem/1.2 var(--default-font-family);
        --font-body-l: 400 .875rem/1.22 var(--default-font-family);
        --font-body-m: 400 .875rem/1.25 var(--default-font-family);
        --font-accent-m: 500 .75rem/1.12 var(--default-font-family);
        --font-accent-40: 500 1.5rem/1.2 var(--default-font-family);
        --font-accent-22: 500 1.25rem/1.2 var(--default-font-family);
    }
    .infotop {
        display: flex;
    }
    .wbimg img {
        right: -2.625rem;
        top: -16rem;
        width: 8.625rem;
        height: auto;
    }
    .categoriesproducts {
        justify-content: space-between;
    }
    .categoriesproducts svg {
        width: 2.0625rem;
        height: 2.0625rem;
    }
    .wr-statobanke {
        --font-body-xl: 400 .75rem/1.2 var(--default-font-family);
        --font-h3: 500 1.25rem/1.08 var(--default-font-family);
        --font-body-l: 400 .875rem/1.22 var(--default-font-family);
        --font-accent-xl: 500 1.25rem/1.2 var(--default-font-family);
        --font-accent-xl: 500 1.875rem/1.2 var(--default-font-family);
    }
    .f-accent-xl-mob {
        font: 500 1.125rem/1.2 var(--default-font-family);
    }
    .f-accent-16-mob {
        font: 500 1rem/1.2 var(--default-font-family);
    }
    .icoarrowrighttop {
        width: 2.75rem;
        height: 2.75rem;
    }
    .wbfimg img {
        width: 8.8444rem;
        height: auto;
        right: -2.625rem;
        top: -20.4375rem;
    }
    .cols2-min-right {
        grid-template-columns: repeat(1, 1fr);
        grid-template-rows: repeat(2, 1fr);
    }
    .cols2-min-right div:nth-child(1) {
        grid-column: 1;
    }
    .cols2-min-right div:nth-child(2) {
        grid-column-start: 1;
    }
    .justify-between-mob {
        justify-content: space-between;
    }
    .flex-direction-rev-mob {
        flex-direction: column-reverse;
    }
    .wrimg img {
        position: relative;
        bottom: auto;
        left: 0;
        width: 6.25rem;
        height: auto;
    }
    .preimuszhestvanew > div {
        flex-flow: row;
    }
}
@media (max-width: 764px) {
    .preimuszhestvanew > div > div {
        width: 70%;
    }
}
@media (max-width: 700px) {
    .flex-col-700 {
        flex-flow: column;
    }
    .icoarrowrighttop {
        position: inherit;
        width: 3.75rem;
        height: 3.75rem;
    }
    .tkbclub {
        flex-flow: row-reverse;
        justify-content: space-between;
        align-items: center;
    }
    .tkbclub.rounded-top-right-45 {
            border-top-right-radius: 1.25rem;
    }
    .tkbclub .mt-16 {
        margin-top: 0;
    }
}
@media (max-width: 600px) {
    .cols2-min-right {
        grid-template-rows: repeat(2, auto);
    }
    .cols2-min-right div:nth-child(1) {
        flex-flow: column;
    }
}
@media (max-width: 560px) {
    .p-40 {
        padding: 1.375rem;
    }
    .p-48.pl-40.pr-54 {
        padding-top: 2.25rem;
        padding-bottom: 2.25rem;
        padding-right: 2.625rem;
        padding-left: 22px;
    }
    .categoriesproducts.gap-42 {
        gap: 1.5625rem;
    }
    .comfort.bg-garadient-2 .section-subtitle {
        width: 234px;
    }
    .wbfimg {
        position: unset;
    }
    .wbfimg img {
        top: -2rem;
        right: 1rem;
    }
    .comfort.bg-garadient-2 {
            --font-h3: 500 1.25rem/1.08 var(--default-font-family);
            --font-accent-xl: 500 1.125rem/1.2 var(--default-font-family);
            --font-body-l: 400 .875rem/1.22 var(--default-font-family);
    }
}
@media (max-width: 620px) {
    .cols-1-mob-620 {
        display: flex;
        flex-direction: column;
    }
    .gap-10-620 {
        gap: .625rem;
    }
}
@media (max-width: 540px) {
    .pt-52-540 {
        padding-top: 3.25rem;
    }
}