/* ************************* */
/* QUIZ			 */
/* ************************* */

/* general */
:root{
	--color-pink:#DC2597;
	--color-dark-blue:#094074;
	--color-yellow:#F8CD25;
	--color-green:#02AC4D;
	--color-blue:#4AC1E0;
	--color-orange:#FA8D2A;
	--color-base:#022F40;
	--color-dark-grey:#7F7F7F;
	--color-light-grey:#F9F9F9;
	--color-border:#E5E5E5;
	
	--color-hover:var(--color-blue);
	
	--margin-small:0.6rem;
	--margin-normal:2rem;
	--margin-big:4rem;
	--side-padding:6rem;
}

.quiz-modal .modal-dialog{width:1140px;}

/* header */	
.quiz-header{border-bottom:1px solid var(--color-border); padding:2rem; display: flex; align-items: center; justify-content: space-between; gap:4rem;}
.quiz-header .title{font-family: 'Merriweather', serif; font-size: 1.37rem; font-weight: 700; line-height: 1.2; letter-spacing: -0.03125rem; color:var(--color-dark-blue);}
.quiz-header .title.disabled{opacity:0.4;}
.quiz-header .close{opacity:1; font-weight: 400; color:var(--color-pink); transition:color 0.2s ease; }
.quiz-header .close > span{display: flex; align-items: center; gap:0.25rem;}
.quiz-header .close .button-title{font-family: 'Muli'; font-size: 0.93rem; letter-spacing: -0.00625rem; line-height: 1.2;padding-top:0.25rem;}
.quiz-header .close:hover, .quiz-header .close:focus{color:var(--color-hover);}
.quiz-header .quiz-progress{position:absolute; left:0; right:0; bottom:-4px; }
.quiz-header .quiz-progress span{background: var(--color-pink); display: block; height:4px; transition:width 0.8s ease;}

/* body */
.quiz-body{padding-top:calc(var(--side-padding) - 2rem);}
.quiz-body.has-bg{background: linear-gradient(0deg, var(--color-light-grey) 0%, var(--color-light-grey) 100%) no-repeat left bottom / 100% 60%;}

.quiz-section{padding:2rem var(--side-padding);}

.quiz-body .intro{text-align: center; padding: 2rem 9rem var(--side-padding) 9rem;}
.quiz-body .intro h1:after{content: ''; margin-top:var(--margin-normal); display: block; margin-left:auto; margin-right:auto; width:4rem; height:6px; background: var(--color-pink);}

.quiz-listing{display: flex; flex-wrap:wrap; align-items: stretch; justify-content: center; gap:2rem;}
.quiz-listing .item{box-shadow: 20px 20px 0 0 rgba(255,255,255,0); cursor: pointer; background: #fff; width:calc((100% - 2rem*2)/3); display: flex; flex-direction: column; align-items: stretch; transition:box-shadow 0.4s ease;}
.quiz-listing .item:hover{box-shadow:10px 10px 0 0 rgba(197,45,129,0.5);}
.quiz-listing .item.selected{box-shadow:10px 10px 0 0 rgba(2,172,77,0.5);}
.quiz-listing .image{width:100%; flex:none;}
.quiz-listing .image img{object-fit: cover; width:100%; height:100%; aspect-ratio:1.6333/1;}
.quiz-listing .title-wrap{padding:1.19rem 2.87rem 1.19rem 1.19rem; font-weight: 700; line-height: 1.2; letter-spacing: -0.03125rem; flex-grow:1; font-family: 'Merriweather', serif; font-size: 1.0625rem; color:var(--color-dark-blue);}
.quiz-listing .check{opacity:0; color:var(--color-green); position: absolute; top:1.37rem; right:1.19rem; transition:opacity 0.2s ease;}
.quiz-listing .item.selected .check{opacity:1;}

.quiz-options-listing{width:65%; margin-left:auto; margin-right:auto;}
.quiz-options-listing .item{width:calc((100% - 2rem)/2);}
.quiz-options-listing .title-wrap{padding-top:2rem; padding-bottom:2rem;}
.quiz-options-listing .check{top:2.25rem;}

.range-control{display: flex; width:65%; margin-left:auto; margin-right:auto; align-items: center; gap:2rem;}
.range-control .range-label{font-weight: 700;}
/*.range-control .range-label:before{content: '$';}*/

.contact-email{width:30rem; margin-left:auto; margin-right:auto;}

/* footer */
.quiz-footer{padding:2rem var(--side-padding) var(--side-padding) var(--side-padding); background: var(--color-light-grey); display: flex; align-items: center; justify-content: space-between;}
.quiz-footer div:first-child{flex-grow:1; flex-basis: 50%;}
.quiz-footer div:last-child{flex-grow:1; flex-basis: 50%; text-align: right;}

/* results page */
.picked-apartments-section{margin-top:-38rem;}
.picked-apartments-section .fp-slider-header:before{display: none;}
.picked-apartments-section .fp-slider-header{padding-left:0; padding-right:11rem;}
.picked-apartments-section #fp-slider{margin-left:-1rem; margin-right:-1rem;}
.picked-apartments-section .fp-more-link{padding-left:0;}
.picked-apartments-section .bg{z-index:-1; background: var(--color-light-grey); position: absolute; top:0; right:0; bottom:0; left:calc((100vw - 1170px)/2 - 1rem);}
.picked-apartments-section .slick-arrow:not(:hover){color:#fff; border-color:#fff;}
.picked-apartments-section .slick-next{right:1rem;}
.picked-apartments-section .slick-prev{right:5.6rem;}

.match-section{display: flex; flex-direction: column; align-items: stretch; justify-content: flex-end; min-height: 37rem;}

.quiz-gallery.gallery-section:after{display: none;}
.quiz-gallery .section-header{display: flex; align-items: center; gap:3rem; justify-content: space-between;}

.fp-section.quiz-fp-section .fp-slider-header::before {display: none;}
.fp-section.quiz-fp-section .fp-slider-header{padding-right:11rem;}
.fp-section.quiz-fp-section .slick-next{right:1rem;}
.fp-section.quiz-fp-section .slick-prev{right:5.6rem;}

.quiz-nbrhds-section .nbrhds-listing::before {top:0;}

.props-listing-section.quiz-props-listing:before{display: none;}
.quiz-props-listing.props-listing-section .mega-search{margin-left:0;}




/* responsive */
@media (max-width: 1199px) {
	#page-wrap{box-shadow:inset 0 0 0 0.2rem red;}
	
	.quiz-listing{gap:1.5rem;}
	.quiz-listing .item{width:calc((100% - 1.5rem*2)/3);}
	
	:root{
		--side-padding:4rem;
	}
	
	.quiz-body .intro{padding-left:6rem; padding-right:6rem;}
	.quiz-modal .modal-dialog{width:940px;}
	
	.quiz-options-listing{width:75%;}
	.quiz-options-listing .item{width:calc((100% - 1.5rem)/2);}
	
	.picked-apartments-section .bg{left:calc((100vw - 970px)/2 - 1rem);}

}

@media (max-width: 991px) {
	#page-wrap{box-shadow:inset 0 0 0 0.2rem green;}
	
	:root{
		--side-padding:2rem;
	}
	
	.quiz-modal .modal-dialog{width:95vw;}
	.quiz-body{padding-top:2rem;}
	.quiz-footer{padding-bottom:4rem;}
	.quiz-body .intro{padding-bottom:4rem;}
	
	.masthead-tall.masthead-picked-apartments{height:43rem;}
	.picked-apartments-section .bg{left:0;}

}

@media (max-width: 767px) {
	#page-wrap{box-shadow:inset 0 0 0 0.2rem blue;}
	
	:root{
		--margin-normal:1.3rem;
		--margin-big:2.5rem;
	}
	
	.quiz-body .intro{padding-left:3rem; padding-right:3rem;}
	.quiz-footer{flex-direction: column; gap:var(--margin-normal);}
	
	.quiz-listing .item{width:calc((100% - 1.5rem)/2);}
	
	.range-control{width:100%; gap:1.5rem;}
	
	.quiz-options-listing{width:100%;}
	
	.contact-email{width:auto;}
	
	.picked-apartments-section .fp-slider-header{padding-right:0;}
	
	.quiz-gallery .section-header{flex-direction: column; align-items: flex-start; gap:var(--margin-normal);}
	
	.fp-section.quiz-fp-section .fp-slider-header{padding-right:0;}
	
	.nbrhds-listing-section + .content-section.quiz-props-listing{margin-top:0;}
}

@media (max-width: 479px) {
	#page-wrap{box-shadow:inset 0 0 0 0.2rem yellow;}
	
	.quiz-listing .item{width:100%;}
}

@media (max-width: 320px) {
	#page-wrap{box-shadow:inset 0 0 0 0.2rem red;}

}