html {height: 100%; scroll-behavior: smooth; scroll-padding-top: 150px;}
img {border: none;}
td {vertical-align: top; padding: 0;}
a {outline: none;}
table, div {border-collapse: collapse;}
p {margin: 0 0 15px 0;}

form {margin: 0;}
ul {margin: 0 15px 15px 15px; padding: 5px 15px;}
li {margin-bottom: 12px;}

.montserrat-<uniquifier> {
  font-family: "Montserrat", sans-serif;
  font-optical-sizing: auto;
  font-weight: <weight>;
  font-style: normal;
}


/* ============= colors ============ */

body {height: 100%; margin: 0; padding: 0; background: #f0f5fb;}
body, td, th {font-size: clamp(1.08rem, 2vw, 1.25rem); line-height: 1.35em; font-family: Montserrat, Arial, Tahoma, Helvetica, sans-serif; font-weight: 400; color: #333; text-align: left;}

hr {border: none; color: #bfcdd7; background-color: #bfcdd7; height: 1px; margin: 10px 0;}
input, textarea, select, submit {font: 400 15pt Montserrat, Arial, Tahoma; color: #222222;}
textarea {resize: none}

h1 {font-weight: 700; font-size: clamp(2.2rem, 3.9vw, 3.05rem); color: #333; margin: 0 0 35px 10px; line-height: 1.1em;}
h2 {font-weight: 600; font-size: clamp(1.8rem, 3.6vw, 3rem); margin: 0 10px 25px 10px; color: #333; text-align: center; line-height: 1.1em;}
h3 {font-weight: 600; font-size: clamp(1.8rem, 3.6vw, 3rem); margin: 0 0 25px 0; color: #333; line-height: 1.1em; text-align: center; padding: 0 30px;}
h4 {font-weight: 600; font-size: clamp(1.4rem, 2.3vw, 2rem); margin: 0 0 30px 0; color: #333; line-height: 1.1em; text-align: center; padding: 0 22px;}
h5 {font-weight: 600; font-size: clamp(1.2rem, 2vw, 1.7rem); margin: 0 0 5px 0; line-height: 1.1em; color:#ff740d;}
h6 {font-weight: 100; font-size: 23pt; margin: 0 0 15px 0; color: #1b1c1d; text-transform: uppercase;}


a:link {color: #f05d21; text-decoration: underline;}
a:visited {color: #f05d21; text-decoration: underline;}
a:hover {color: #f05d21; text-decoration: none;}
a:active {color: #f05d21; text-decoration: none;}

small {font-size: 75%; line-height: 1.2em;}
.small {font-size: 75%; line-height: 1.2em;}
.centra {text-align: center; width: 85%; margin: 0 auto 15px auto; min-width: 320px;}

.link_button {display: inline-block; margin: 25px 0 30px 0; padding: 10px 45px; background: #ff740d; font-size: 13pt; color: #ffffff !important; text-decoration: none !important; border-radius: 8px;}
.facetext .link_button {margin-top: 60px;}


.mainbox {min-width: 360px; margin: 0 auto; background: #f0f5fb;}


.logohead {background: #fff; width: 100%; min-width: 350px; position: fixed; top: 0; left: 0; right: 0; z-index: 1000;}
.logohead .logo {margin: 0 auto; min-width:350px; max-width: 1200px; padding: 30px 0;}
.banklogo {margin: 0 25px; width: 240px;}

.firstbox {display: block; width: 100%; min-width: 360px; min-height: 500px; margin: 0 auto; background-image: linear-gradient(#fcd5bc 30%, #feebce, #fff 92%); padding-top: 125px;}

.facebox {position: relative; display:block; width: 100%; min-width: 360px; max-width: 1200px; margin: 0 auto;}

.facebox div {width: 45%;}
.facebox h1 {display: block; width: 45%; margin: 0; padding: 80px 0 0 20px;}
.faceimage {width: 100%; text-align: center;}
.faceimage img {position: absolute; top: 25px; right: 0px; width: 635px; height: 440px;}
.facebox div.facetext {font-weight: 300; font-size: clamp(1.3rem, 3vw, 1.5rem); line-height: 1.2em; padding: 30px 0 0 20px; color: #000;}

.container {min-width: 360px; max-width: 1200px; margin: 0 auto; padding: 90px 0;}

.longtitle {width: 75%; max-width: 850px; margin: 0 auto; text-align: center; padding-bottom: 35px;}

.features {display: flex; flex-direction: row; flex-wrap: wrap; justify-content: space-between; min-width: 320px; max-width: 1200px; margin: 0 auto; padding: 55px 20px 80px 20px; }
.features .item {position: relative; width: 31%; text-align: center; min-width: 250px; min-height: 150px; background: #fff; border-radius: 16px; padding: 50px 0 35px 0; margin-bottom: 38px; box-shadow: 0 0 33px #d7dce2;}
.features .item p {padding: 0 40px 0 40px; margin-bottom: 12px; max-width: 500px;}
.features .item img {position: relative; margin: 0 0 25px 0;}
.features p.bolded {font-size: clamp(1.15rem, 2.2vw, 1.25rem); font-weight: 600; color: #000;}
.features p.money {font-weight: 700; color: #ff740d; font-size: clamp(1.25rem, 2.2vw, 1.35rem); margin: 0 0 20px 0;}

.features .ibig {width: 100%; min-height:200px;}
.features .ibig p {padding-right: 300px; max-width: 800px;}


.kopilka {display: flex; flex-direction: row; flex-wrap: wrap; justify-content: space-between; padding: 30px 20px; min-width: 320px; max-width: 1200px; margin: 0 auto 75px auto; }
.kopilka .kop {display: flex; flex-direction: column; flex-wrap: wrap; justify-content: space-between; width: 23%; background: #fff; border-radius: 16px; box-shadow: 0 0 33px #d7dce2; text-align: center; font-weight: 600; font-size: clamp(1.1rem, 2vw, 1.4rem); line-height: 1.1em; margin-bottom: 30px;}
.kopilka .kop a {display:block; padding: 55px 30px 45px 30px; text-decoration: none; color: #333;}
.kopilka img {margin: 0 auto 33px auto;}


.startbox {display: flex; flex-direction: row; flex-wrap: wrap; justify-content: space-between; padding: 40px 30px 0 30px; min-width: 320px; max-width: 1200px; margin: 0 auto 110px auto; }
.startbox .stb {position: relative; width: 30%; margin: 0 0 10px 0; text-align: center; padding: 0;}
.startbox .stb p {padding: 0; margin-bottom: 20px;}
.startbox .stb span {font-weight: 600; font-size: clamp(1.1rem, 2vw, 1.4rem);}
.startbox .stb img {margin-bottom: 35px; width: 160px;}
.startbox .stb img.starr {margin: 0px; width: 66px; position: absolute; top:55px; right: -50px;}

.whitebox {margin: 0 auto; padding: 0 20px 80px 20px; min-width: 320px; max-width: 1200px;}
.whitebox .flexy {display: flex; flex-direction: row; flex-wrap: wrap; justify-content: space-between; background-image: linear-gradient(#fcd5bc 30%, #feebce, #fff 92%); border-radius: 16px; padding: 45px 40px 10px 40px; margin-bottom: 38px; box-shadow: 0 0 33px #d7dce2;}
.whitebox .flexy .item {position: relative; text-align: left; width: 48%; padding: 40px 0 33px 0;}
.whitebox .flexy .zero {text-align: right; padding: 0px;} 
.whitebox .flexy .item h4 { text-align: left; padding: 0; margin: 0 0 9px 0;}
.whitebox .flexy .item p { margin: 0 0 15px 0;}
.whitebox .flexy .item img {position: relative; right:0; width: 100%; min-width: 240px; max-width: 450px;}

.whitebox .flexyform {background: #fff; border-radius: 16px; padding: 80px 40px 99px 40px; margin-bottom: 38px; box-shadow: 0 0 33px #d7dce2; text-align: center;}
.whitebox .flexyform form {padding-top: 45px;}

.flexyform input.forma {color: #000; font-size: 16pt; width: 650px; font-weight: 400; border-radius: 8px; background: #ecf1f7; padding: 16px 25px; border: 0px; box-shadow: inset 3px 3px 6px rgba(215, 220, 226, 1); margin: 0 auto 25px auto;}
.forma::placeholder {color: #222; font-weight: 300; font-size: 13pt;}
.forma:focus {outline: 2px solid #ff740d;}
.flexyform input.checkforma {position: absolute; top: 0; left: 0; background: #ecf1f7; accent-color: #ecf1f7; width: 20px; height: 20px; border: 0px; outline: 0px;}
.flexyform label {display: block; position: relative; margin: 0 auto; width: 510px; font-size: 70%; text-align: left; line-height: 1.1em; padding: 0 50px; margin-bottom: 25px;}

input.sforma {background: #ff740d; font-size: 13pt; color: #ffffff !important; text-decoration: none !important; padding: 16px 45px; border-radius: 8px; border: 0px; outline: 0px; cursor: pointer; transition: all 0.5s;}
input.sforma:hover {padding: 16px 42px 16px 48px; background: #e9690b;} 


.archive {display: flex; flex-direction: row; flex-wrap: wrap; justify-content: space-between; padding: 0px 15px; min-width: 320px; max-width: 1200px; margin: 0 auto 10px auto; }
.archive .arc {width: 26%; margin: 0 0 20px 0; text-align: left; padding: 0;}
.archive .arc h4 {text-align: left;}
.archive .arclink {display: flex; flex-direction: row; flex-wrap: wrap; justify-content: space-between; width: 68%; margin: 0 15px 10px 0; text-align: left; padding: 0;}
.archive .arclink .link {width: 35%; padding: 0 0 35px 90px; margin: 0;}
.archive .arclink a {position: relative; font-size: 92%; margin: 0 50px 8px 0; text-decoration: none; color: #333;}
.archive .arclink a.pdf::before {content: ""; display: block; position: absolute; top: -15px; left: -95px; z-index: 10; width: 79px; height: 91px; background: url(img/pdf.png) 0 0 no-repeat; background-size:cover;}
.archive .arclink a.zip::before {content: ""; display: block; position: absolute; top: -15px; left: -95px; z-index: 10; width: 79px; height: 91px; background: url(img/zip.png) 0 0 no-repeat; background-size:cover;}
.archive .arclink p {line-height: 1.1em; margin: 0 0 8px 0;}
.archive .arclink p.download {font-size: 88%; text-decoration: underline;}
.archive .arclink a:hover p.download {text-decoration: none;}

.footer {background: #fff; width: 100%; min-width: 350px;}
.footer .footerbox {margin: 0 auto; min-width:350px; max-width: 1200px; padding: 30px 0 100px 0; display: flex; flex-direction: row; flex-wrap: wrap; justify-content: space-between; }
.footer .footerbox div {width: 30%; max-width: 280px; min-height: 100px; font-size: 75%; line-height: 1.5em; color: #777;}
.footer .footerbox p {padding-top: 18px;}


@media (max-width: 1250px) {
	.faceimage img {width: 550px; height: 381px; top: 30px; right: 12px;}
	.kopilka img {width: 90%; max-width: 188px;}
	.archive .arclink {width: 70%;}
}

@media (max-width: 999px) {
	.facebox h1 {width: 85%; text-align: center; float: none; margin: 0 auto; padding: 30px 0 0 0;}
	.facebox div {width: 100%; float: none;}
	.facebox div.facetext {width: 85%; max-width: 800px; float: none; margin: 0 auto; text-align: center; padding: 0 0 20px 0;}
	.faceimage img {position: relative; top: 0px; right: 0px; width: 440px; height: 305px; margin: 40px auto;}
	.facetext .link_button {margin-top: 25px;}
	.container {padding: 70px 0;}
	.features {flex-direction: row; width: 80%; padding: 40px 20px 50px 20px; }
	.features .item {width: 47.5%; padding: 40px 0 25px 0; margin-bottom: 34px;}
	.features .item p {padding: 0 30px;}
	.features .ibig p {padding-right: 30px;}
	.longtitle {width: 85%;}
	.pdstab .hide {display: none;}
	.pdstab th:first-child, td:first-child {padding-left: 15px;}
	.pdstab th, td { padding-right: 15px;}
	.kopilka {width: 80%;}
	.kopilka .kop {width: 47.5%;}

	.relbox {padding-bottom: 65px;}
	.relbox .link_button {position: absolute; right: 33%; bottom: -30px;}
	.startbox {width: 80%;}
	.startbox .stb img {width: 125px;}
	.startbox .stb img.starr {width: 44px; top:50px; right: -35px;}
	.whitebox {width: 80%;}
	.whitebox .flexy .item {padding: 0px 0px 20px 0px;}
	.whitebox .flexy .zero {padding: 0px;}
	.whitebox .flexy .item img {left: -15px;}
	.flexyform input.forma {width: 75%;}
	.flexyform label {width: 65%; padding-left: 40px; padding-right: 0px;}
	.archive {flex-direction: column; }
	.archive .arc {width: 100%; text-align: center;}
	.archive .arc h4 {text-align: center;}
	.archive .arclink {width: 90%; margin: 0 auto;}
	.archive .arclink .link {width: 30%; padding: 0 0 35px 75px; margin-left: 35px;}
	.archive .arclink a::before {top: -10px; left: -80px; z-index: 10; width: 65px; height: 75px;}

	.footer .footerbox {flex-direction: column; }
	.footer .footerbox div {width: 90%; max-width: 480px;}
	.footer .footerbox p {padding-left: 40px;}
}

@media (max-width: 650px) {
	.firstbox {padding-top: 100px;}
	.logohead .logo {padding: 25px 0;}
	.banklogo {width: 200px;}
	.faceimage img {width: 300px; height: 208px;}
	.container {padding: 60px 0;}
	.features {flex-direction: column; width: 90%; padding: 25px 20px 20px 20px;}
	.features .item {width: 100%; padding: 30px 0 20px 0; margin-bottom: 30px;}
	.features .item p {padding-left: 0 26px;}
	.features img.ibg {float: none; margin: 0 0 60px 0; top: 20px; left: 60px;}
	.longtitle {padding-bottom: 35px;}
	.pdstab {display: none;}
	.pdstab th, td { padding-right: 16px;}
	.tabcontainer .show {display: block;}
	.kopilka {width: 90%; margin-bottom: 30px; flex-direction: column;}
	.kopilka .kop {width: 100%; min-height: 240px;}
	.kopilka .kop a {display: block; padding: 35px 30px 25px 30px;}
	.kopilka img {width: 85%; max-width: 188px;}

	.relbox .link_button {right: 27%;}
	.startbox {width: 90%; flex-direction: column; padding-top: 10px; margin-bottom: 50px;}
	.startbox .stb {width: 99%; margin: 0 0 20px 0; text-align: left; min-height: 100px;}
	.startbox .stb img {width: 100px; float: left; margin: 5px 15px 0 0;}
	.startbox .stb img.starr {display: none;}
	.startbox .stb p {margin: 0 0 5px 0;}
	.whitebox {width: 90%; padding-top: 30px; padding-bottom: 50px;}
	.whitebox .flexy {flex-direction: column; padding-top: 0px;}
	.whitebox .flexy .item {width: 99%; text-align: center; padding-top: 0px;}
	.whitebox .flexy .item h4 {text-align: center; padding: 0px;}
	.whitebox .flexy .item img {left: 15px; top: -25px; width: 70%;}
	.whitebox .flexy .zero {text-align: center; padding: 0px;} 
	.whitebox .flexyform {padding: 65px 25px 65px 25px;}
	.whitebox .flexyform form {padding-top: 25px;}
	.whitebox .flexyform input.forma {width: 90%;}
	.flexyform label {width: 72%;}

	.archive .arclink {flex-direction: column;}
	.archive .arclink .link {width: 75%; padding: 0 0 35px 75px; margin-left: 0px; min-height: 65px;}

}

@media (max-width: 460px) {

	.relbox .link_button {right: 18%;}
	.startbox .stb img {margin: 20px 15px 10px 0;}
	.whitebox .flexy .item img {width: 88%;}
	.whitebox .flexyform {padding: 50px 15px 50px 15px;}
	.whitebox .flexyform input.forma {width: 98%;}
	.kopilka .kop {margin-bottom: 25px;}
	.kopilka img {width: 80%; max-width: 188px;}
}