/* 
	PARTS
	- defined by 'ALL CAPS'
	- parts within parts, will cause styles to conflict & cascading issues
	- seperate into different files, eg: parts-main, parts-singles, parts-blog
*/



/* HEADER */

.HEADER {
	background: #fff;
	height: 100%;
}

.HEADER .b-frame {
	height: 100%;
}

.HEADER .inset {
	position: relative;
	height: 100%;
}

.HEADER .logo {
	position: absolute;
	display: block;
	top: 50%;
	left: 0;
	width: 320px;
	height: 70px;
	transform: translate(0, -50%);
	transition: transform 0.25s;
}

.HEADER .nav-trigger {
	display: none;
	position: absolute;
	top: 50%;
	right: -15px;
	width: 40px;
	height: 40px;
	background: url(../img/ui-nav.svg);
	transform: translate(0, -50%);
}

#toggle-nav:checked ~ .b-page .HEADER .nav-trigger{
	background: url(../img/ui-dismiss.svg);
}

/* nav */

.HEADER nav {
	position: absolute;
	top: 50%;
	right: 0;
	height: 120px;
	text-align: right;
	transform: translate(0, -50%);
}

/* primary */

.HEADER .primary {
	font-size: 16px;
	font-weight: 600;
	height: 60px;
	line-height: 60px;
}

.HEADER .primary li {
	display: inline-block;
	position: relative;
	margin: 0 0 0 50px;
	
}

.HEADER .primary a {
	color: #343434;
}

.HEADER .primary a:hover {
	color: #B30839;
}

.HEADER .primary .active::after {
	content: "";
	display: block;
	position: absolute;
	bottom: 5px;
	left: 50%;
	width: 50px;
	height: 5px;
	margin-left: -25px;
	background: #B30839;
}

/* secondary */

.HEADER .secondary {
	font-size: 14px;
	height: 30px;
	line-height: 30px;
}

.HEADER .secondary li {
	display: inline-block;
	position: relative;
	margin: 0 0 0 30px;
}

.HEADER .secondary a {
	color: #686868;
}

.HEADER .secondary a:hover {
	color: #343434;
}

@media screen and (max-width: 1050px) {
	.HEADER .logo {width:270px; height:60px;}
	.HEADER .primary li {margin-left:30px;}
}

@media screen and (max-width: 900px) {
	.HEADER .b-frame {max-width:100%;}
	.HEADER .logo {width:172px; height:29px; background:url(../img/bloom-funds-sm.svg) no-repeat center; left:-10px;}
	.HEADER .logo img {display:none;}
	.HEADER .nav-trigger {display:block;}
	.HEADER nav {display:none;}
}



/* FOOTER */

.FOOTER {
	color: #343434;
	background: #F4F4F4;
}

/* primary */

.FOOTER .primary {
	font-size: 16px;
	font-weight: 600;
	height: 24px;
	line-height: 24px;
	margin-bottom: 30px;
}

.FOOTER .primary li {
	display: inline-block;
	position: relative;
	margin: 0 50px 0 0;
	
}

.FOOTER .primary a {
	color: #343434;
}

.FOOTER .primary a:hover {
	color: #B30839;
}

/* secondary */

.FOOTER .secondary {
	font-size: 14px;
	height: 22px;
	line-height: 22px;
}

.FOOTER .secondary li {
	display: inline-block;
	position: relative;
	margin: 0 30px 0 0;
}

.FOOTER .secondary a {
	color: #686868;
}

.FOOTER .secondary a:hover {
	text-decoration: underline;
}

/* contact */

.FOOTER .contact {
	text-align: right;
}

.FOOTER .contact a {
	font-weight: 600;
	color: #343434;
}

.FOOTER .contact a:hover {
	text-decoration: underline;
}

.FOOTER .legal,
.FOOTER .copyright {
	font-size: 12px;
	line-height: 18px;
	color: #686868;
}

.FOOTER .legal a {
	color: #686868;
	padding-right: 20px;
}

.FOOTER .legal a:hover {
	text-decoration: underline;
}

.FOOTER .copyright {
	text-align: right;
}

@media screen and (min-width: 901px) {
	.FOOTER nav,
	.FOOTER .contact {white-space: nowrap;}
}

@media screen and (max-width: 900px) {
	.FOOTER {text-align:center;}
	.FOOTER .b-column:first-child {display:none;}
	.FOOTER .contact,
	.FOOTER .copyright {text-align:center;}
	.FOOTER .legal a {padding: 0 10px;}
}



/* NAV */

.NAV {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	overflow: auto;
	background: #fff;
	transform: translate(0, -100px);
	transition: transform 0.25s;
	-webkit-overflow-scrolling: touch;
}

#toggle-nav:checked ~ .b-nav .NAV {
	transform: translate(0, 0);
}

/* nav */

.NAV nav {
	padding-top: 30px;
	text-align: center;
}

.NAV li {
	position: relative;
	line-height: 60px;
	font-size: 21px;
	font-weight: 600;
}

.NAV a {
	color: #343434
}



/* MODAL */

.MODAL {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}

.MODAL .overlay {
	position: absolute;
	top: -100px;
	bottom: -100px;
	left: -100px;
	right: -100px;
	background: #343434;
	opacity: 0.9;
}

.MODAL .frame {
	position: absolute;
	top: calc(50% - 80px);
	left: 50%;
	width: 900px;
	height: 600px;
	max-width: calc(100% - 20px);
	max-height: calc(100% - 80px);
	background: #fff;
	border-radius: 4px;
	overflow: hidden;
	transform: translate(-50%, -50%);
	transition: top 0.25s;
}

#toggle-modal:checked ~ .b-modal .MODAL .frame {
	top: 50%;
}

.MODAL .close {
	position: absolute;
	top: 10px;
	right: 10px;
	width: 40px;
	height: 40px;
	background: url(../img/ui-dismiss-white.svg);
	z-index: 1;
}

.MODAL .content {
	position: relative;
	height: 100%;
}

.MODAL .content .name,
.MODAL .content .title {
	position: absolute;
	left: 60px;
	right: 60px;
	color: #fff;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.MODAL .content .name {
	top: 30px;
	font-size: 20px;
	line-height: 24px;
	font-weight: 600;
}

.MODAL .content .title {
	top: 60px;
	font-size: 16px;
	line-height: 24px;
}

.MODAL .content .details {
	box-sizing: border-box;
	border-top: 110px solid #686868;
	padding: 40px 60px 0;
	height: 100%;
	overflow: auto;
}

.MODAL .content .details::after {
	content: "";
	display: block;
	height: 40px;
}

.MODAL .content .open {
	display: none;
}

@media screen and (max-width: 900px) {
	.MODAL .frame {width:400px;}
	.MODAL .content .name {left:20px; right:60px;}
	.MODAL .content .title {left:20px; right:20px;}
	.MODAL .content .details {padding:30px 20px 0;}
	.MODAL .content .details::after {height:30px;}
}



/* BANNER */

.BANNER {
	color: #fff;
	white-space: nowrap;
	overflow: hidden;
	background: #B30839 no-repeat center;
	background-size: cover;
	text-align: center;
	position: relative;
}

.BANNER::before {
	content: "";
	display: inline-block;
	vertical-align: middle;
	width: 1px;
	min-height: 250px;
}

.BANNER .container {
	box-sizing: border-box;
	display: inline-block;
	vertical-align: middle;
	width: 100%;
	white-space: normal;
}

.BANNER .inset {
	max-width: 900px;
	margin: 0 auto;
}

.BANNER.alt-home {background-color:#343434;}
.BANNER.alt-home::before {min-height:600px;}

.BANNER.alt-cta {background-color:#343434;}
.BANNER.alt-cta::before {min-height:570px;}

.BANNER.alt-fund {background-image:url(../img/banner-fund.jpg); text-align:left;}
.BANNER.alt-fund h1 {max-width:500px;}

@media screen and (min-width: 901px) {
	.BANNER.alt-home .inset {max-width:710px; margin:0 auto 0 0; text-align:left;}
	.BANNER.alt-home h1 {font-size:52px; line-height:70px;}
	.BANNER.alt-cta h2 {font-size:42px; line-height:52px;}
	.BANNER.alt-cta p {font-size:32px; line-height:42px; margin:30px 0;}
}

@media screen and (max-width: 900px) {
	.BANNER::before {min-height:0 !important;}
	.BANNER.alt-cta,
	.BANNER.alt-fund {background-image:none !important;}
}



/* SUBNAV */

.SUBNAV {
	background: #F4F4F4;
}

.SUBNAV nav {
	font-size: 0;
	line-height: 0;
	margin: 0 -15px;
}

.SUBNAV nav li {
	display: inline-block;
	padding: 0 15px;
}

.SUBNAV nav a {
	display: block;
	padding-top: 5px;
	color: #101820;
	font-size: 14px;
	line-height: 90px;
	border-bottom: 5px solid transparent;
	transition: border-color 0.25s
}

.SUBNAV nav a:hover {border-color: #343434;}

@media screen and (max-width: 1300px) {
	.SUBNAV nav {padding:20px 0;}
	.SUBNAV nav a {line-height:30px; padding-top:0; border:none;}
	.SUBNAV nav a:hover {text-decoration:underline;}
}

@media screen and (max-width: 900px) {
	.SUBNAV {display:none;}
}



/* BREADCRUMBS */

.BREADCRUMBS {
	font-size: 14px;
	line-height: 24px;
}

.BREADCRUMBS a {
	font-weight: 600;
	color: #B30839;
}

.BREADCRUMBS a:hover {color:#343434;}

@media screen and (max-width: 900px) {
	.BREADCRUMBS {display:none;}
}



/* HOME-UPDATES */

.HOME-UPDATES {
	text-align: center;
}

.HOME-UPDATES h3 {
	color: #B30839;
}

@media screen and (min-width: 901px) {
	.HOME-UPDATES .media .b-column[data-width="1/1"] .b-card {position:relative; text-align:left; padding:60px;}
	.HOME-UPDATES .media .b-column[data-width="1/1"] .b-card h3 {padding-right:240px; max-width:600px;}
	.HOME-UPDATES .media .b-column[data-width="1/1"] .b-card p {position:absolute; top:50%; right:60px; transform:translate(0, -50%); margin:0;}
	.HOME-UPDATES .media .b-column[data-width="1/2"] .b-card {padding:40px;}
	.HOME-UPDATES .media .b-column[data-width="1/3"] .b-card {padding:30px 20px;}
	.HOME-UPDATES .media .b-column[data-width="1/3"] .b-card h3 {font-size:22px; line-height:32px;}
}



/* TEAM */

.TEAM > .b-columns >.b-column {
	width: 310px;
}

.TEAM .profile {
	box-sizing: border-box;
	background: #F4F4F4;
	border-radius: 4px;
	padding: 40px 20px;
	height: 200px;
	position: relative;
	text-align: center;
}

.TEAM .profile .name {
	font-weight: 600;
	font-size: 18px;
	line-height: 24px;
	margin-bottom: 10px;
}

.TEAM .profile .title {
	font-size: 14px;
	line-height: 24px;
}

.TEAM .profile .open {
	display: block;
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	color: #4C5258;
	transition: color 0.25s;
}

.TEAM .profile .open:hover {
	color: #B30839;
}

.TEAM .profile .open svg {
	display: block;
	position: absolute;
	bottom: 40px;
	left: 50%;
	width: 20px;
	height: 20px;
	margin-left: -10px;
	fill: currentColor;
}

.TEAM .profile .details {
	display: none;
}

@media screen and (max-width: 900px) {
	.TEAM > .b-columns >.b-column {display:block; width:auto;}
}



/* CONTACT-INFO */

.CONTACT-INFO .info {
	display: inline-block;
	overflow: hidden;
	color: #343434;
}

.CONTACT-INFO .info img {
	float: left;
	margin-right: 20px;
}

.CONTACT-INFO .info span {
	display: block;
	overflow: hidden;
	padding-top: 2px;
}

.CONTACT-INFO a.info:hover span {
	text-decoration: underline;
}

@media screen and (min-width: 901px) {
	.CONTACT-INFO {margin:-60px 0;}
	.CONTACT-INFO .b-column:nth-child(2) {text-align:center;}
	.CONTACT-INFO .b-column:nth-child(3) {text-align:right;}
}



/* CONTACT-FORM */

.CONTACT-FORM .b-column:last-child {
	padding-top: 30px;
	text-align: center;
}



/* FUND-DETAILS */

.FUND-DETAILS {
	position: relative;
}

.FUND-DETAILS h2 {
	text-align: center;
	margin-bottom: 30px;
}

.FUND-DETAILS a {
	font-weight: 600;
	color: #B30839;
}

.FUND-DETAILS a:hover {
	color: #343434;
}

.FUND-DETAILS #fund-tax-display tbody tr:last-child td {
	font-weight: 600;
}

.FUND-DETAILS .group {
	margin: 60px 0;
}

.FUND-DETAILS .group-head {margin-bottom:30px;}
.FUND-DETAILS .group-head:last-child {margin-bottom:0;}

.FUND-DETAILS .group-foot {margin-top:30px;}
.FUND-DETAILS .group-foot:first-child {margin-top:0;}

.FUND-DETAILS .group:first-child {margin-top:0 !important;}
.FUND-DETAILS .group:last-child {margin-bottom:0 !important;}

.FUND-DETAILS .b-table-frame.alt-small {
	overflow: auto;
	height: 320px;
}

.FUND-DETAILS .links {
	overflow: auto;
	height: 320px;
	padding: 40px 40px 0;
}

.FUND-DETAILS .links::after {
	content: "";
	display: block;
	height: 40px;
}

.FUND-DETAILS .links ul {
	list-style: none;
	padding: 0;
}

.FUND-DETAILS .links li {
	margin: 20px 0;
	position: relative;
	padding-left: 180px;
	line-height: 24px;
	min-height: 24px;
}

.FUND-DETAILS .links li > span {
	display: block;
	position: absolute;
	top: 0;
	left: 0;
	width: 180px;
}

.FUND-DETAILS .b-select {
	display: block;
	max-width: 600px;
	margin: 0 auto;
	box-shadow: inset 0 0 0 2px rgba(0,0,0,0.1);
}

.FUND-DETAILS .b-card.alt-fill p {
	margin: 10px 0;
}

/* back-to-top */

.FUND-DETAILS .back-to-top {
	z-index: 1;
	position: absolute;
	bottom: 20px;
	right: 20px;
	opacity: 0;
	transition: opacity 0.25s;
}

.FUND-DETAILS .back-to-top a {
	overflow: hidden;
	display: block;
	width: 60px;
	height: 60px;
	background: #fff;
	border-radius: 30px;
	box-shadow: 0 2px 7px 0 rgba(0,0,0,0.17);
}

.FUND-DETAILS .back-to-top a svg {
	display: block;
	width: 60px;
	height: 60px;
}

.FUND-DETAILS .back-to-top.sticky {position:fixed; margin-top:0 !important;}
.b-page[data-scroll] .FUND-DETAILS .back-to-top {opacity:1;}

@media screen and (min-width: 901px) {
	.FUND-DETAILS .b-frame:first-child {padding-top:0;}
}

@media screen and (max-width: 1200px) {
	.FUND-DETAILS .b-column[data-width="1/2"] .links li {padding-left:0;}
	.FUND-DETAILS .b-column[data-width="1/2"] .links li > span {position:static; width:auto;}
}

@media screen and (max-width: 900px) {
	.FUND-DETAILS h2 {text-align:center;}
	.FUND-DETAILS .links {padding:20px 20px 0;}
	.FUND-DETAILS .links::after {height:20px;}
	.FUND-DETAILS .links li {padding-left:0;}
	.FUND-DETAILS .links li > span {position:static; width:auto;}
	.FUND-DETAILS .back-to-top {display:none;}
}