@font-face {
  font-family: "Montserrat.ttf";
 src: url("../assets/fonts/Montserrat/Montserrat-Regular.ee6539921d71.ttf")
}

@font-face {
  font-family: "Montserrat-SemiBold.ttf";
 src: url("../assets/fonts/Montserrat/Montserrat-SemiBold.c641dbee1d75.ttf")
}

@font-face {
  font-family: "Montserrat-Medium.ttf";
 src: url("../assets/fonts/Montserrat/Montserrat-Medium.c8b6e083af3f.ttf")
}

@font-face {
  font-family: "Comforta-Regular.ttf";
 src: url("../assets/fonts/Comfortaa/static/Comfortaa-Regular.c2488bfda16e.ttf");
}

@font-face {
  font-family: "Comforta-Variable.ttf";
 src: url("../assets/fonts/Comfortaa/Comfortaa-VariableFont_wght.f40889caa259.ttf");
}

@font-face {
  font-family: "Comforta-Bold.ttf";
 src: url("../assets/fonts/Comfortaa/static/Comfortaa-Bold.801965b04368.ttf");
}

/* Головна/Стати клиентом */
input{
    outline:none;
}
.way{
  width:80%;
  margin:0 auto;
  margin-top:70px;
margin-bottom:30px;
  color: #303669;
font-family: Montserrat;
font-size: 12px;
font-weight: 400;
font-style: normal;
letter-spacing: normal;
text-align: left;
}


/* Bank ID */
.diya{
  width:676px;
  margin:0 auto;
  margin-top:54px;
  text-align: center;
}
.bg-1{
  position:absolute;
  left:0px;
}
.bg-1 img{
  width:245px;
  height:250px;
  max-width:245px;
  max-height:250px;
}
.a-bg-2 img{
  width:207px;
  height:121px;
  max-width:207px;
  max-height:121px;
}
.diya_title{
color: #303669;
font-family:"Montserrat-SemiBold";
font-size: 20px;
font-weight: 500;
font-style: normal;
letter-spacing: normal;
line-height: 40px;
text-align: center;
width:100%;
}

.fa-info-circle{
  color:#039aff;
  font-size:16px;
  position:relative;
  bottom:6px;
}

.fa-info-circle:hover{

}

.diya_img{
  margin-top:23px;
  max-width:222px;
  max-height:48px;
}

.bank-btn{
  width:303px;
  height:239px;
  background-size:cover;
  background-image:url("../assets/images/bg-mechan.c6b70dbe888f.png");
  margin:0 auto;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
.btn-item{
  border:none;
  width: 266px;
height: 92px;
border-radius: 10px;
border: 1px solid rgba(162, 194, 221, 0.95);
background-color: #ddebf7;
color: #000000;
font-family: Montserrat;
font-size: 20px;
font-weight: 500;
font-style: normal;
letter-spacing: normal;
line-height: 30px;
}

.fa-arrow-right{
  position:relative;
  left:15px;
  font-size:19px;
}


/* Оберить банк */

.show-banks{
  color: #000000;
font-family: "Montserrat-SemiBold";
font-size: 18px;
font-weight: 400;
font-style: normal;
letter-spacing: normal;
line-height: 50px;
text-align: left;
display:none;
}

.bank_item{
  width:100%;
  height:80px;
  display:flex;
}
.bank-img{
  width:30%;
}
.bank-img img{
  width:100%;
  max-height:80px;
}
.bank-name{
  font-family:Montserrat;
  font-size:16px;
}

.modal-bankID{
  width:333px;
  height:auto;
  padding-top:10px;
  padding-bottom:10px;
  box-shadow: 0 0 10px rgba(99, 112, 140, 0.16);
  background-color: #ffffff;
  position:absolute;
  top:-150px;
  right:-150px;
  display:none;
}

.angle{
  width:30px;
  height:30px;
  position:relative;
  top:200px;
  left:0px;
  z-index:0;
  transform:rotate(410deg)translateX(-50%);
  background-color: #ffffff;
}
.b-id{
  position:relative;
}
.bankID-them{
  color: #000000;
font-family: "Montserrat-SemiBold";
font-size: 15px;
font-weight: 400;
font-style: normal;
letter-spacing: normal;
line-height: 18px;
text-align: left;
width:271px;
margin:0 auto;
/*margin-top:17px;*/
}

.bankID-ithem{
color: #000000;
font-family: Montserrat;
font-size: 12px;
font-weight: 400;
font-style: normal;
letter-spacing: normal;
line-height:25px;
text-align: left;
width:271px;
margin:0 auto;
margin-top:17px;
}

.bank_item:hover{
  background-color:blue;
}

.proceed-btn{
  width: 229px;
height: 48px;
border-radius: 24px;
background-color: #0099ff;
border:none;
display:block;
margin:0 auto;
margin-top:65px;
color: #f6f6f6;
font-family: Montserrat;
font-size: 18px;
font-weight: 700;
font-style: normal;
letter-spacing: normal;
line-height: 50px;
}

/* Заява приеднання */

.statement-join{
  margin-top:95px;
}
.statement-join h3{
color: #303669;
font-family:Montserrat-SemiBold;
font-size: 40px;
font-weight: 500;
font-style: normal;
letter-spacing: normal;
line-height: 100px;
text-align:center;
}

.a-bg-2{
  position:absolute;
  right:0px;
}

.statement-description{
color: #303669;
font-family: Montserrat;
font-size: 20px;
font-weight: 500;
font-style: normal;
letter-spacing: normal;
line-height: 30px;
text-align: center;
}

.lbl{
  color: #303669;
font-family: Montserrat;
font-size: 24px;
font-weight: 700;
font-style: normal;
letter-spacing: normal;
text-align:center;
display:block;
margin:0 auto;
  margin-top:54px;
}
.form-row{
  width:60%;
  margin:0 auto;
  display: flex;
  justify-content: space-between;
  margin-top:22px;
}
.inpt{
  width: 418px;
height: 59px;
box-shadow: 0 0 10px rgba(99, 112, 140, 0.16);
border-radius: 10px;
background-color: #ffffff;
border:none;
}
input{
  outline:none;
  text-align:center;
}
select{
  color: #000000;
font-family: Montserrat;
font-size: 18px;
font-weight: 400;
text-align:center;
padding-left:30px;
  outline: none;
}
select:after{
  padding-right:100px;
}
option:placeholder{
  margin-left:100px;
}
::-webkit-input-placeholder{
  color: #b2b5cc;
font-family: "Montserrat-SemiBold";
font-size: 18px;
font-weight: 400;
font-style: normal;
letter-spacing: normal;
line-height: 100px;
text-align: left;
position:relative;
left:20px;
}

:-ms-input-placeholder{
  color: #b2b5cc;
font-family: "Montserrat-SemiBold";
font-size: 18px;
font-weight: 400;
font-style: normal;
letter-spacing: normal;
line-height: 100px;
text-align: left;
position:relative;
left:20px;
}

:-moz-placeholder{
  color: #b2b5cc;
font-family: "Montserrat-SemiBold";
font-size: 18px;
font-weight: 400;
font-style: normal;
letter-spacing: normal;
line-height: 100px;
text-align: left;
position:relative;
left:20px;
}

::-moz-placeholder{
  color: #b2b5cc;
font-family: "Montserrat-SemiBold";
font-size: 18px;
font-weight: 400;
font-style: normal;
letter-spacing: normal;
line-height: 100px;
text-align: left;
position:relative;
left:20px;
}

.left-input p ,.right-input p{
  color: #303669;
font-family: Montserrat;
font-size: 14px;
font-weight: 400;
font-style: normal;
letter-spacing: normal;
text-align: left;
margin-bottom:1em;
}

.radio{
  display:flex;
  width:100%;
}
.radio3{
  display:flex;
  justify-content: flex-start;
  align-items: center;
  height:auto;
  margin-top:20px;
}
.radio p{
  color: #303669;
font-family: Montserrat;
font-size: 14px;
font-weight: 400;
font-style: normal;
letter-spacing: normal;
width:auto;
  margin-left:20px;
}

.r-block{
  width:25px;
  height:17px;
  margin-left:14px;
}
.r-block2{
  width:25px;
  height:17px;
  margin-right:15px;
}

.form-row2{
  display:flex;
  justify-content:center;
}

.radio2{
  display: flex;
  justify-content:center;
  align-items:center;
  height:auto;
}

.agreement{
  display:flex;
  justify-content: center;
  align-items: center;
  margin-bottom:0px;
  margin-top:15px;
}
.agreement p{
  margin:0px;
  color: #01afff;
font-family: Montserrat;
font-size: 15px;
font-weight: 400;
}
.agrm-img{
  max-width:15px;
  max-height:16px;
  width:15px;
  height:16px;
  margin-left:1em;
}

.form-row3{
  display:flex;
  justify-content:flex-end;
}

.registration{
  margin-top:4em;
  width:420px;
  margin:0 auto;
}

.registration-form{
  display:flex;
  justify-content: center;
  align-items:center;
  flex-direction:column;
}
.registration-radio{
  margin-top:3em;
}

.r-input{
  margin-top:3em;
}

.radio span{
  color:#96d2f9;
}

input[name="file"]{
  opacity:0;
  position:absolute;
}
.btn-blue{
  width: 229px;
height: 49px;
border-radius: 24px;
  background-color:#0099ff;
color: #f6f6f6;
font-family: Montserrat;
font-size: 18px;
font-weight: 700;
font-style: normal;
border:none;
margin:0 auto;
display:flex;
  justify-content:center;
  align-items:center;
margin-top:90px;
  text-align:center;
}
.btn-blue:hover{
  background-color:#ff3399;
  color:white;
}
.bgg{
  position:relative;
  height:300px;
}
.bg-ft{
  position:absolute;
  top:250px;
  left:130px;
  z-index:0;
}
.bg-ft img{
  width:349px;
  height:168px;
  max-width:349px;
  max-height:168px;
}
.bg-ft2{
  position:absolute;
  right:-120px;
  top:150px;
  z-index:0;
}
.bg-ft2 img{
  width:362px;
  height:316px;
  max-width:362px;
  max-height:316px;
}

/* Адаптация */

@media(max-width:1740px){
  .form-row{
    width:70%;
  }
}

@media(max-width:1600px){
  .bg-ft2{
    right:-30px;
  }
}
@media(max-width:1370px){
  .form-row{
    width:75%;
  }
  .bg-1 img{
    width:225px;
    height:230px;
  }
  .bg-ft img{
    width:329px;
    height:148px;
  }
  .bg-ft2{
    top:180px;
  }
  .bg-ft2 img{
    width:332px;
    height:286px;
  }
  .a-bg-2 img{
    width:187px;
    height:100px;
  }
  .diya_img{
    width:180px;
  }
  .modal-bankid{
    width:300px;
    height:340px;
  }
  .bankid-them{
    margin-top:0px;
  }
  .angle{
    z-index:-500000;
  }
  .modal-bankID{
    top:-120px;
  }
}

@media(max-width:1270px){
  .form-row{
    width:80%;
  }
}

@media(max-width:1170px){
  .form-row{
    width:85%;
  }
  .inpt{
    width:370px;
    height:50px;
  }
  input::placeholder{
    font-size:14px;
  }
  .bg-1 img{
    width:200px;
    height:215px;
  }
  .btn-item{
    width:230px;
    height:70px;
    margin:0 auto;
  }
  .agreement{
    margin-bottom:3em;
  }
  .btn-blue{
    width:190px;
    font-size:16px;
  }
}

@media(max-width:1100px){
  .form-row{
    width:90%;
  }
  .inpt{
    width:400px;
  }
  .bg-ft2{
    top:100px;
  }
  .bg-ft2 img{
    width:240px;
    height: 258px;
  }
  .bg-ft img{
    width:300px;
    height:120px;
  }
  .r-block2{
    width:20px;
    height:15px;
  }
  .bg-ft{
    top:180px;
    left:20px;
  }
  .bg-1 img{
    width:200px;
    height:210px;
  }
  .btn-item{
    width:230px;
    height:80px;
    margin:0 auto;
  }
  .bgg{
    height:200px;
  }
}

@media(max-width:1000px){
  .form-row{
    width:95%;
  }
  .proceed-btn{
    width:190px;
    font-size:16px;
    height:49px;
  }
}

@media(max-width:991px){
  .form-row{
    flex-direction: column;
    align-items:center;
  }
  .left-input,.right-input{
    margin-top:2em;
  }
  .radio3{
    justify-content:flex-start !important;
    margin-top:2em;
  }
  .diya{
    width:95%;
    margin:0 auto;
  }
  .diya_title{
    width:70%;
    margin:0 auto;
  }
  .lbl{
    line-height: 70px;
  }
  .modal-bankID{
    transform:none;
    right:10%;
    width:280px;
    top:-40px;
    height:auto;
    padding-top:1em;
    padding-bottom:1em;
    padding-left:20px;
    padding-right:20px;
  }
  .bankID-them{
    width:100%;
  }
  .angle{
    display:none;
  }
  .bankID-ithem{
    width:100%;
  }
  .radio{
    justify-content: center;
  }
  .agreement{
    margin-bottom:3em;
  }
  .registration{
    width:95%;
  }
  .left-input p,.right-input p{
    margin-bottom:1em;
  }

  .right-input p{
    text-align:left;
    width:400px;
    margin:0 auto;
    padding-top:20px;
    padding-bottom:20px;
  }
  .inpt{
    margin:0 auto;
    display: block;
  }
  .registration-radio{
    width:50%;
    margin:0 auto;
  }
  .bgg{
    height:200px;
  }
  .bg-ft2{
    top:80px;
  }
  .bg-ft{
    top:160px;
  }
  .modal-bankID{
    right:0px;
    top:0px;
    z-index:5000;
  }
}

@media(max-width:900px){
  .bg-ft2{
    top:110px;
  }
  .bg-ft img{
    width:280px;
    height:100px;
  }
  .bg-ft2 img{
    width:260px;
    height:210px;
  }
  .bg-1 img{
    width:180px;
    height:190px;
  }
  .a-bg-2 img{
    width:167px;
    height:80px;
  }
  .modal-bankID{
    top:0px;
  }
}

@media(max-width:768px){
  .bg-1 img{
    width:160px;
    height:170px;
  }
  .bg-ft2{
    top:110px;
  }
  .bg-ft2 img{
    width:220px;
    height:190px;
  }
  .bg-ft img{
    width:260px;
    height:80px;
  }
  .bg-ft{
    top:190px;
  }
  .a-bg-2 img{
    width:147px;
    height:70px;
  }
  .diya_title{
    font-size:19px;
  }
  .diya_img{
    width:210px;
  }
  .bank-btn{
    width:240px;
    background-size:100%;
    background-repeat: no-repeat;
  }
  .statement-join{
    margin-top:50px;
  }
  .statement-join h3{
    font-size:35px;
  }
  .statement-description{
    font-size:19px;
  }
  .lbl{
    margin-top:2em;
  }
  .radio{
    margin-top:1em;
  }
  .form-row{
    margin-top:40px;
  }
  select{
    font-size:16px;
  }
  .btn-item{
    width:90%;
    margin:0 auto;
    height:70px;
    font-size:18px;
  }
}

@media(max-width:600px){
  .diya_title{
    font-size:17px;
  }
  .diya_img{
    width:180px;
  }
  .bank-btn{
    margin-top:1em;
  }
  .btn-item{
    width:80%;
    height:55px;
    font-size:16px;
  }
  .fa-arrow-right{
    font-size:16px;
  }
  .bg-1 img{
    width:110px;
    height:120px;
  }
  .statement-join{
    margin-top:15px;
  }
  .statement-join h3{
    font-size:28px;
  }
  .statement-description{
    font-size:17px;
  }
  .a-bg-2 img{
    width:120px;
    height:60px;
  }
  .lbl{
    font-size:22px;
  }
  .form-row{
    margin-top:20px;
  }
  .r-block{
    position: relative;
    top:2px;
    width:20px;
    margin-left:5px;
  }
  .registration-radio{
    width:80%;
  }
  .radio p{
    font-size:13px;
    margin-top:0px;
    margin-left:1em;
  }
  .r-block2{
    width:11px;
    margin-right:0px;
  }
  .bgg{
    height:100px;
  }
  .bg-ft{
    display:none;
  }
  .bg-ft2 img{
    width:160px;
    height:auto;
  }
  .bg-ft2{
    top:40px;
  }
}

@media(max-width:500px){
  .diya_title{
    width:90%;
  }
  .diya_img{
    width:160px;
  }
  .bank-btn{
    width:160px;
    height:150px;
  }
  .proceed-btn{
    width:160px;
    height:45px;
    font-size:12px;
    line-height:30px;
  }
  .btn-item{
    width:100%;
    height:50px;
    font-size:14px;
  }
  .fa-arrow-right{
    font-size:14px;
  }
  .statement-join{
    margin-top:0px;
  }
  .statement-join h3{
    font-size:25px;
  }
  .statement-description{
    font-size:15px;
  }
  .bg-1 img{
    width:90px;
    height:100px;
  }
  .a-bg-2 img{
    width:100px;
    height:50px;
  }
  .lbl{
    font-size:20px;
  }
  .form-row{
    width:100%;
    margin-top:0px;
  }
  .left-input,.right-input{
    margin-top:1em;
    width:100%;
  }
  .inpt{
    width:70%;
    height:45px;
    display:block;
    margin:0 auto;
  }
  .left-input p,.right-input p{
    width:70%;
    margin:0 auto;
    padding-bottom:10px;
    padding-top:10px;
    font-size:13px;
  }
  input::placeholder{
    font-size:12px;
  }
  select{
    font-size:12px;
    padding-left:15px;
  }
  .radio3{
    justify-content: flex-start;
    margin-top:2em;
  }
  .agreement p{
    font-size:13px;
  }
  .agrm-img{
    width:13px;
    height:13px;
  }
  .lbl{
    margin-top:1em;
    font-size:18px;
  }
  .btn-blue{
    width:160px;
    height:45px;
    font-size:13px;
    margin-top:2em;
  }
  .bg-ft2{
    right:-20px;
  }
  .bg-ft2 img{
    width:130px;
  }
  .bankid-them{
    font-size:13px;
  }
  .bankid-ithem{
    font-size:10px;
    line-height: 22px;
  }
  .modal-bankID{
    width:240px;
  }
  .statement-join h3{
    line-height:50px;
    margin-top:1em;
  }
  .way{
    line-height:50px;
    width:100%;
  }
  .bgg{
    display:none;
  }
}

@media(max-width:400px){
  .diya_title{
    width:100%;
  }
  .bg-1 img{
    width:70px;
    height:80px;
  }
  input::placeholder{
    font-size:11px;
  }
  .bg-ft2{
    display:none;
  }
  .inpt{
    width:90%;
  }
  .proceed-btn{
    width:130px;
    height:40px;
    font-size:12px;
    line-height:30px;
  }
  .bgg{
    height:50px;
  }
  .radio p{
    text-align:center;
  }
  .left-input p,.right-input p{
    width:90%;
  }
  .modal-bankID{
    width:200px;
    right:20%;
    padding-left:10px;
    padding-right:10px;
  }
}
@media(max-width:300px){
  .modal-bankID{
    padding-left:5px;
    padding-right:5px;
    right:5%;
  }
}