/*======================================================
/ ACCORDIONS
======================================================= */

/* HEADER
======================================================= */
#accordion .a-item .a-header {
	--header: var(--h2);
	--height: var(--113px);--ml:var(--143px);
	--icon-l:url('/templates/baleandanchor/images/icons/arrowr-white.svg') var(--contain);
	--icon-b:url('/templates/baleandanchor/images/icons/arrowr-brown.svg') var(--contain);
	--icon-h:var(--33px); --icon-w:var(--60px); --left: var(--n99px);--right: 20%; --top:var(--3px);
	--close-l:url('/templates/baleandanchor/images/icons/cross-white.svg') var(--contain);
	--close-b:url('/templates/baleandanchor/images/icons/cross-brown.svg') var(--contain);
	--close-h:var(--36px); --close-w:var(--36px); --rotate:90deg;
}


@media (max-width:768px) {
	#accordion .a-item .a-header {
		--height: var(--78px);--ml:0;
		--icon-h:var(--27px); --icon-w:var(--41px); --left: var(--26px);--right: 20%;
		--close-h:var(--27px); --close-w:var(--27px); --h-width:100%; --h-align:center;
	}
}

@media (pointer:coarse) {
	--rotate:0deg;
}

#accordion .a-header {height:var(--height); display:flex;align-items:center;cursor: pointer;}
#accordion h2 {font:var(--h2);margin-bottom:0;margin-left:var(--ml); position:relative;width:var(--h-width, auto); text-align:var(--h-align, left)}
#accordion h2::before {position: absolute;display: block;content:'';background:var(--icon-l);top:var(--top);width:var(--icon-w);height:var(--icon-h);left:var(--left);right:var(--right);transition: .3s all;opacity: 1;}
#accordion .dcream-bg h2::before,#accordion .white-bg h2::before {background:var(--icon-b)}
#accordion .a-header:hover h2::before {transform: rotate(var(--rotate));}
#accordion .a-open .a-header h2::before {opacity:0;}

#accordion h2::after {position: absolute;display: block;content:'';background:var(--close-l);top:0;left:0;width:var(--close-w);height:var(--close-h);left:var(--left);right:var(--right);transition: .3s all;opacity: 0;}
#accordion .dcream-bg h2::after,#accordion .white-bg h2::after {background:var(--close-b)}
#accordion .a-open .a-header h2::after {opacity:1;}


/* BODY
======================================================= */
#accordion .a-item .a-body {
	--max:var(--900px);
	--hpad:var(--40px);
	--tpad:var(--36px); 
	--bpad:var(--vpad); 
	--mb:var(--44px);
	--header:var(--h2); 
	--font:var(--p2);
}

#accordion #a-skydeck .a-body {
	--header:var(--h4);
	--mb:var(--32px);
}

#accordion #a-skydeck .a-body p{margin-bottom: 2em;}
#accordion #a-skydeck .a-body p:last-child{margin-bottom:0;}

#accordion .a-item .buttons {
	--buttons__gap:var(--40px); 
	--buttons__margin-bottom:var(--60px);
	
	--btn__font:var(--sh3);
}


@media (max-width:768px) {
	#accordion .a-item .a-body {
		--max:var(--938px);
		--hpad:var(--26px); --tpad:var(--10px); --mb:var(--22px);
		--header:var(--h2); --font:var(--p2);
	}

	#accordion .a-item .buttons {
		--buttons__gap:0; 
		--buttons__margin-bottom:var(--188px);
		
		--btn__margin-bottom:var(--10px);
	}
	
	#accordion .a-item .buttons a.btn{
		--btnhbg:var(--dbrown);
	}
    #accordion h2.tacm { text-align: center; }
	
	#accordion #a-skydeck .a-body {
		--mb:var(--27px);
	}
}

#accordion .a-body {max-height:0px; opacity:0; overflow:hidden; transition:1s;position:relative;}
#accordion .a-body > div:not(.landlord) { padding:var(--tpad) var(--hpad) var(--bpad);}
#accordion .a-open .a-body {max-height:var(--max); overflow:hidden; opacity:1;}
#accordion .a-body h2:not(.h1) {font:var(--header);margin-bottom:var(--mb);}
#accordion .a-body p:not(.subtext) {font:var(--font);}
#accordion .a-body .btn {text-transform:uppercase;}


/* APARTMENTS
======================================================= */
#accordion #a-apartments .a-body {
	--img1h:var(--250px);
	--img1w:var(--288px);
	--img1trans:var(--67px), var(--0px);
	--img2h:var(--261px);
	--img2w:var(--367px);
	--img2trans:var(--20px), var(--0px);
	--h-align:center;
}

@media (max-width:768px) {
	#accordion #a-apartments .a-body {
		--img2h:var(--221px);
		--img2w:var(--310px);
		--img2trans:0, var(--n50px);
		--img1display:none;
		--left:0;
		--right:auto;
		--top:auto;
		--bottom:0;
		--bpad:var(--30px);
	}	
}

#accordion .a-body .buttons {display:flex;gap:var(--buttons__gap,0);margin-bottom:var(--mb);}
#accordion .a-body .buttons .btn {text-transform: uppercase;font:var(--btn__font);margin-bottom:var(--btn__margin-bottom)}
#accordion #a-apartments img {position:absolute;object-fit: contain;}
#accordion #a-apartments .img1 {top:0;left:0;width:var(--img1w);height:var(--img1h);transform:translate(var(--img1trans));display:var(--img1display, block);}
#accordion #a-apartments .img2 {top:var(--top, 0);right:var(--right, 0);left:var(--left, auto);bottom:var(--bottom,auto);width:var(--img2w);height:var(--img2h);transform:translate(var(--img2trans))}

@media (max-width:768px) {
	#accordion .a-body > div > a.btn{
		--btnfont:var(--nav);
		--btnfcolor:var(--white);
		--btnhbg:var(--dorange);
		--btnpx:var(--8px);--btnpy:var(--23px);
	}
	#accordion #a-apartments.a-open .a-body {
		height: var(--590px);
	}
}

/* AMENITIES
======================================================= */
#accordion #a-amenities .a-body {
	--tpad:0; --mb:var(--5px); --pmb:var(--47px); --pr:var(--184px);
	--imgh:var(--613px);--imgw:var(--640px);--imgtrans:var(--103px)var(--n112px);
	--font:var(--p2);--display:flex;--content-width:var(--409px);
}
#accordion #a-amenities .ampersand {
	--width:var(--308px);
	--mb:var(--32px);
}

@media (max-width:768px) {
	#accordion #a-amenities .a-body {
		--tpad:var(--10px); --bpad:var(--357px); --mb:var(--10px); --pmb:0; --pr:var(--hpad);
		--imgh:var(--458px);--imgw:var(--380px);--imgtrans:var(--n3px)var(--47px);
		--img-top:auto;--img-bottom:0;
		--font:var(--p2);--display:block;
		--content-display:flex;
		--text-align:center;
		--content-width:100%;
	}
	#accordion #a-amenities .ampersand {
		--width:var(--211px);
		--mb:var(--33px); --h-margin:auto; --mt:var(--5px);
	}
}

#accordion #a-amenities .a-body > div {display:var(--display);justify-content: flex-end;position: relative;padding-right:var(--pr);}
#accordion #a-amenities .a-body > div > img {position: absolute;top:var(--img-top,0);bottom:var(--img-bottom,auto);left:0; width:var(--imgw);height:var(--imgh);transform:translate(var(--imgtrans));}
#accordion #a-amenities .a-body > div > div{display:var(--content-display, block);flex-direction:column;text-align:var(--text-align,left);width:var(--content-width);}
#accordion #a-amenities .ampersand {width:var(--width);margin:var(--mt, 0) var(--h-margin, 0) var(--mb);}
#accordion #a-amenities .a-body p {margin-bottom:var(--pmb);}

@media (max-width:768px) {
	#a-amenities .a-body > div > div > h2{order:0;}
	#a-amenities .a-body > div > div > img{order:2;}
	#a-amenities .a-body > div > div > p{order:1;}
	#a-amenities .a-body > div > div > a{order:3;}
}

/* PERKS
======================================================= */
#accordion{
	--display:flex;
}
#accordion #a-perks .a-body {
	--perks-body__padding-top:0; --pl:var(--139px); --pr:0;--bpad:var(--vpad);
	--width:var(--393px); --font:var(--p2);
}
#accordion #a-perks .a-body .btn{
	--btnpy:var(--22px);
}
@media (max-width:768px) {
	#accordion{
		--display:block;
	}
	#accordion #a-perks .a-body {
		--perks-body__padding-top:0; --pl:var(--hpad); --pr:var(--hpad); --bpad:var(--82px);
		--width:100%;
		--text-align:center;
	}
	#accordion #a-perks .a-body .btn{
		--btnpy:var(--22px);
	}
}

#accordion #a-perks .a-body > div {display:var(--display); padding:var(--perks-body__padding-top) var(--pr) var(--bpad) var(--pl); justify-content: space-between;text-align:var(--text-align, left);}
#accordion #a-perks .a-body .copy {width:var(--width)}

/* PERKS SLIDER
======================================================= */
#accordion #a-perks .perk-slide {
	--btn-left:var(--n100px); --btn-right:var(--36px);
	--width:var(--706px); --height:var(--255px); --slm:var(--n26px); --ssm:var(--26px);
	--btn-bottom:45%;
	--icon-font:var(--n4) var(--16px) / var(--18px) var(--hff2);
	--mb:var(--30px);--flex-wrap:no-wrap;
}
@media (max-width:768px) {
	#accordion #a-perks .perk-slide {
		--gap:0 var(--15px);
		--perks__margin-bottom:var(--28px);
		--flex-wrap:wrap;
		--width:100%; 
		--height:fit-content;
		--icon-font:var(--n4) var(--12px) / var(--13px) var(--hff2);
		--mb:var(--50px); 
		--mt:var(--15px);
		--img-width:100%; 
		--img-height:var(--102px);
		--slide-width:calc(33% - var(--15px));
	}
	
	#accordion #a-perks .perk-slide .slide-picture,
	#accordion #a-perks .perk-slide .slide-pet,
	#accordion #a-perks .perk-slide .slide-bike,
	#accordion #a-perks .perk-slide .slide-ampersand {
		--slide-width:calc(50% - var(--15px));
	}
	
	#accordion #a-perks .perk-slide .slide-pet,
	#accordion #a-perks .perk-slide .slide-bike{
		--slide-pr:16.5%;
	}
	#accordion #a-perks .perk-slide .slide-picture,
	#accordion #a-perks .perk-slide .slide-ampersand{
		--slide-pl:16.5%;
	}
}
@media (min-width:769px) {
	#accordion #a-perks .perk-slide .slide-picture {
		--img-width:var(--98px); --img-height:var(--143px); --margin:0 0 var(--30px) 0;
	}
	#accordion #a-perks .perk-slide .slide-pet {
		--img-width:var(--148px); --img-height:var(--194px); --margin:0 0 var(--n20px) 0;
	}
	#accordion #a-perks .perk-slide .slide-flexible {
		--img-width:var(--164px); --img-height:var(--113px); --margin:var(--32px) 0 var(--28px);
	}
	#accordion #a-perks .perk-slide .slide-broadband {
		--img-width:var(--132px); --img-height:var(--138px); --margin:0 0 var(--36px);
	}
	#accordion #a-perks .perk-slide .slide-furniture {
		--img-width:var(--184px); --img-height:var(--198px); --margin:0;
	}
	#accordion #a-perks .perk-slide .slide-ampersand {
		--img-width:var(--185px); --img-height:var(--224px); --margin:var(--10px) 0 0; --pmargin:var(--n37px) 0 0 var(--n91px);
	}
	#accordion #a-perks .perk-slide .slide-bike {
		--img-width:var(--118px); --img-height:var(--215px); --margin:0 0 var(--n5px);
	}
}

#accordion #a-perks .perk-slide {width:var(--width);margin-bottom:var(--mb,0);margin-top:var(--mt, var(--5px));display:flex;justify-content: space-between;height:var(--height);flex-wrap:var(--flex-wrap);gap:var(--gap,0);}
#accordion #a-perks .perk-slide .slick-list {margin:0 var(--slm)}
#accordion #a-perks .perk-slide .slide {width:var(--slide-width, fit-content);padding-left:var(--slide-pl,0);padding-right:var(--slide-pr);margin-bottom:var(--perks__margin-bottom)}
#accordion #a-perks .perk-slide .slick-slide {margin:0 var(--ssm);}
#accordion #a-perks .perk-slide p {text-transform: uppercase;text-align: center; font:var(--icon-font);margin:var(--pmargin,0);}
#accordion #a-perks .perk-slide .slide img {width:var(--img-width);height:var(--img-height);margin:var(--margin);}


@media (max-width:768px) {
	#accordion #a-perks .copy{margin-bottom:var(--35px);}
}


/* LANDLORD
======================================================= */

#accordion #a-landlord.a-open .a-body {padding: var(--14px) var(--112px) var(--80px);}
@media (max-width:768px) {
	#accordion #a-landlord.a-open .a-body {padding: var(--10px) 0 var(--30px);}
}

/* LANDLORD
======================================================= */
#accordion #a-location .a-body {
	--shmb:var(--20px); --mb:var(--59px);--h3mb:var(--5px);--pt:0;--pl:var(--88px);
	--img1h:var(--532px);--img1w:var(--552px);
	--img2h:var(--393px);--img2w:var(--450px);--img2trans:var(--370px) var(--n26px);
	--copyw:var(--429px);
	--hmb:var(--16px);--pmb:var(--56px);
	--img-column-width:var(--img1w);
	--img-object-fit:contain;
}
@media (max-width:768px) {
	#accordion #a-location .a-body {
		--section-flex-wrap:wrap;
		--copyw:100%;
		--img-column-width:100%;
		--copy-text-align:center;
		--img1w:100%;
		--img-object-fit:cover;
		--pl:var(--hpad); --pt:var(--10px);
		--pmb:var(--21px);--img-mb:var(--27px);
		--h2-align:center;
	}
}
#accordion #a-location .a-body > div {display:flex;flex-wrap:var(--section-flex-wrap, no-wrap);justify-content: space-between;padding:var(--pt) var(--hpad) var(--vpad) var(--pl);}
#accordion #a-location .img-wrap {position:relative;width:var(--img-colum-width)}
#accordion #a-location .img1 {width:var(--img1w);height:var(--img1h);object-fit:var(--img-object-fit);margin-bottom: var(--img-mb,0);}
#accordion #a-location .img2 {position: absolute;bottom:0;right:var(--n372px);width:var(--img2w);height:var(--img2h);transform:translate(var(--img2trans))}
#accordion #a-location .a-body > div > div:not(.img-wrap){width:var(--copyw);text-align:var(--copy-text-align, left)}
#accordion #a-location .a-body h2 {margin-bottom:var(--hmb);text-align:var(--h2-align,left)}
#accordion #a-location .a-body p {margin-bottom:var(--pmb);}

#accordion #a-location .a-body .btn {color:var(--fc2)}

@media (max-width:768px) {
	#accordion #a-location .a-body > div > div:not(.img-wrap){order:0;}
	#accordion #a-location .img-wrap{order:1;}
	#accordion #a-location .img-wrap .img1{var(--img-object-fit);object-position:var(--n58px);}
}

/* LANDLORD
======================================================= */
#accordion #a-skydeck .a-body{
	--max:100%;
}
#accordion #a-skydeck .a-body > div{
	
	padding: var(--10px) var(--110px) var(--100px);
}

#accordion #a-skydeck .columns{display:flex; margin-top:var(--45px);}
#accordion #a-skydeck img.fw{width:100%; max-height:var(--379px); object-fit:cover;}

#accordion #a-skydeck h3.p2{font-weight: 500;}
#accordion #a-skydeck .column-1{
	--direction:column;
	--text-align:left;
	width:var(--590px);
	flex:unset;
	--column1-jc:flex-start;
}

#accordion #a-skydeck .column-2{
	--direction:column;
	--text-align:left;
	width:var(--414px);
	flex:unset;
	--column2-jc:flex-start;
	
	--img1XY:0;
}
#accordion #a-skydeck .column-2 > img{width:100%; height:var(--247px); object-fit:cover; margin-bottom: var(--24px);}
#accordion #skydeck-form{width:100%; height:var(--430px);}
@media (max-width:768px) {
	#accordion #a-skydeck .a-body{
		--max:100%;
	}
	#accordion #a-skydeck .a-body > div{
		--max:100%;
		padding: var(--10px) var(--hpad) var(--50px);
	}
	#accordion #a-skydeck .column-2 >  img{height:var(--207px);}
	#accordion #a-skydeck img.fw{width:100%; height:var(--179px); object-fit:cover;}
	#accordion #a-skydeck .columns{flex-wrap: wrap; margin-top: var(--25px);}
	#accordion #a-skydeck .column-1,
	#accordion #a-skydeck .column-2{
		width:100%;
	}
	
	#accordion #skydeck-form{width:100%; height:var(--340px);}
	#accordion #skydeck-form iframe{height:100% !important}
}