@import url('https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100..900;1,100..900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap');
/* ************************ */
/*							*/
/*	Home Sweet Loan Sale */
/*							*/
/* ************************ */

:root{
	--color-hsls-blue:#446DA9;
	--color-hsls-purple:#94298E;
	--color-hsls-grey:#D5E2E4;
	--color-hsls-dark-grey:#7E8C90;
	--color-hsls-base:#3D5A61;
	--color-hover:#b820b0;

	--margin-small:0.62rem;
	--margin-normal:1.25rem;
	--margin-big:3.75rem;

	--text-lead:1.375rem;
	--text-normal:1.125rem;
	--text-small:0.8125rem;
	--h2:3.375rem;
	--h2-3:2.87rem;
	--h3:1.875rem;
	--h4:1.5625rem;
	--h5:1.25rem;
}

.mb-half{margin-bottom:var(--margin-bottom);}
.mb{margin-bottom:var(--margin-normal);}
.mb-big{margin-bottom:var(--margin-big);}

.h2{font-size: var(--h2);}
.h2-3{font-size: var(--h2-3);}
.h3{font-size: var(--h3);}
.h4{font-size: var(--h4);}

.color-hsls-blue{color:var(--color-hsls-blue);}
.color-hsls-purple{color:var(--color-hsls-purple);}
.color-hsls-grey{color:var(--color-hsls-grey);}
.color-hsls-dark-grey{color:var(--color-hsls-dark-grey);}
.color-hsls-base{color:var(--color-hsls-base);}

.bg-color-hsls-blue{background:var(--color-hsls-blue);}

.btn-hsls{line-height: 1.2; color:#fff; display: inline-flex; align-items: center; justify-content: center; text-align: center; text-decoration: none; font-family: 'Inter'; font-size:1.06rem; font-weight: 600; height:3.34rem; border-radius:1.67rem; padding:1rem 1.25rem; border:1px solid #fff;}
.btn-hsls:hover, .btn-hsls:focus, .color-white a.btn-hsls:hover, .color-white a.btn-hsls:focus{text-decoration: none; color:#fff; }
.btn-hsls-purple{background-color: var(--color-hsls-purple);}
.btn-hsls-purple:hover, .btn-hsls-purple:focus{background-color: var(--color-hover);}
.btn-hsls-blue{background-color: var(--color-hsls-blue);}
.btn-hsls-blue:hover, .btn-hsls-blue:focus{background-color: var(--color-hover);}
.btn-hsls-white{background-color:#fff; color:var(--color-hsls-blue)!important;}
.btn-hsls-white:hover, .btn-hsls-white:focus{background-color: var(--color-hover); color:#fff!important;}

.hsls-heading{font-family: 'Montserrat'; color:var(--color-hsls-blue); font-weight: 700;}
.color-white .hsls-heading{color:#fff;}

.lead{font-family: 'Inter'; font-weight: 400;}
.textbox{font-family: 'Inter'; font-weight: 400;}

.content-section:not([class*='bg-'])+.content-section:not([class*='bg-']){padding-top:0;}

.row.align-center{display: flex; align-items: center;}

/* masthead */
.hsls-masthead-section{padding:9rem 0 5.37rem 0;}
.hsls-masthead-section .inner-wrap{padding-left:1rem; display: flex; flex-direction: row-reverse; align-items: center; gap:3.37rem;}
.hsls-masthead-section .image{width:40%; flex:none;}
.hsls-masthead-section .image img{width:100%; max-width: 100%; border-radius:3.25rem;}
.hsls-masthead-section .content{flex-grow:1; display: flex; flex-direction: column; align-items: flex-start;}
.hsls-masthead-section .header-image{ margin-left:-1rem; margin-bottom:var(--margin-normal);}
.hsls-masthead-section .header-image img{width:100%; max-width: 100%;}
.hsls-masthead-section .action-dates{margin-bottom: var(--margin-normal); font-family: 'Montserrat'; font-size: 2.25rem; font-weight: 700; line-height: 1.2;}
.hsls-masthead-section .buttons-group{display: flex; flex-wrap:wrap; gap:0.75rem;}

/* loans */
.loans-block{display: flex; align-items: stretch; gap:2.62rem; margin-left:-8rem; margin-right:-8rem;}
.loans-block .loan{background-image: url('../img/hsls-scissors.svg'); background-repeat: no-repeat; background-position: right calc(100% - 6rem); background-size: 2.8rem auto; padding:2.82rem; width:calc((100% - 2.62rem)/2); border:0.5625rem dashed var(--color-hsls-purple); border-radius:3.18rem;}
.loans-block .loan.color-white{background-image: url('../img/hsls-scissors-white.svg');}
.loans-block .loan .title{margin-bottom:var(--margin-big); font-family: 'Inter'; font-weight: 700; font-size: 1.5rem; text-transform: uppercase; letter-spacing: 0.12rem; color:var(--color-hsls-purple); }
.loans-block .loan.color-white .title{color:#fff;}
.loans-block .loan .loan-offer{margin-bottom:var(--margin-big); color:var(--color-hsls-blue); font-size: 6.25rem; font-weight: 700; line-height: 1; letter-spacing:-0.15rem;}
.loans-block .loan.color-white .loan-offer{color:#fff;}
.loans-block .loan .loan-offer .small{display: block; letter-spacing: -0.0625rem; font-size: 1.87rem;}
.loans-block .loan .loan-offer sup{font-size:0.35em; top:-1.5em;}
.loans-block .loan .textbox ul{padding:0;}
.loans-block .loan .textbox ul li{background-image: url('../img/list-marker-grey.svg'); padding-left:1rem; background-position: 0 0.6rem;}
.loans-block .loan.color-white .textbox ul li{background-image: url('../img/list-marker-white.svg');}
.loans-block .loan .textbox ul li+li{margin:0;}
.loans-block .loan .textbox .comment{font-size: var(--text-small); color:var(--color-hsls-dark-grey);}
.loans-block .loan.color-white .textbox .comment{color:#fff;}

/* reasons */
.reasons-listing{display: flex; align-items: stretch; gap:1rem;}
.reasons-listing .item{display: flex; flex-direction: column; align-items: stretch; width:calc((100% - 1rem*3)/4); background-color: var(--color-hsls-blue); border-radius:1.125rem; overflow: hidden; transform: scaleZ(1);}
.reasons-listing .image{flex:none;}
.reasons-listing .image img{aspect-ratio: 1.333/1; object-fit: cover; width:100%; height:100%;}
.reasons-listing .content{padding:1.5rem;}
.reasons-listing .title{font-size: var(--h4); font-weight: 700; margin-bottom:var(--margin-small);}


/* talk */
.big-buttons-group{display: flex; flex-direction: column; align-items: stretch; gap:1rem;}
.big-buttons-group .btn-hsls{text-align: left; height:6.375rem; justify-content: space-between; font-size: 1.875rem; padding-left:1.75rem; padding-right:1.75rem;}
.big-buttons-group .btn-hsls .fa{font-size: 1.5rem;}

.bottom-hsls-logo{display: flex; flex-direction: column; align-items: center;}
.bottom-hsls-logo .date{font-family: 'Montserrat'; font-size: 2.25rem; font-weight: 700; margin-top:var(--margin-small);}


@media (max-width: 1480px) {
	.loans-block .loan .loan-offer{font-size: 5.25rem; letter-spacing:-0.15rem;}
	.loans-block{margin-left:-3.5rem; margin-right:-3.5rem;}
}

@media (max-width: 1300px) {
	#page-wrap:after{content: ''; position: absolute; inset:0; box-shadow:inset 0 0 0 0 violet; pointer-events: none;}

	.loans-block{margin-left:0; margin-right:0;}
	
}

@media (max-width: 1199px) {
	#page-wrap:after{content: ''; position: absolute; inset:0; box-shadow:inset 0 0 0 0 red; pointer-events: none;}
	
	.loans-block{gap:1rem;}
	.loans-block .loan{background-size: 2rem auto; padding:2rem; width:calc((100% - 1rem)/2);}
	.loans-block .loan .loan-offer{font-size: 4.5rem;}

	.reasons-listing .title{font-size: var(--h5);}

}

@media (max-width: 991px) {
	#page-wrap:after{content: ''; position: absolute; inset:0; box-shadow:inset 0 0 0 0 green; pointer-events: none;}
	
	.hsls-masthead-section{padding-top:5.37rem;}

	.loans-block{flex-direction: column; gap:var(--margin-normal); align-items: stretch;}
	.loans-block .loan{width:auto;}
	.loans-block .loan .loan-offer{font-size: 15vw;}

	.reasons-listing{flex-wrap:wrap;}
	.reasons-listing .item{width:calc((100% - 1rem)/2);}
	
	
	
}

@media (max-width: 767px) {
	#page-wrap:after{content: ''; position: absolute; inset:0; box-shadow:inset 0 0 0 0 blue; pointer-events: none;}
	
	.hsls-masthead-section .inner-wrap{flex-direction: column; align-items: stretch; padding-right:1rem;}
	.hsls-masthead-section .image{width:auto;}
	.hsls-masthead-section .buttons-group{justify-content: center; width:100%;}

	.loans-block .loan{border-width:0.5rem;}

	.row.align-center{display: block;}

	:root{
		--h2:2.07rem;
		--h2-3:1.9rem;
		--h3:1.73rem;
		--h4:1.44rem;
	}
}

@media (max-width: 479px) {
	#page-wrap:after{content: ''; position: absolute; inset:0; box-shadow:inset 0 0 0 0 cyan; pointer-events: none;}

	.hsls-masthead-section .inner-wrap{padding-left:2vw; padding-right:2vw;}
	.hsls-masthead-section .header-image{margin-left:-2vw;}

	.loans-block .loan{border-width:0.375rem;}
	.loans-block .loan{background-size: 1.5rem auto; padding:1.5rem;}

	.reasons-listing .item{width:100%;}
}

@media (max-width: 320px) {
	#page-wrap:after{content: ''; position: absolute; inset:0; box-shadow:inset 0 0 0 0 red; pointer-events: none;}
	
}