@import url('https://fonts.cdnfonts.com/css/source-serif-pro');
@font-face {
    font-family: "VTB Group";
    src: url("/fonts/vtbgroupbook/c41cf0605c0e3d2ef1b6e434a0718292.eot"); /* IE9*/
    src: url("/fonts/vtbgroupbook/c41cf0605c0e3d2ef1b6e434a0718292.eot?#iefix") format("embedded-opentype"), /* IE6-IE8 */
    url("/fonts/vtbgroupbook/c41cf0605c0e3d2ef1b6e434a0718292.woff2") format("woff2"), /* chrome、firefox */
    url("/fonts/vtbgroupbook/c41cf0605c0e3d2ef1b6e434a0718292.woff") format("woff"), /* chrome、firefox */
    url("/fonts/vtbgroupbook/c41cf0605c0e3d2ef1b6e434a0718292.ttf") format("truetype"), /* chrome、firefox、opera、Safari, Android, iOS 4.2+*/
    url("/fonts/vtbgroupbook/c41cf0605c0e3d2ef1b6e434a0718292.svg#VTB Group Book") format("svg"); /* iOS 4.1- */
}

@font-face {
    font-family: "VTB Group";
    font-weight: bold;
    src: url("/fonts/vtbgroupbold/4eaa52cfadca184bb1d94d74d8c5a778.eot"); /* IE9*/
    src: url("/fonts/vtbgroupbold/4eaa52cfadca184bb1d94d74d8c5a778.eot?#iefix") format("embedded-opentype"), /* IE6-IE8 */
    url("/fonts/vtbgroupbold/4eaa52cfadca184bb1d94d74d8c5a778.woff2") format("woff2"), /* chrome、firefox */
    url("/fonts/vtbgroupbold/4eaa52cfadca184bb1d94d74d8c5a778.woff") format("woff"), /* chrome、firefox */
    url("/fonts/vtbgroupbold/4eaa52cfadca184bb1d94d74d8c5a778.ttf") format("truetype"), /* chrome、firefox、opera、Safari, Android, iOS 4.2+*/
    url("/fonts/vtbgroupbold/4eaa52cfadca184bb1d94d74d8c5a778.svg#VTB Group Bold") format("svg"); /* iOS 4.1- */
}

@font-face {
    font-family: "VTB Group";
    font-weight: 300;
    src: url("/fonts/vtbgrouplight/c60671675fb6850a59d1a3a3aee0ba75.eot"); /* IE9*/
    src: url("/fonts/vtbgrouplight/c60671675fb6850a59d1a3a3aee0ba75.eot?#iefix") format("embedded-opentype"), /* IE6-IE8 */
    url("/fonts/vtbgrouplight/c60671675fb6850a59d1a3a3aee0ba75.woff2") format("woff2"), /* chrome、firefox */
    url("/fonts/vtbgrouplight/c60671675fb6850a59d1a3a3aee0ba75.woff") format("woff"), /* chrome、firefox */
    url("/fonts/vtbgrouplight/c60671675fb6850a59d1a3a3aee0ba75.ttf") format("truetype"), /* chrome、firefox、opera、Safari, Android, iOS 4.2+*/
    url("/fonts/vtbgrouplight/c60671675fb6850a59d1a3a3aee0ba75.svg#VTB Group Light") format("svg"); /* iOS 4.1- */
}

html {
    font-size: 16px;
}

body {
    font-family: "VTB Group", Arial, sans-serif;
    font-size: 24px;
    line-height: 1.6;
    background-color: #fff;
    color: #2F3441;
}
.gray {
    color: #6B7683;
}
.dark-blue {
    color: #002882;
}
.border-dark-blue {
    border-color: #002882 !important;
}
.black-bg {
    background: #2F3441;
    color: #ffffff;
}
.black-bg .font-vtb img{display: none;}
.lightpink-bg {
    background: #F6F0EE;
}
.lightbrown-bg {
    background: #EAEBED;
}
.white-bg {
    background: #fff;
}
h1 {
    font-weight: 700;
    font-size: 88px;
    line-height: 1em;
    margin-bottom: 26px;
    font-family: 'Source Serif Pro', sans-serif;
}
h2 {
    font-family: "VTB Group";
    font-weight: 700;
    font-size: 59px;
    line-height: 1.1em;
    margin-bottom: 48px;
    letter-spacing: -0.01em;
}
h3 {
    font-weight: 400;
    font-size: 40px;
    /*line-height: 1.64em;*/
    margin-bottom: 0px;
    letter-spacing: -1.2px;
}
.font-300 {
    font-weight: 300;
}
.font-400 {
    font-weight: 400;
}
.font-600 {
    font-weight: 600;
}
.font-700 {
    font-weight: 700;
}
.font-11 {
    font-size: 11px !important;
}
.font-12 {
    font-size: 12px !important;
}
.font-13 {
    font-size: 13px !important;
}
.font-16 {
    font-size: 16px !important;
}
.font-18 {
    font-size: 18px !important;
}
.font-20 {
    font-size: 21px !important;
}
.font-21 {
    font-size: 21px !important;
}
.font-24 {
    font-size: 24px !important;
}
.font-28 {
    font-size: 28px !important;
}
.font-34 {
    font-size: 34px !important;
}
.font-48 {
    font-size: 48px !important;
}
.font-56 {
    font-size: 56px !important;
}
.line-height-1 {
    line-height: 1;
}
.rounded {
    border-radius: 32px !important;
}
.rounded-sm {
    border-radius: 24px !important;
}
.rounded-sx {
    border-radius: 18px !important;
}
.lightgray-bg {
    background: #F3F7FA;
}
.gray-bg {
    background: #E6E9E6;
}
.mw-50 {
    max-width: 50%!important;
}
.mw-30 {
    max-width: 30%!important;
}
.btn {
    border-radius: 8px;
    padding: 0.64rem 1.35rem;
}
.btn.btn-primary,
.btn.btn-primary:hover,
.btn.btn-primary:active,
.btn.btn-primary:focus {
    color: #fff;
    background: linear-gradient(89.95deg, #0039FC 0.02%, #0385FF 99.93%) !important;
    border-color: rgba(255,255,255,0) !important;
    border-width: 0;
}
.btn.btn-outline-primary,
.btn.btn-outline-primary:hover,
.btn.btn-outline-primary:active,
.btn.btn-outline-primary:focus {
    color: #002882;
    background: transparent !important;
    border: 1px solid #ACB6C3 !important;
}
.opacity-50 {
    opacity: 0.5;
}
.opacity-75 {
    opacity: 0.75;
}
.font-serif {
    font-family: 'Source Serif Pro', sans-serif;
}
.font-vtb {
    font-family: "VTB Group", Arial, sans-serif;
}
/**********************************************************************/
.block-1 {
    background: #e2e7f7;
    background-image: url("/images/block-1.png");
    background-repeat: no-repeat;
    background-position: right 128px center;
    height: 680px;
}
.block-1 > div {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    justify-content: space-around;
    height: 100%;
}
.gradient-blue {
    background: linear-gradient(89.95deg, #0039FC 0.02%, #0385FF 99.93%);
}
.border-gradient-blue {
    border-radius: 24px;
    background: linear-gradient(90deg, rgb(0, 55, 255) 0%, rgb(0, 133, 255) 75%);
}
.border-gradient-blue > div {
    border-width: 3px;
    border-style: solid;
    border-color: transparent;
    border-image: initial;
    border-radius: 24px;
    background: padding-box rgb(255, 255, 255);
    padding: 40px;
}

.form-calculator label {
    color: #6B7683;
    font-style: normal;
    font-weight: 300;
    font-size: 16px;
    line-height: 1;
    margin-bottom: 8px;
}
.form-calculator span.summa-text,
.form-calculator input.summa-text {
    font-weight: 400;
    font-size: 32px;
    line-height: 100%;
    color: #002882;
    -webkit-transition: all 0.2s ease-out ;
    -moz-transition: all 0.2s ease-out ;
    -o-transition: all 0.2s ease-out ;
    transition: all 0.2s ease-out ;
}
.form-calculator span.summa-text {
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    right: 0;
    display: flex;
    align-items: center;
    z-index: 1;
}
.form-calculator input.summa-text {
    background: transparent;
    border: none;
    outline: none !important;
    position: relative;
    z-index: 2;
    width: 100%;
    opacity: 0;
}
.form-calculator input.summa-text::-webkit-outer-spin-button,
.form-calculator input.summa-text::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}
.form-calculator input.summa-text {
    -moz-appearance: textfield;
}
.form-calculator input.summa-text:focus {
    opacity: 1;
}
.form-calculator input.summa-text:focus + span.summa-text {
    opacity: 0;
}


/*generated with Input range slider CSS style generator (version 20211225)
https://toughengineer.github.io/demo/slider-styler*/
input[type=range].styled-slider {
    height: 24px;
    -webkit-appearance: none;
}

/*progress support*/
input[type=range].styled-slider.slider-progress {
    --range: calc(var(--max) - var(--min));
    --ratio: calc((var(--value) - var(--min)) / var(--range));
    --sx: calc(0.5 * 32px + var(--ratio) * (100% - 32px));
}

input[type=range].styled-slider:focus {
    outline: none;
}

/*webkit*/
input[type=range].styled-slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    width: 32px;
    height: 22px;
    border-radius: 18px;
    background: #FFFFFF;
    border: 4px solid #3982F7;
    box-shadow: none;
    margin-top: calc(4px * 0.5 - max(22px * 0.5,4px));
}

input[type=range].styled-slider::-webkit-slider-runnable-track {
    height: 4px;
    border: none;
    border-radius: 16px;
    background: #D5D7DE;
    box-shadow: none;
}

input[type=range].styled-slider.slider-progress::-webkit-slider-runnable-track {
    background: linear-gradient(to right, #3982F7, #1437F5) 0/var(--sx) 100% no-repeat, #D5D7DE;
}

/*mozilla*/
input[type=range].styled-slider::-moz-range-thumb {
    width: max(calc(32px - 4px - 4px),0px);
    height: max(calc(22px - 4px - 4px),0px);
    border-radius: 18px;
    background: #FFFFFF;
    border: 4px solid #3982F7;
    box-shadow: none;
}

input[type=range].styled-slider::-moz-range-track {
    height: 4px;
    border: none;
    border-radius: 16px;
    background: #D5D7DE;
    box-shadow: none;
}

input[type=range].styled-slider.slider-progress::-moz-range-track {
    background: linear-gradient(to right, #3982F7, #1437F5) 0/var(--sx) 100% no-repeat, #D5D7DE;
}

/*ms*/
input[type=range].styled-slider::-ms-fill-upper {
    background: transparent;
    border-color: transparent;
}

input[type=range].styled-slider::-ms-fill-lower {
    background: transparent;
    border-color: transparent;
}

input[type=range].styled-slider::-ms-thumb {
    width: 32px;
    height: 22px;
    border-radius: 18px;
    background: #FFFFFF;
    border: 4px solid #3982F7;
    box-shadow: none;
    margin-top: 0;
    box-sizing: border-box;
}

input[type=range].styled-slider::-ms-track {
    height: 4px;
    border-radius: 16px;
    background: #D5D7DE;
    border: none;
    box-shadow: none;
    box-sizing: border-box;
}

input[type=range].styled-slider.slider-progress::-ms-fill-lower {
    height: 4px;
    border-radius: 16px 0 0 16px;
    margin: -undefined 0 -undefined -undefined;
    background: linear-gradient(to right, #3982F7, #1437F5);
    border: none;
    border-right-width: 0;
}
.custom-select {
    height: 56px;
    color: #495057;
    vertical-align: middle;
    background: #fff url("/images/ico-select-arrow.svg") no-repeat right .75rem center;
    background-size: 22px 13px;
    border: 1px solid #ACB6C3;
    border-radius: 8px;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
}
.blue-quote {
    border-left: 8px solid #1E4BD2;
    background: #EAEDF5;
    padding: 32px 48px;
}


/**********************************************************************/
@media (max-width: 1441px) {
    .block-1 {
        background-position: right center;
    }
}
@media (max-width: 1199px) {
    .block-1 {
        background-position: right -100px center;
    }
}
@media (max-width: 991px) {
    h1 {
        font-size: 7vw;
    }
    h2 {
        font-size: 5vw;
    }
    .block-1 {
        background-position: right -200px center;
    }
}

@media (max-width: 767px) {
    .block-1 {
        height: 99vh;
        background-position: right -200px top -30px;
    }
    html {
        font-size: 16px;
    }
    body {
        font-size: 20px;
    }
    .font-28 {
        font-size: 24px !important;
    }
}

@media (max-width: 575px) {

    h1 {
        font-size: 9vw;
    }
    h2 {
        font-size: 7vw;
    }
    .font-28 {
        font-size: 5vw !important;
    }
    .border-gradient-blue > div {
        padding: 32px 22px;
    }
    .font-56 {
        font-size: 10vw !important;
    }
}