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: 300 11pt Montserrat, Arial, Tahoma; color: #222222;}
textarea {resize: none}

h1 {font-weight: 700; font-size: clamp(2.2rem, 5vw, 4rem); color: #333; margin: 0 0 30px 10px; line-height: 1em;}
h2 {font-weight: 600; font-size: clamp(1.3rem, 4.5vw, 2rem); margin: 0 10px 25px 10px; color: #333; line-height: 1.3em;}
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;}



.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(#dde2e8, #fff); 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: 40px 0 0 20px;}
.faceimage {width: 100%; text-align: center;}
.faceimage img {position: absolute; top: 20px; right: 10px; width: 627px; height: 500px;}
.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;}


.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: 48.5%; min-width: 280px; min-height: 150px; background: #fff; border-radius: 16px; padding: 45px 0 35px 0; margin-bottom: 38px; box-shadow: 0 0 33px #d7dce2;}
.features .item p {padding: 0 160px 0 50px; margin-bottom: 12px; max-width: 500px;}
.features .item img {position: absolute; bottom: 30px; right: 20px; margin: 10px 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;}

.relbox {position: relative; margin: 0; padding: 0;}
.relbox .link_button {position: absolute; right: 45px; bottom: 50px;}

.tabcontainer {position: relative; padding: 10px 15px;}
.tabcontainer .show {display: none; font-weight: 500; font-size: clamp(0.95rem, 1.8vw, 1.15rem);}

.pdstab {width: 100%; border-bottom: 3px solid #f3f4f8; margin: 0 0 35px 0;}
.pdstab th, .pdstab td {background:#f3f4f8; vertical-align: top; padding: 10px 30px 10px 0; font-weight: 500; font-size: clamp(0.95rem, 1.8vw, 1.15rem); text-align: left;}
.pdstab td {background:#fff;}
.pdstab th:first-child, td:first-child {padding-left: 35px;}
.pdstab th.hide {padding-left: 0px;}
.pdstab tr.thirdrow td {background:#f3f4f8;}


.pdstable {width: 100%; background:#fff; border-bottom: 3px solid #f3f4f8; margin: 0 0 20px 0;}
.pdstable th, td {background:#ffffff; vertical-align: top; padding: 10px 30px 0 0; font-weight: 500; font-size: clamp(0.95rem, 1.8vw, 1.15rem); text-align: left;}
.pdstable td.headable {background:#f3f4f8; padding-top: 15px; padding-bottom: 12px;}
.pdstable .last td {padding-bottom: 20px;}
.pdstable .income {font-size: clamp(1.1rem, 1.9vw, 1.2rem); font-weight: 600; white-space: nowrap;}

.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: 32%; min-height: 100px;}
.kopilka .kop div {position: relative; font-weight: 600; font-size: clamp(1.1rem, 2vw, 1.4rem); margin: 0 0 20px 0; color: #333; line-height: 1.1em; text-align: left; background: #fff; border-radius: 16px; padding: 30px 30px; box-shadow: 0 0 33px #d7dce2;}
.kopilka .kop div.koptrio {min-height: 310px;}
.kopilka .kop div.kopdouble {min-height: 90px;}
.kopilka .kop div.kopdouble img {position: absolute; right: 18px; bottom: 20px;}
.kopilka .kop div.kopdoublex {min-height: 130px;}
.kopilka .kop div.kopdoublex img {position: absolute; right: 18px; bottom: 20px;}
.kopilka img.house {display: block; margin: 20px auto; text-align: center;}
.kopilka img.pass {width: 100px; float: right;}

.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 40px auto; }
.startbox .stb {position: relative; width: 30%; margin: 0 0 10px 0; text-align: center; padding: 0;}
.startbox .stb p {padding: 0;}
.startbox .stb span {font-weight: 600; font-size: clamp(1.1rem, 2vw, 1.4rem);}
.startbox .stb img {margin-bottom: 30px; width: 160px;}
.startbox .stb img.starr {margin: 0px; width: 66px; position: absolute; top:55px; right: -50px;}

.whitebox {margin: 0 auto; padding: 55px 20px 80px 20px; min-width: 320px; max-width: 1200px; }
.whitebox .flexy {display: flex; flex-direction: row; flex-wrap: wrap; justify-content: space-between; background: #fff; border-radius: 16px; padding: 45px 40px; margin-bottom: 38px; box-shadow: 0 0 33px #d7dce2;}
.whitebox .flexy .item {position: relative; width: 44%;}
.whitebox .flexy .item h4 {text-align: left; padding-left: 0;}
.whitebox .flexy .item p {margin: 0 0 15px 0;}
.whitebox .flexy .item img.garant {display: block; margin: 0 auto; padding-top: 10px; width: 350px;}


.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: 439px; top: 30px;}
}

@media (max-width: 999px) {
	.facebox h1 {width: 85%; text-align: center; float: none; margin: 0 auto; padding-top: 20px 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: 351px; margin: 40px auto;}
	.container {padding: 60px 0;}
	.features {flex-direction: column; width: 80%;}
	.features .item {width: 100%; padding-top: 35px; margin-bottom: 22px;}
	.features .item p {padding-left: 30px;}
	.features .ibig p {padding-right: 30px;}
	.features img.ibg {position: relative; top:15px; bottom: 0px; right: 0px; margin: 0 15px 25px 45px; float: right;}
	.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%;}
	.kopilka #kopsecond {width: 100% !important;}
	.kopilka .kop div.koptrio {min-height: 280px;}
	.kopilka .kop div.kopdouble {min-height: 70px;}
	.kopilka .kop div.kopdoublex {min-height: 70px;}
	.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 img.garant {width: 95%; margin-bottom: 50px; max-width: 270px;}
	.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: 239px;}
	.features {width: 90%; padding: 40px 20px 55px 20px;}
	.features .item {padding-top: 25px;}
	.features .item p {padding-left: 26px;}
	.features img.ibg {float: none; margin: 0 0 60px 0; top: 20px; left: 60px;}
	.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%;}
	.kopsecond {flex-direction: row; width: 100%;}
	.kopilka .kop div.koptrio {min-height: 70px;}
	.kopilka img.house {margin: 0; position: absolute; right: 18px; bottom: 20px; width: 100px;}
	.relbox .link_button {right: 27%;}
	.startbox {width: 90%; flex-direction: column; padding-top: 10px;}
	.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;}
	.whitebox .flexy .item {width: 99%;}

}

@media (max-width: 460px) {
	.features .item p {padding-right: 26px;}
	.features .item img {position: relative; top: -10px; bottom: 0px; right: 0px; left: 40px;}
	.features .item img.ibg {float: none; top: 20px; left: 30px;}
	.relbox .link_button {right: 18%;}
	.startbox .stb img {margin: 20px 15px 10px 0;}
	
}