/******************
    SPIREPOINT
******************/

$imgw! {
    if (css.vars.w()>1600) "1920";
    else if (css.vars.w()>1280) "1600";
    else if (css.vars.w()>1024) "1280";
    else if (css.vars.w()>980) "1024";
    else if (css.vars.w()>767) "980";
    else "767";
}
$usel(none){-moz-user-select:&a;-ms-user-select:&a;-webkit-user-select:&a;user-select: &a;}
/***** FONTS *****/
/*100,300,400,700*/
$primaryFont(300){font-family: "Brandon Grotesque", sans-serif;font-weight:&a;} 

/*100,200,300,400,500,700,900*/
$secondaryFont(300){font-family: "BW Vivant", sans-serif,Arial;font-weight:&a;}


/********** COLORS **********/
$base{#434343}
$gold{#B49039}
$darkGold{#8c7832}
$gray{#434343}
$accent{#716E6E}

$offWhite{#F3F2F3}
$offBlack{#191919}

/*******FONT SIZES********/
$bfont! { css.vars.w()>767 ? "20px" : "16px"; }

/**** FLEX *****/
$order(1){order:&a;-webkit-order:&a;}
$flex {display: -webkit-flexbox;display: -ms-flexbox;display: flex;}
$flexCenter {-webkit-box-pack: center;-ms-flex-pack: center;justify-content: center;-webkit-box-align: center;-ms-flex-align: center;align-items: center;}
$flexContentEnd {-webkit-box-pack: end;-ms-flex-pack: end;justify-content: flex-end;}
$flexContentStart {-webkit-box-pack: start;-ms-flex-pack: start;justify-content: flex-start;}
$flexContentCenter {-webkit-box-pack: center;-ms-flex-pack: center;justify-content: center;}
$flexItemCenter {-webkit-box-align: center;-ms-flex-align: center;align-items: center;}
$flexItemStart {-webkit-box-align: start;-ms-flex-align: start;align-items: flex-start}
$flexItemEnd {-webkit-box-align: end;-ms-flex-align: end;align-items: flex-end;}
$flexItemStretch {-webkit-box-align:stretch;-ms-flex-align:stretch;align-items:stretch}
$flexColumn {-webkit-box-orient: vertical;-webkit-box-direction: normal;-ms-flex-direction: column;flex-direction: column;}
$flexColumnR {-webkit-box-orient: vertical;-webkit-box-direction: reverse;-ms-flex-direction: column-reverse;flex-direction: column-reverse;}
$flexRow {-webkit-box-orient: horizontal;-webkit-box-direction: normal;-ms-flex-direction: row;flex-direction: row;}
$flexRowR{-webkit-box-orient: horizontal;-webkit-box-direction: reverse;-ms-flex-direction: row-reverse;flex-direction: row-reverse;}
$flexContentSpaceBetween {-webkit-box-pack: justify;-ms-flex-pack: justify;justify-content: space-between;}
$flexContentSpaceEvenly {-webkit-box-pack: justify;-ms-flex-pack: justify;justify-content: space-evenly;}
$flexContentSpaceAround {-webkit-box-pack: justify;-ms-flex-pack: justify;justify-content: space-around;}
$flexW(1) {-webkit-box-flex:&a;-ms-flex:&a;flex:&a;}
$flexWrap {-ms-flex-wrap: wrap;flex-wrap: wrap;}
$vcenter{display:flex;flex-direction:column;justify-content:center;}

/****** ABSOLUTE POSITIONING *********/
$xCenter{left: 50%; transform: translateX(-50%);}
$yCenter{top: 50%; transform: translateY(-50%);}
$allCenter{position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);}

/****** PSEUDO ELEMENTS ********/
$psDefault {content: '';position: absolute;display: block;}
$bgDefault {center/cover no-repeat;}

/***** TRANSITIONS *****/
$bezier {cubic-bezier(.435,.01,.135,1)}
$boxShadow {box-shadow: rgba(0, 0, 0, 0.25) 0px 5px 12px;}

/***** CONTENT WIDTH *****/
/* options: min, max, fit */
$contentWidth(max) {width: -webkit-&a-content;width: -moz-&a-content;width: &a-content;}

/***** FONTFACES ******/
@font-face {font-family: "Brandon Grotesque"; src: url(/assets/legacy/BrandonGrotesque-Thin.ttf) format('truetype'); font-weight: 100;}
@font-face {font-family: "Brandon Grotesque"; src: url(/assets/legacy/BrandonGrotesque-Light.ttf) format('truetype'); font-weight: 300;}
@font-face {font-family: "Brandon Grotesque"; src: url(/assets/legacy/BrandonGrotesque-Regular.ttf) format('truetype'); font-weight: 400;}
@font-face {font-family: "Brandon Grotesque"; src: url(/assets/legacy/BrandonGrotesque-Medium.ttf) format('truetype'); font-weight: 500;}
@font-face {font-family: "Brandon Grotesque"; src: url(/assets/legacy/BrandonGrotesque-Bold.ttf) format('truetype'); font-weight: 700;}
@font-face {font-family: "Brandon Grotesque"; src: url(/assets/legacy/BrandonGrotesque-Black.ttf) format('truetype'); font-weight: 900;}

@font-face {font-family: "BW Vivant";src: url(/assets/legacy/BwVivant-Skinny.ttf);font-weight: 100;}
@font-face {font-family: "BW Vivant";src: url(/assets/legacy/bw-vivant-thin.ttf);font-weight: 200;}
@font-face {font-family: "BW Vivant";src: url(/assets/legacy/bw-vivant-light.ttf);font-weight: 300;}
@font-face {font-family: "BW Vivant";src: url(/assets/legacy/bw-vivant-regular.ttf);font-weight: 400;}
@font-face {font-family: "BW Vivant";src: url(/assets/legacy/bw-vivant-medium.ttf);font-weight: 500;}
@font-face {font-family: "BW Vivant";src: url(/assets/legacy/bw-vivant-bold.ttf);font-weight: 700;}
@font-face {font-family: "BW Vivant";src: url(/assets/legacy/bw-vivant-black.ttf);font-weight: 900;}

/***** GLOBAL *****/

#family-office
{
	h1{color:#fff;font-size:5.3em;$secondaryFont(200);line-height:1.02em;text-transform:uppercase;max-width:700px}
	#container h2{color:#fff;font-size:5.2em;line-height:1.07em;color:#fff;$secondaryFont(300);padding-top:100px;max-width:670px}
	#container h2::before{border-radius:50%;border:1px solid #8d7931;display:inline-block;position:absolute;left:0;top:20px;$secondaryFont(300);font-size:1rem;width:60px;height:60px;line-height:60px;text-align:center;}
	h4{color:#756444;$secondaryFont(400);font-size:0.95em;text-transform:uppercase;letter-spacing:0.3em;margin-bottom:1.5em;}
	h5{font-size:2.45em;$secondaryFont(300);color:#101e29;line-height:1.45em;margin-bottom:1em;}
	.half{width:50%;padding:125px 84px 125px 0;box-sizing:border-box;display:flex;flex-direction:column;justify-content:center;min-height:calc(100vh - 170px);height:fit-content;border-right:1px solid #BEBBB3;}
	ul{list-style:none;}
	
	.s4,.s6,.s8,.s10,.s12,.s14,.s16
	{
		&{background:#fff;height:fit-content;min-height:100vh;}
		li{position:relative;padding:1em 0;}
		li span{opacity:0;transform:translate(0,-20px);transition:all 0.5s ease;position:relative;color:#7e7770;font-size:1.55em;$primaryFont(300);display:block;}
		li::after{content:"";width:0;height:1px;background:#BEBBB3;position:absolute;bottom:0;left:0;transition:width 1.5s ease;}
		li:nth-child(1)::after{transition-delay:0;}
		li:nth-child(2)::after{transition-delay:0.2s;}
		li:nth-child(3)::after{transition-delay:0.4s;}
		li:nth-child(4)::after{transition-delay:0.6s;}
		li:nth-child(5)::after{transition-delay:0.8s;}
		li:nth-child(6)::after{transition-delay:1s;}
		li:nth-child(7)::after{transition-delay:1.2s;}
		li:nth-child(1) span{transition-delay:0.3s;}
		li:nth-child(2) span{transition-delay:0.6s;}
		li:nth-child(3) span{transition-delay:0.9s;}
		li:nth-child(4) span{transition-delay:1.2s;}
		li:nth-child(5) span{transition-delay:1.5s;}
		li:nth-child(6) span{transition-delay:1.8s;}
		li:nth-child(7) span{transition-delay:2.1s;}
		h5{font-size:1.7em;font-weight:200;}
	}
	.s4.in-view,.s6.in-view,.s8.in-view,.s10.in-view,.s12.in-view,.s14.in-view,.s16.in-view
	{
		li::after{width:100%}
		li span{opacity:1;transform:translate(0,0);}
	}	
	.img{position:absolute;height:calc(100% - 170px);width:calc(50% - 170px);top:85px;left:calc(50% + 85px);clip-path: polygon(20% 0%, 80% 0%, 80% 100%, 20% 100%);transition:clip-path 1s ease;}
	.in-view .img{clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);}
	.s1
	{
		&{background:#17232D;position:relative;height:100vh;max-height:1000px;}
		.contain{height:100%;display:flex;flex-direction:column;justify-content:center;position:relative;z-index:2;}
		#draw1{z-index:1;}
		#draw1,> svg{width:100%;height:100%;position:absolute;top:0;left:0;}
		#draw1 > svg{width:100%;height:100%;}
		#Gold_Fill{transition:opacity 0.5s ease;}
		p{color:#d3b374;font-size:1.3em;line-height:1.5em;max-width:325px;margin-top:1em;}
		#subnav
		{
			&{z-index:1;position:absolute;left:0;bottom:50px;display:flex;flex-direction:row;justify-content:flex-start;}
			button{appearance:none;outline:none;cursor:pointer;$primaryFont(300);border:1px solid #fff;width:330px;box-sizing:border-box;color:#fff;font-size:0.85em;padding-top:20px;padding-bottom:20px;text-align:left;}
			button.fos{border-top-left-radius:30px;border-bottom-left-radius:30px;background:#756444 url(/assets/legacy//plus.svg) no-repeat 93% center/30px auto;padding-left:50px;}
			button.wms{border-top-right-radius:30px;border-bottom-right-radius:30px;background:transparent url(/assets/legacy//plus.svg) no-repeat 93% center/30px auto;padding-left:40px;}
		}
	}
	.s2
	{
		&{background:#F0F0F0;padding:190px 0;}
		.contain{max-width:1020px;opacity:0;transform:translate(0,50px);transition:all 0.5s ease;}
		h3{color:#101e29;$secondaryFont(300);font-size:2.7em;line-height:1.39em;margin-bottom:1em;}
		p{margin-left:140px;padding-left:160px;position:relative;opacity:0;transition:opacity 0.5s ease;}
		p::before{content:"";width:130px;height:1px;top:16px;background:#967E28;display:block;position:absolute;left:0;}
	}
	.s2.in-view .contain{opacity:1;transform:translate(0,0);}
	.s2.in-view p{opacity:1;transition-delay:0.5s;}
	.s3
	{
		&{background:#756444;padding:200px 0 0 0;position:relative;height:1000px;max-height:100vh;box-sizing:border-box;}
		h2::before{content:"1";}
		#draw2{position:absolute;top:-30px;left:0;width:100%;height:100%;}
		#draw2 > svg {width:100%;height:100%;}
	}
	.s4
	{
		&{padding:85px 0;position:relative;box-sizing:border-box;}
		.img{background:url(/assets/legacy//01_familyOffice.jpg) no-repeat center/cover}
	}
	.s5
	{
		&{background:#083136;padding:200px 0 0 0;position:relative;height:1000px;max-height:100vh;box-sizing:border-box;}
		h2::before{content:"2";}
		#draw3{position:absolute;top:-30px;left:0;width:100%;height:100%;}
		#draw3 > svg {width:100%;height:100%;}
	}
	.s6
	{
		&{padding:85px 0;position:relative;box-sizing:border-box;background:#F0F0F0}
		.img{left:85px;background:url(/assets/legacy//02_legacyPlanning.jpg) no-repeat center/cover}
		.half{left:50%;border-right:none;border-left:1px solid #BEBBB3;padding:125px 0 125px 84px;padding-right:0;position:relative;}
	}
	.s7
	{
		&{background:#441B24;padding:200px 0 0 0;position:relative;height:1000px;max-height:100vh;box-sizing:border-box;overflow:hidden;}
		h2::before{content:"3";}
		#draw4{position:absolute;top:-30px;left:75px;width:100%;height:100%;}
		#draw4 > svg {width:100%;height:100%;}
	}
	.s8
	{
		&{padding:85px 0;position:relative;box-sizing:border-box;}
		.img{background:url(/assets/legacy//03_philanthropic.jpg) no-repeat center/cover}
	}
	.s9
	{
		&{background:#101E29;padding:200px 0 0 0;position:relative;height:1000px;max-height:100vh;box-sizing:border-box;}
		h2::before{content:"4";}
		#draw5{position:absolute;top:-30px;left:0;width:100%;height:100%;}
		#draw5 > svg {width:100%;height:100%;}
	}
	.s10
	{
		&{padding:85px 0;position:relative;box-sizing:border-box;background:#F0F0F0}
		.img{left:85px;background:url(/assets/legacy//04_taxStrategies.jpg) no-repeat center/cover}
		.half{left:50%;border-right:none;border-left:1px solid #BEBBB3;padding:125px 0 125px 84px;padding-right:0;position:relative;}
	}
	.s11
	{
		&{background:#756444;padding:200px 0 0 0;position:relative;height:1000px;max-height:100vh;box-sizing:border-box;overflow:hidden}
		h2::before{content:"5";}
		#draw6{position:absolute;top:-30px;left:75px;width:100%;height:100%;}
		#draw6 > svg {width:100%;height:100%;}
	}
	.s12
	{
		&{padding:85px 0;position:relative;box-sizing:border-box;}
		.img{background:url(/assets/legacy//05_assetManagement.jpg) no-repeat center/cover}
	}
	.s13
	{
		&{background:#083136;padding:200px 0 0 0;position:relative;height:1000px;max-height:100vh;box-sizing:border-box;}
		h2::before{content:"6";}
		#draw7{position:absolute;top:-30px;left:0;width:100%;height:100%;}
		#draw7 > svg {width:100%;height:100%;}
	}
	.s14
	{
		&{padding:85px 0;position:relative;box-sizing:border-box;background:#F0F0F0}
		.img{left:85px;background:url(/assets/legacy//06_dilegence.jpg) no-repeat center/cover}
		.half{left:50%;border-right:none;border-left:1px solid #BEBBB3;padding:125px 0 125px 84px;padding-right:0;position:relative;}
	}
	.s15
	{
		&{background:#441B24;padding:200px 0 0 0;position:relative;height:1000px;max-height:100vh;box-sizing:border-box;}
		h2{max-width:740px}
		h2::before{content:"7";}
		#draw8{position:absolute;top:-30px;left:0;width:100%;height:100%;}
		#draw8 > svg {width:100%;height:100%;}
	}
	#container .s15 h2{max-width:740px}
	.s16
	{
		&{padding:85px 0;position:relative;box-sizing:border-box;}
		.img{background:url(/assets/legacy//07_exit.jpg) no-repeat center/cover}
	}
}
@media all and (max-width:1480px)
{
	#container .s1
	{
		.subnav-links1
		{
			h2{font-size:2em;}
			> div:nth-child(1){padding-top:25px;width:320px;}
			> div:nth-child(2){width:calc(100% - 320px)}
			> div:nth-child(3){display:none;}
		}
		.subnav-links2 
		{
			&{left:3%;}
			h2{font-size:2em;}
			> div:nth-child(1){padding-top:25px;width:320px;}
		}	
	}
	#family-office
	{
		h5{font-size:2.25em;}
	}
}
@media all and (max-width:1270px)
{
	#family-office
	{
		h5{font-size:2em;}
		.s3
		{
			#draw2{top:20%;height:80%;}
		}
		.s5
		{
			#draw3{top:20%;height:80%;}
		}
		.s7
		{
			#draw4{top:20%;height:80%;left:0}
		}
		.s9
		{
			#draw5{top:20%;height:80%;}
		}
		.s11
		{
			#draw6{top:20%;height:80%;left:0}
		}
		.s13
		{
			#draw7{top:20%;height:80%;left:0}
		}
		.s15
		{
			#draw8{top:20%;height:80%;}
		}
	}
}
@media all and (max-width:1124px)
{
	#family-office
	{
		.s1
		{
			&{overflow:hidden}
			#draw1,svg{height:50%;width:160%;left:-50%;top:75px;}
			#draw1 > svg{width:100%;height:100%;left:0;top:0;}
			h1{font-size:2.2em;letter-spacing:0.025em;margin-top:calc(130px + 2em);}
			h1 br{display:none;}
			#subnav{bottom:100px}
		}
		.s4,.s6,.s8,.s10,.s12,.s14,.s16
		{
			li span{font-size:1.25em;}
		}	
	}	
}
@media all and (max-height:760px) and (max-width:1124px)
{
	#family-office .s1 #subnav{bottom:50px}
}
@media all and (max-height:700px) and (max-width:1124px)
{
	#family-office .s1 #subnav{bottom:35px}
}
@media all and (max-width:767px)
{
	#family-office #container
	{
		h2{font-size:2em;}
		.half{width:100% !important;border:none !important;padding:0 !important;height:auto;left:0 !important;min-height:0}
		.img{position:relative;left:0 !important;width:94%;height:300px;}
		.s1 
		{
			#draw1,svg{left:-38%}
			#draw1 > svg{left:0}
			#subnav{display:block;width:100%}
			#subnav button.wms{display:none;}
			#subnav button.fos{border-top-right-radius: 30px;border-bottom-right-radius: 30px;font-size:1.1em;width:100%}
			.subnav-links1
			{
				&{flex-direction:column;}
				h2{font-size:2em;}
				> div{width:100% !important;}
				> div:nth-child(1){padding-top:0}
				ul{flex-direction:column;}
				li{padding-bottom:0;width:100%}
				
			}	
		}	
		.s2
		{
			&{padding:100px 0;}
			h3{font-size:2em;}
			p{margin-left:20px;padding-left:30px;}
			p::before{width:20px;}
		}
		.s4,.s6,.s8,.s10,.s12,.s14,.s16{min-height:0;}	
		.s3,.s5,.s7,.s9,.s11,.s13,.s15
		{
			&{padding:100px 0;height:500px}
			
		}
		.s3
		{
			h2{top:-50px;position:relative;}
			#draw2{top:35%;height:70%;width:150%;left:-50%;}
		}
		.s5
		{
			h2{top:-50px;position:relative;}
			#draw3{top:35%;height:70%;width:150%;left:-50%;}
		}
		.s7
		{
			h2{top:-50px;position:relative;}
			#draw4{top:35%;height:70%;width:150%;left:-50%;}
		}
		.s9
		{
			h2{top:-50px;position:relative;}
			#draw5{top:35%;height:70%;width:150%;left:-50%;}
		}
		.s11
		{
			h2{top:-50px;position:relative;}
			#draw6{top:35%;height:70%;width:150%;left:-50%;}
		}
		.s13
		{
			h2{top:-50px;position:relative;}
			#draw7{top:35%;height:70%;width:150%;left:-50%;}
		}
		.s15
		{
			h2{top:-50px;position:relative;}
			#draw8{top:35%;height:70%;width:150%;left:-50%;}
		}
	}	
}