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: #f8f8f8;}
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: 600; font-size: clamp(2.2rem, 3.9vw, 3.05rem); color: #333; margin: 0 0 35px 0; line-height: 1.1em; text-align: center;}
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.4rem, 2.6vw, 2.2rem); margin: 0 auto 25px auto; color: #333; line-height: 1.1em; text-align: center; padding: 65px 22px 0 22px; max-width: 700px;}
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 {position: relative; text-align: left; width: 82%; margin: 0 auto 15px auto; padding: 30px 0 0 33px; min-width: 290px; max-width: 700px;}
.centra span {display: block; position: absolute; top: 30px; left: 0px;}

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


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


.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: 100px; margin: 0 auto; background-image: linear-gradient(#dde2e8, #f8f8f8); padding-top: 125px;}

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

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

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

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



.step {display: box; margin: 0 auto 10px auto; text-align: center;}
.step img {margin: 14px auto; border-radius: 16px; box-shadow: 0 0 33px #d7dce2; width: 394px;}
.step img.smaller {width: 277px;} 




.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;}
}

@media (max-width: 999px) {
	.facebox h1 {width: 85%; text-align: center; float: none; margin: 0 auto;}
	.facebox div {width: 100%; float: none;}
	.facebox div.facetext {width: 85%; max-width: 800px; float: none; margin: 0 auto; text-align: center; padding: 15px 0 10px 0;}
	.faceimage img {position: relative; top: 0px; right: 0px; width: 440px; height: 305px; margin: 40px auto;}
	.facetext .link_button {margin-top: 25px;}
	.container {padding: 20px 0 50px 0;}


	.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;}

}

@media (max-width: 460px) {

	.relbox .link_button {right: 18%;}
	.startbox .stb img {margin: 20px 15px 10px 0;}
	.step img {width: 85%;}
	.step img.smaller {width: 277px;}
}